tool.js

vue时间格式过滤器（今天，昨天，周几，年月日）

TimeFormat(oldDateValue) {
      let currentDate = new Date();
      let day = currentDate.getDay();
      let weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
      let week = weeks[day];
      let oldDate = new Date(oldDateValue);
      let showOldDate = "";
      let a = 2
      if( Math.floor((currentDate - oldDate)/1000/3600/24) > 7 ) {
        let oldDateArr =  dateFormat(oldDate, "yyyy-MM-dd").split("-");
        let currentDataArr = dateFormat(currentDate, "yyyy-MM-dd").split("-");
        if(currentDataArr[0] === oldDateArr[0]) {
          if(oldDateArr[1].split("")[0] === "0") {
            oldDateArr[1] = oldDateArr[1].split("")[1];
          }
          if(oldDateArr[2].split("")[0] === "0") {
            oldDateArr[2] = oldDateArr[2].split("")[1];
          }
          showOldDate = oldDateArr[1] + "月" + oldDateArr[2] + "日";
        } else {
          if(oldDateArr[1].split("")[0] === "0") {
            oldDateArr[1] = oldDateArr[1].split("")[1];
          }
          if(oldDateArr[2].split("")[0] === "0") {
            oldDateArr[2] = oldDateArr[2].split("")[1];
          }
          showOldDate = oldDateArr[0] + "年" + oldDateArr[1] + "月" + oldDateArr[2] + "日";
        }
      } else {
        let oldDateArr =  dateFormat(oldDate, "yyyy-MM-dd hh:mm:ss").split(" ");
        let currentDateArr =  dateFormat(currentDate, "yyyy-MM-dd hh:mm:ss").split(" ");
        let yMd_old = oldDateArr[0].split("-");
        let hMs_old = oldDateArr[1].split(":");
        let yMd_new = currentDateArr[0].split("-");
        let hMs_new = currentDateArr[1].split(":");
        if((currentDate - oldDate)/1000/3600/24 < 1) {
          if(yMd_old[2] === yMd_new[2]) {
            showOldDate = oldDateArr[1];
          } else {
            showOldDate = "昨天" + oldDateArr[1];
          }
        }
        if((currentDate - oldDate)/1000/3600/24 > 1) {
          if(Number(yMd_old[2]) === (Number(yMd_new[2])-1)) {
            showOldDate = "昨天" + oldDateArr[1];
          } else {
            showOldDate = weeks[oldDate.getDay()];
            if(currentDate.getDay() > 2) {
              if( oldDate.getDay() < currentDate.getDay()) {
                showOldDate = weeks[oldDate.getDay()];
              } else {
                if(yMd_old[1].split("")[0] === "0") {
                  yMd_old[1] = yMd_old[1].split("")[1];
                }
                if(yMd_old[2].split("")[0] === "0") {
                  yMd_old[2] = yMd_old[2].split("")[1];
                }
                showOldDate = yMd_old[1] + "月" + yMd_old[2] + "日";
              }
            } else {
              if(yMd_old[1].split("")[0] === "0") {
                yMd_old[1] = yMd_old[1].split("")[1];
              }
              if(yMd_old[2].split("")[0] === "0") {
                yMd_old[2] = yMd_old[2].split("")[1];
              }
              showOldDate = yMd_old[1] + "月" + yMd_old[2] + "日";
            }
          }
        }
      }
      return showOldDate;
    },

/**
 * 日期对象转为日期字符串
 * @param date 需要格式化的日期对象
 * @param sFormat 输出格式,默认为yyyy-MM-dd                         年：y，月：M，日：d，时：h，分：m，秒：s
 * @example  dateFormat(new Date())                                "2017-02-28"
 * @example  dateFormat(new Date(),'yyyy-MM-dd')                   "2017-02-28"
 * @example  dateFormat(new Date(),'yyyy-MM-dd hh:mm:ss')         "2017-02-28 09:24:00"
 * @example  dateFormat(new Date(),'hh:mm')                       "09:24"
 * @example  dateFormat(new Date(),'yyyy-MM-ddThh:mm:ss+08:00')   "2017-02-28T09:24:00+08:00"
 * @returns {boolean}
 */
