美文网首页
vue 扩展时间指令 功能时间转换成文字例如:(刚刚、2分钟前、

vue 扩展时间指令 功能时间转换成文字例如:(刚刚、2分钟前、

作者: 放下手机出来嗨 | 来源:发表于2019-06-05 16:34 被阅读0次
    /**
        * 使用方式:1、时间戳毫秒级 <div  v-z3-time="{ time: '1521279696000', type: '1' }"></div>
                  2、日期格式<div  v-z3-time="{ time: '2018-03-22 10:21:12', type: '2' }"></div>
                  3、type=1 & type=2
                         (1)新闻的资讯按照时间1小时以内的是“多少分钟前”,1分钟内的资讯显示“刚刚”表示
                         (2)当天内显示“小时:分钟”, 如“1:00”
        */
          Vue.directive('z3-time', (el, binding, vnode, oldVnode) => {
          var dateTimeStamp = binding.value.time // 传入时间戳
          var dateType = parseInt(binding.value.type)
          if (dateTimeStamp.indexOf('-') == -1) {
            dateTimeStamp = parseInt(binding.value.time)
          }else{
            dateTimeStamp = dateTimeStamp.replace(/-/g, '/')
          }
    
          if (dateTimeStamp != undefined && dateTimeStamp != null && dateTimeStamp != '') {
            if (dateTimeStamp.length == 13) {
              dateTimeStamp = parseInt(binding.value)
            } else {
              var timestamp = Date.parse(new Date(dateTimeStamp))
              dateTimeStamp = timestamp
            }
            var now = new Date().getTime()
            var day_conver = 1000 * 60 * 60 * 24
            var hour_conver = 1000 * 60 * 60
            var min_conver = 1000 * 60
            var time_conver = now - dateTimeStamp
            var temp_conver
            var date = new Date(dateTimeStamp)
            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
            var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' '
            var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':'
            var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes())
            if (dateType === 1) {
              if ((time_conver / day_conver) < 1) {
                temp_conver = (time_conver / hour_conver)
                if (temp_conver >= 1) {
                  el.innerHTML = parseInt(temp_conver) + "小时前"
                } else {
                  temp_conver = (time_conver / min_conver)
                  if (temp_conver >= 1) {
                    el.innerHTML = parseInt(temp_conver) + "分钟前"
                  } else {
                    el.innerHTML = "刚刚"
                  }
                }
              } else {
                el.innerHTML = M + D + h + m
              }
            } else {
              var curTimeMillis = new Date().getTime() // 系统当前时间戳
              let yesterdayDate = formatDate(dateTimeStamp,'MM:dd') //传入日期
              let todayDate = formatDate(curTimeMillis,'MM:dd') //今天日期
              var curDate = new Date(curTimeMillis)
              var todayHoursSeconds = curDate.getHours() * 60 * 60
              var todayMinutesSeconds = curDate.getMinutes() * 60
              var todaySeconds = curDate.getSeconds()
              var todayMillis = (todayHoursSeconds + todayMinutesSeconds + todaySeconds) * 1000
              var todayStartMillis = curTimeMillis - todayMillis
              var oneDayMillis = 24 * 60 * 60 * 1000
              var yesterdayStartMilis = todayStartMillis - oneDayMillis
              if (todayDate > yesterdayDate) {
                el.innerHTML = "昨天 " + h + m
                if(dateTimeStamp <= yesterdayStartMilis){
                  el.innerHTML = M + D + h + m
                }
              }else if(todayDate === yesterdayDate){
                el.innerHTML = h + m
              }
            }
          } else {
            el.innerHTML = "--"
          }
        })
    
    dateFilter(val) {
          let oldTime = parseInt(val / 1000)
          let nowTime = parseInt(new Date().getTime() / 1000) // 获取当前时间戳
          let nowDate = new Date(nowTime * 1000) // 当前日期对象
          let oldDate = new Date(oldTime * 1000) // 参数日期对象
    
          let Y = oldDate.getFullYear()
          let m = oldDate.getMonth() + 1
          let d = oldDate.getDate()
          let H = oldDate.getHours()
          let i = oldDate.getMinutes()
          //  let s = oldDate.getSeconds()
          function zeroize(num) {
            return (String(num).length === 1 ? '0' : '') + num;
          }
          let timeDiff = nowTime - oldTime // 相差秒数
          if (timeDiff < 60) {
            return '刚刚'
          } else if (timeDiff < 3600) { // 一小时前之内
            return Math.floor(timeDiff / 60) + '分钟前';
          } else if (nowDate.getFullYear() === Y && nowDate.getMonth() + 1 === m && nowDate.getDate() === d) {
            return '今天' + zeroize(H) + ':' + zeroize(i);
          } else {
            let newDate = new Date((nowTime - 86400) * 1000); // 当前时间减一天(昨天)
            if (newDate.getFullYear() === Y && newDate.getMonth() + 1 === m && newDate.getDate() === d) {
              return '昨天' + zeroize(H) + ':' + zeroize(i);
            } else if (nowDate.getFullYear() === Y) {
              return zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i);
            } else {
              return Y + '年' + zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i);
            }
          }
        }
    

    相关文章

      网友评论

          本文标题:vue 扩展时间指令 功能时间转换成文字例如:(刚刚、2分钟前、

          本文链接:https://www.haomeiwen.com/subject/serlxctx.html