vue常用小功能（持续更新）

复制功能

这里我是通过clipboard.js来实现vue的复制功能，附上官网链接：clipboard.js。

1. npm install clipboard --save

2. import * as Clipboard from “clipboard”;

3. const clipboard = new Clipboard(".copyBtn");

4. 在你的标签上data-clipboard-text 这个属性是来复制内容的可以通过绑定变量的形式来复制。

eg:

     复制

---

时间戳转换

getdate(time) {
  var now = new Date(time),
    y = now.getFullYear(),
    m = now.getMonth() + 1,
    d = now.getDate();
  return (
    y +
    "-" +
    (m < 10 ? "0" + m : m) +
    "-" +
    (d < 10 ? "0" + d : d) +
    " " +
    now.toTimeString().substr(0, 8)
  );
}

---

 // 时间戳转换成带毫秒的时间
let formTimehmsFilter = (value) => {
  if(!value){
    return ''
  }else{
    let date = new Date(value);
    let y = date.getFullYear();
    let MM = date.getMonth() + 1;
    MM = MM < 10 ? ('0' + MM) : MM;
    let d = date.getDate();
    d = d < 10 ? ('0' + d) : d;
    let h = date.getHours();
    h = h < 10 ? ('0' + h) : h;
    let m = date.getMinutes();
    m = m < 10 ? ('0' + m) : m;
    let s = date.getSeconds();
    s = s < 10 ? ('0' + s) : s;
    return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;  
  }
}

2019-05-09 00:00:00转时间戳

getDateTime(dateStr){
     dateStr = dateStr.substring(0,19);
     dateStr = dateStr.replace(/-/g,'/');
     return   new Date(dateStr).getTime();
}

---

获取url参数

 GetQueryString(name) {
     var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
     var r = window.location.search.substr(1).match(reg);
     if (r != null) return unescape(r[2]);
     return null;
   }

---

注册发送验证码60秒倒计时

this.sendAuthCode = false;
  this.auth_time = 30;
  var auth_timetimer = setInterval(() => {
    this.auth_time--;
    if (this.auth_time <= 0) {
      this.sendAuthCode = true;
      clearInterval(auth_timetimer);
    }
  }, 1000);

---

苹果滚动流畅

  overflow-y: scroll;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;

---

数组求和

  sum(arr) {
      var len = arr.length;
      if (len == 0) {
        return 0;
      } else if (len == 1) {
        return Number(arr[0]);
      } else {
        return Number(arr[0]) + this.sum(arr.slice(1));
      }
    }

---

动画

     

.weibo-enter-active {
  animation: Animation0.5s;
}
.weibo-leave-active {
  animation: Animation 0.5s reverse;
}
@keyframes Animation{
  0% {
    left: -76px;
    opacity: (0);
  }
  20% {
    left: -68px;
    opacity: (0.2);
  }
  40% {
    left: -60px;
    opacity: (0.4);
  }
  60% {
    left: -52px;
    opacity: (0.6);
  }
  80% {
    left: -44px;
    opacity: (0.8);
  }
  100% {
    left: -36px;
    opacity: (1);
  }
}

---

过渡

仿照element 表单验证提示。

  
      
{{verificationTextShowIdCodeText}}
   
  .verificationText-style-enter-active {
    transition: all .2s ease;
  }
  .verificationText-style-leave-active {
    transition: all .2s ease;
  }
  .verificationText-style-enter, .verificationText-style-leave-to {
    transform: translateY(-15px);
  }

数组对象某值去重

  unique(arr1) {
        const res = new Map();
        return arr1.filter((a) => !res.has(a.age) && res.set(a.age, 1))
      }

---

全局过滤器

新建一个公共js 放方法，然后在main,js里面引入

import * as custom from '@/components/filters.js'
Object.keys(custom).forEach(key => {
  Vue.filter(key, custom[key])
})

Object.keys 这个方法是JS返回对象名的方法，并且是以数组形式返回的。使用方法正常使用就行 eg：{{ message | capitalize }}

---

对金额千叶符过滤

带千叶符，保留2位小数

	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) { // 注意===在这里的使用，如果传入的money为0,if中会将其判定为boolean类型，故而要另外做===判断
		return '0.00';
	} else {
		return '';
	}
	-----------------------------------------------------------------------------
	第二种办法：
	moneyFormate: function(val) { //作用：将123456789.32 => 123,456,789.32
		val = val.toString().replace(/\$|\,/g, '');
		if(isNaN(val)) {
			val = '0'
		}
		let sign = (val == (val = Math.abs(val)));
		val = Math.floor(val * 100 + 0.50000000001);
		let cents = val % 100;
		val = Math.floor(val / 100).toString();
		if(cents < 10) {
			cents = '0' + cents
		}
		for(let i = 0; i < Math.floor((val.length - (1 + i)) / 3); i++) {
			val = val.substring(0, val.length - (4 * i + 3)) + ',' + val.substring(val.length - (4 * i + 3));
		}
		return((sign ? '' : '-') + val + '.' + cents);
	},

只转换千叶符，不考虑小数

	if (number.length <= 3)
		return (number == '' ? '0' : number);
	else {
		var mod = number.length % 3;
		var output = (mod == 0 ? '' : (number.substring(0, mod)));
		for (let i = 0; i < Math.floor(number.length / 3); i++) {
			if ((mod == 0) && (i == 0))
				output += number.substring(mod + 3 * i, mod + 3 * i + 3);
			else
				output += ',' + number.substring(mod + 3 * i, mod + 3 * i + 3);
		}
		return (output);
	}

---

打开新标签页

首先创建一个a标签

然后写入跳转方法,注意 http 协议

  let target = this.$refs.target
  target.setAttribute('href','http://' + res.data.fileAddress)
  target.click()

---

银行卡号*号过滤

// 123457 转成  1234 **** **** 1234
let reg = /^(\d{4})\d+(\d{4})$/;
return val.replace(reg,"$1 **** **** $2");

去掉input默认背景色

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus {
      /*背景颜色*/
      box-shadow:0 0 0 60px #fff inset;
      /*字的颜色*/
      -webkit-text-fill-color: #333;
    }