vue項目常用API

//文件：utils/util.js

const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()

  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}
function checkMobile (mobile){
    return RegExp(/^1[3456789]\d{9}$/).test(mobile); //驗證手機號
}
function passWord(pws){
    // return RegExp(/^[A-Za-z0-9]{6}$/).test(pws); //驗證密碼
    return RegExp(/^(?![0-9]+$)(?![a-zA-Z]+$)[A-Za-z0-9]{6,22}$/).test(pws); //驗證密碼
}


/**
     * 獲得狀態欄高度
     */
var    getStatusBarHeight= ()=> {
        var immersed = 0;
        var ms=(/Html5Plus\/.+\s\(.*(Immersed\/(\d+\.?\d*).*)\)/gi).exec(navigator.userAgent);
        if(ms&&ms.length>=3){ // 當前環境為沉浸式狀態欄模式
            immersed=parseFloat(ms[2]);// 獲取狀態欄的高度
        }
        return immersed;
    }


/* 驗證碼倒計時
that  this
time  倒計時時間
disable 是否禁止點擊
*/
var codeDown=(that,time,disable)=>{
    if(that[time]<=1){
        that[time]=60;
        that[disable]=false;
        return false;
    }
    that[disable]=true
    that[time]=that[time]-1
    setTimeout(()=>{codeDown(that,time,disable)},1000)
}

// 各種校驗
let verify={
    // 手機號驗證
    mobile(mobile){
        let myreg=/^[1][3,4,5,6,7,8][0-9]{9}$/;
        return (mobile==""?'手機號不能為空':'')||(!myreg.test(mobile)?'手機號輸入有誤,請重新輸入':'')||true
    },
    // 驗證碼驗證
    code(code){
        return code==""?'驗證碼不能為空':true
    },
    pass:"",
    // 密碼驗證
    password(pass){
        let myreg=/^[a-zA-Z0-9_-]{6,22}$/;
        verify.pass=pass
        return (pass==""?'密碼不能為空':'')||(!myreg.test(pass)?'密碼輸入有誤,請重新輸入':'')||true
    },
    // 再次輸入密碼
    password2(pass2){
        return (pass2==""?'請再次輸入密碼':'')||(pass2!=verify.pass?'兩次密碼輸入不一致,請重新輸入':'')||true
    }
}

// html裝換
let escape2Html=(str)=>{
  var arrEntities = { 'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"' };
  return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) { return arrEntities[t]; }).replace(/<img/gi, '<img style="max-width:100%;height:auto;" ');
}

export default {
  formatTime: formatTime,
    checkMobile,
    passWord,
    verify,
    codeDown,
    escape2Html,
  getStatusBarHeight,
}

 

 

//main.js

import util from './utils/util'
Vue.prototype.$util = util;//掛載vue的實例上

 

 

//需要引入的頁面
<template>
    <p class="code" @click="handleCode">{{!disable?'獲取驗證碼':codeTime+'s'}}</p>
</template>

<script>
    export default {
          data() {
            return {
              codeTime: 60,
              disable: false
            };
          },
            methods: {
              //獲取驗證碼
              handleCode() {
                  if (!this.disable) {
                      this.$util.codeDown(this, "codeTime", "disable");
                  }
              },
          },
    }
</script>


//封裝成公共文件util.js，在vue的main.js中引入，掛載在vue實例上 => Vue.prototype.$util = util; 
/* 驗證碼倒計時
that  this
time  倒計時時間
disable 是否禁止點擊
*/
var codeDown=(that,time,disable)=>{
    if(that[time]<=1){
        that[time]=60;
        that[disable]=false;
        return false;
    }
    that[disable]=true
    that[time]=that[time]-1
    setTimeout(()=>{codeDown(that,time,disable)},1000)
}
export default {
    codeDown,
}