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

置顶

你眼中的柔情

已于 2023-02-22 10:30:10 修改

阅读量2k

点赞数 2

分类专栏： vue 文章标签： vue常见功能 vue小功能

于 2019-01-24 16:48:12 首次发布

本文链接：https://blog.csdn.net/return_js/article/details/86629591

版权

这篇博客总结了Vue.js中的多个实用功能，包括复制功能的实现、时间戳转换、URL参数获取、60秒倒计时、苹果滚动优化、数组操作如求和与排序，还有过滤器和表格ID自增等，为Vue开发者提供了便利的代码示例。

摘要由CSDN通过智能技术生成

复制功能

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

npm install clipboard --save
import * as Clipboard from “clipboard”;
const clipboard = new Clipboard(“.copyBtn”);
在你的标签上data-clipboard-text 这个属性是来复制内容的可以通过绑定变量的形式来复制。

eg:

     <span @click="copy()" class="copyBtn" :data-clipboard-text="xxx">复制</span>

时间戳转换

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);