function dateFormat(date, sFormat) {
  if (isEmpty(sFormat)) {
      sFormat = 'yyyy-MM-dd'
  }

  if (!(date instanceof Date)) {
      try {
          if (isEmpty(date)) {
              return ''
          }
          if (date.lastIndexOf('.') !== -1) {
              date = date.substr(0, date.lastIndexOf('.'))
          }
          date = date.replace(/\-/g, '/') // eslint-disable-line
          date = new Date(date)
      } catch (e) {
          console.log(e)
      }
  }

  let time = {
      Year: 0,
      TYear: '0',
      Month: 0,
      TMonth: '0',
      Day: 0,
      TDay: '0',
      Hour: 0,
      THour: '0',
      hour: 0,
      Thour: '0',
      Minute: 0,
      TMinute: '0',
      Second: 0,
      TSecond: '0',
      Millisecond: 0,
  }
  time.Year = date.getFullYear()
  time.TYear = String(time.Year).substr(2)
  time.Month = date.getMonth() + 1
  time.TMonth = time.Month < 10 ? '0' + time.Month : String(time.Month)

  time.Day = date.getDate()
  time.TDay = time.Day < 10 ? '0' + time.Day : String(time.Day)

  time.Hour = date.getHours()
  time.THour = time.Hour < 10 ? '0' + time.Hour : String(time.Hour)
  time.hour = time.Hour < 13 ? time.Hour : time.Hour - 12
  time.Thour = time.hour < 10 ? '0' + time.hour : String(time.hour)

  time.Minute = date.getMinutes()
  time.TMinute = time.Minute < 10 ? '0' + time.Minute : String(time.Minute)
  time.Second = date.getSeconds()
  time.TSecond = time.Second < 10 ? '0' + time.Second : String(time.Second)
  time.Millisecond = date.getMilliseconds()

  return sFormat.replace(/yyyy/ig, String(time.Year))
  .replace(/yyy/ig, String(time.Year))
  .replace(/yy/ig, time.TYear)
  .replace(/y/ig, time.TYear)

  .replace(/MM/g, time.TMonth)
  .replace(/M/g, String(time.Month))

  .replace(/dd/ig, time.TDay)
  .replace(/d/ig, String(time.Day))

  .replace(/HH/g, time.THour)
  .replace(/H/g, String(time.Hour))
  .replace(/hh/g, time.Thour)
  .replace(/h/g, String(time.hour))

  .replace(/mm/g, time.TMinute)
  .replace(/m/g, String(time.Minute))
  .replace(/ss/ig, time.TSecond)
  .replace(/s/ig, String(time.Second))
  .replace(/fff/ig, String(time.Millisecond))
}

/**
* 字符串转成时间
* @param v
* @return {Object}
*/
const stingToTime = (v) => {
  if(!isEmpty(v)){
    return {
      year: v.slice(0, 4),
      month: v.slice(4, 6),
      day: v.slice(6, 8),
      hour: v.slice(8, 10),
      minute: v.slice(10, 12),
      second: v.slice(12,14),
    }
  }
}

/**
* 判断对象为空
* @param v
* @return {boolean}
*/
const isEmpty = (v) => {
  if (typeof v === 'undefined') {
      return true
  }
  if (v === undefined || v === 'undefined') {
      return true
  }
  if (v === null) {
      return true
  }
  if (v === '' || v === 'null') {
      return true
  }
  if (v === 0) {
      return true
  }
  switch (typeof v) {
      case 'string' :
          if (v.trim().length === 0) {
              return true
          }
          break
      case 'boolean' :
          if (!v) {
              return true
          }
          break
      case 'number' :
          if (v === 0) {
              return true
          }
          break
      case 'object' :
          return undefined !== v.length && v.length === 0
  }
  return false
}

export {
  empty,
  dateFormat,
  stingToTime,
}

vue金额过滤器

filters: {
    MoneyFormat(money) {
      if (money && money != null) {
        money = String(money);
        var left = money.split('.')[0], right = money.split('.')[1];
        right = right ? (right.length >= 2 ? '.' + right.substr(0, 2) : '.' + right + '0') : '.00';
        var temp = left.split('').reverse().join('').match(/(\d{1,3})/g);
        return (Number(money) < 0 ? '-' : '') + temp.join(',').split('').reverse().join('') + right;
      } else if (money === 0) { 
        return '0.00';
      } else {
        return '';
      }
    }
  },

手机横屏签名功能(vue)

<!--
 * @Descripttion: 
 * @version: 
 * @Author: Luo Yinxuan
 * @Date: 2020-03-26 17:54:36
 -->
<template>
  <div class="sign-name">
    <van-nav-bar class="header">
      <template #left>
        <div 
          class="header-left"
          @click="goBack()"
          >
          <img :src="backIcon">
        </div>
      </template>
      <template #title>
        <div class="header-center">
          租赁立项更变审核
        </div>
      </template>
    </van-nav-bar>
    <span class="tip">
      请将手机横过来签字  
    </span>
    <canvas
      ref="canvas"
      class="canvas"
    ></canvas>
    <!-- <img v-if="imgBase64_60" :src="imgBase64_60" alt="缩略图">
    <img v-if="imgBase64" :src="imgBase64" alt="原图"> -->
    <div class="footer">
      <span class="button">
          <span 
            class="confirm"
            @click="saveImg"  
          >确定</span> 
      </span>
      <span class="button">
        <span 
          class="cancel"
          @click="cancel"  
        >清除</span>
      </span>
      <span class="button">
        <span 
          class="return"
          @click="goBack"  
        >
          返回
        </span>
      </span>
    </div>
  </div>
</template>

