时间格式化过滤器

代码

  1. Vue.filter('dateFormat', function (time) {
  2.   const dt = new Date(time) //new实例
  3.   const y = dt.getFullYear() //获取年
  4.   //获取月 日 时等等     其中月默认从0开始所以+1  
  5.   //使用空字符串转为string类型 
  6.   //使用padStart方法补0
  7.   const m = (dt.getMonth() + 1 + '').padStart(2, '0') 
  8.   const d = (dt.getDate() + '').padStart(2, '0')
  9.   const hh = (dt.getHours() + '').padStart(2, '0')
  10.   const mm = (dt.getMinutes() + '').padStart(2, '0')
  11.   const ss = (dt.getSeconds() + '').padStart(2, '0')
  12.   return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
  13. })

使用

  1. {{时间戳 | dateFormat}}

拖拽自定义指令

代码

  1. /*
  2.  * @Author: wangchaoxu
  3.  * @Date: 2020-07-15 18:56:51
  4.  * @LastEditors: wangchaoxu
  5.  * @LastEditTime: 2020-07-17 17:34:55
  6.  * @Description:
  7.  */
  8. import Vue from 'vue';
  9. Vue.directive('drag', function(el) {
  10.   el.style.position = 'absolute';
  11.   el.style.zIndex = 9;
  12.   el.style.cursor = 'move';
  13.   el.onmousedown = function(ev) {
  14.     let mx = ev.clientX; //鼠标距离浏览器窗口左侧
  15.     let my = ev.clientY; //鼠标距离浏览器窗口上侧
  16.     let ex = el.offsetLeft; //元素距离浏览器窗口左侧
  17.     let ey = el.offsetTop; //元素距离上侧
  18.     let ew = el.offsetWidth; //元素宽度
  19.     let eh = el.offsetHeight; //元素高度
  20.     let cx = mx - ex; //鼠标距离元素左边距离
  21.     let cy = my - ey; //元素距离元素上面距离
  22.     let bw = document.body.clientWidth; //浏览器宽度
  23.     let bh = document.body.clientHeight; //浏览器高度
  24.     document.onmousemove = function(ev) {
  25.       let nmx = ev.clientX;
  26.       let nmy = ev.clientY;
  27.       let emx = nmx - cx; //元素停止时距离浏览器左边距离
  28.       let emy = nmy - cy; //元素停止时距离浏览器顶部距离
  29.       el.style.left = emx + 'px';
  30.       el.style.top = emy + 'px';
  31.       if (nmx < cx) el.style.left = 0 + 'px';
  32.       if (nmy < cy) el.style.top = 0 + 'px';
  33.       if (nmx > bw - (ew - cx)) el.style.left = bw - ew + 'px';
  34.       if (nmy > bh - (eh - cy)) el.style.top = bh - eh + 'px';
  35.     };
  36.     document.onmouseup = function() {
  37.       // 清除mousemove事件
  38.       document.onmousemove = null;
  39.     };
  40.   };
  41. });

使用

  1.  <div class="box" v-drag></div>