vue定义全局date过滤器(自定义JS文件模块和Moment.js库)

自定义dateFormat.js文件模块

  • dateFormat.js

      /**
       * 时间字符串 转 时间戳
       * @param {String} time_str 时间字符串(格式"2014-07-10 10:21:12")
       * @returns {Number} 10位数的时间戳(秒值:1404958872000)
       */
    const toTimestamp = time_str => +new Date(time_str) / 1000
    
    /**
     * 时间戳 转 时间字符串
     * @param {Number} time_stamp 10位数的时间戳(秒值:1404958872)
     * @returns {String} 时间字符串 (格式"2014-07-10 10:21:12")
     */
    const toTimestr = time_stamp => {
        const time = new Date(time_stamp * 1000);
        const Y = time.getFullYear()
        const M = (time.getMonth() + 1).toString().padStart(2, '0')
        const D = time.getDate().toString().padStart(2, '0')
        const h = time.getHours().toString().padStart(2, '0')
        const m = time.getMinutes().toString().padStart(2, '0')
        const s = time.getSeconds().toString().padStart(2, '0')
        return `${Y}/${M}/${D} ${h}:${m}:${s}`
    }
    
    export { toTimestamp, toTimestr}
  • vue项目的main.js文件中全局注册

    // 定义全局过滤器
    import * as filters from "./dateFormat";
    Object.keys(filters).forEach(key => {
        Vue.filter(key, filters[key])
    })

JavaScript 日期处理类库Moment.js

  • vue项目的main.js文件中全局注册的两种形式

    • 第一种

          // 引入JavaScript 日期处理类库(格式化)
          import moment from "moment";
          // moment.locale('zh-cn') // 汉化
      
          /**
           * 全局挂载(适用于script标签中的js代码格式化时间)
           * 使用方式:this.$moment(时间).format('时间格式')
           */
          Vue.prototype.$moment = moment;
    • 第二种

      /**
       * 注册为全局过滤器(适用于template标签中的html代码 => 插值表达式和v-bind属性绑定)
       * 使用方式:<span>{{ 时间 | formatDate('时间格式') }}</span>
       * @parms { String } formatStr  时间格式:"Y-M-D h:m:s"
       * @parms { any } data 时间:可以是时间戳,也可以是其他形式的时间,比如2019/8/14
       * 时间戳要求是毫秒值,如果是秒值,需要在过滤前 * 1000变为毫秒值
       *  <span> {{ 1111111111 * 1000 | formatDate('Y-M-D h:m:s') }} </span> 
       * 'hh:mm:ss'是十二小时制时间,'HH:mm:ss'是二十四小时制时间
       */
      Vue.filter('formatDate', function (date: any, formatStr: string) {
          return moment(date).format(formatStr)
      })
posted @ 2019-08-14 16:11  _冰  阅读(...)  评论(... 编辑 收藏