<script>
  import { NavBar, Tab, Tabs, Collapse, CollapseItem, Popup } from 'vant';
  import backIcon from '@/assets/workflow/icon_/arrow-left@2x.png';
  import "@/assets/resetUi.css";
  export default {
    name: "SignName",
    [NavBar.name]: NavBar,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem,
    [Popup.name]: Popup,
    data() {
      return {
        a: 1,
        backIcon,
        canvas: "",
        cxt: "",
        imgBase64: "",
        imgBase64_10: "",
      }
    },
    mounted() {
      this.generateCanvas();
    },
    methods: {
      goBack() {
        this.$router.push({
          name: "WorkflowDetail",
        });
      },
      base64ToImg(base64, filename) { // 图片base64转码
        let dataURLtoFile = (dataurl, filename = 'file') => {
          if(!dataurl) return;
          let arr = dataurl.split(',')
          let mime = arr[0].match(/:(.*?);/)[1]
          let suffix = mime.split('/')[1]
          let bstr = atob(arr[1])
          let n = bstr.length
          let u8arr = new Uint8Array(n)
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n)
          }
          return new File([ u8arr ], `${filename}.${suffix}`, {
            type: mime,
          })
        }
        let imgFile = dataURLtoFile(base64, filename);
        if(!imgFile) return;
        // return window.URL.createObjectURL(imgFile);
        return imgFile;
      },
      saveImg() {
        let quality = 0.10;
        this.imgBase64 = this.canvas.toDataURL();
        this.imgBase64_10 = this.canvas.toDataURL('image/jpeg', quality);
        // let obj = this.base64ToImg(this.imgBase64);
        // let obj_10 = this.base64ToImg(this.imgBase64_10);
        // let size = Number((obj.size / 1024).toFixed(2));
        // let size_10 = Number((obj_10.size / 1024).toFixed(2));
        // console.log(obj.size, obj_10.size);
        this.$router.push({
          name: "WorkflowDetail",
          params: {
            imgBase64: {
              normal: this.imgBase64,
              thumbnail: this.imgBase64_10, 
            }
          }
        })
      },
      generateCanvas() {
        this.canvas = this.$refs.canvas;
        this.cxt = this.canvas.getContext("2d");
        this.canvas.width = this.canvas.clientWidth;
        this.canvas.height = this.canvas.clientHeight;
        this.cxt.fillStyle = "#fff";
        this.cxt.fillRect(0, 0, this.canvas.clientWidth, this.canvas.clientHeight);
        this.cxt.strokeStyle = "#000000";
        this.cxt.lineWidth = "1";
        this.cxt.lineCap = "round";
          //开始绘制
        this.canvas.addEventListener("touchstart", function(e) {
            this.cxt.beginPath();
            this.cxt.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
        }.bind(this), false);
        //绘制中
        this.canvas.addEventListener("touchmove", function(e) {
            this.cxt.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
            this.cxt.stroke();
        }.bind(this), false);
        //结束绘制
        this.canvas.addEventListener("touchend", function() {
            this.cxt.closePath();
        }.bind(this), false);
      },
      cancel() {
        this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height);
      },
    }
  }
</script>

<style lang="stylus" scoped>
  .sign-name {
    .header {
      background: #2499FF;
      height: 48px;
      .header-center {
        font-family: PingFangSC-Semibold;
        font-size: 17px;
        color: #FFFFFF;
        letter-spacing: 0.61px;
      }
      .header-left {
        img {
          width: 16px;
        }
      }
    }
    .tip {
      position: fixed;
      top: 78px;
      display: inline-block;
      width: 100%;
      text-align: center;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #FF3131;
    }
    .canvas {
      width: 100%;
      height: 74vh;
    }
    .footer {
      display: flex;
      height: calc(26vh - 48px);
      .button {
        flex: 1;
        text-align: center;
        align-self: center;
        span {
          display: inline-block;
          height: 40px;
          width: 100px;
          line-height: 40px;
          border-radius: 4px;

        }
        .confirm {
          opacity: 0.2;
          background: #2499FF;
          transform: rotate(-270deg);
          font-family: PingFangSC-Semibold;
          font-size: 16px;
          color: #2499FF;
        }
        .cancel, .return {
          border: 1px solid #656464;
          transform: rotate(-270deg);
          font-family: PingFangSC-Semibold;
          font-size: 16px;
          color: #656464;
        }
      }
    }
  }
</style>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Vue 学习笔记
    # Vue.js ### 什么是Vue.js + Vue.js 是目前最火的一个前端框架，React是最流行的一个...
    佐半边的翅膀阅读 162评论 0赞 1
  • Vue.js 1.0 Official Guide Note
    Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性：var data = { a:...
    云之外阅读 2,241评论 0赞 6
  • 第八章 vue.js-自定义指令（基础篇）
    在第五章中我们已经介绍了需要Vue内置的指令，比如v-if、v-show等，这些丰富的内置指令能满足我们的...
    六个周阅读 1,709评论 2赞 9
  • 2018-07-31
    基于Vue的一些资料 内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 element★...
    尝了又尝阅读 1,171评论 0赞 1
  • 我们都一样啊
    我们都一样啊 刚升大二，再也不是学校里边最小的学弟学妹了。也成为了新生的学长学姐，最近因为组织的...
    撒旦伊沐阅读 314评论 1赞 3