JS常用自定义函数(vue)和方法

1、获取时间转化2018-12-13 12:29:20

//可以全局定义一个timestamp函数，直接filters过滤函数使用
      timestamp (time) {
        // let time = new Date()
        let years = time.getFullYear()
        let month = this.addZero(time.getMonth() + 1)
        let days = this.addZero(time.getDate())
        let hours = this.addZero(time.getHours())
        let minute = this.addZero(time.getMinutes())
        let seconds = this.addZero(time.getSeconds())
        let timeShow = years + '-' + month + '-' + days + ' ' + hours + ':' + seconds + ':' + minute
        console.log(time)
        return timeShow
      },
//不够10补0
      addZero (val) {
        return val < 10 ? '0' + val : val
      },

2、验证码倒计时

data () {
    return {
        count: '发送验证码'
    }
},
methods: {
    //点击发送验证码触发
    sendCode () {
        const TIME_COUNT = 60;
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000)
        }
    }
}

3、手机端rem使用（响应手机端，1rem = 50px)

var deviceWidth = document.documentElement.clientWidth
if (deviceWidth > 750) deviceWidth = 750
document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px'
deviceWidth = null

.footer{
    font-size:0.24rem; /*50px*/
}

4、数组取最大值、最小值

var arr = [1,2,0,-5,9,10,290];
var max = Math.max.apply(null, arr);
var min = Math.min.apply(null, arr);
console.log(max, min)

5、文字高亮

   methods: {
    test () {
       // 关键词
      let keyWordArray = ['hello', '文字', '我不是']
       // 文字
      let article = '我是文字部分，你好，hello，我是更多的文字，看我是不是高亮，hello'
      keyWordArray.map((item, index) => {
        console.log(item)
       // 匹配所有关键词RegExp
        article = article.replace(RegExp(item, "g"), "<span class='red-color'>" + item + "</span>")
      })
      return article
    }
  },

<template>
    <div v-html="test()">
    </div>
</template>

6、手机ios android判断

      let u = navigator.userAgent
      let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 // android终端
      let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
     
      console.log('isAndroid', isAndroid) // ture or false
      console.log('isiOS', isiOS)         // ture or false

7、vue input 只输入数字

<el-input class="input" @keyup.native="number" maxlength="10" v-model="formInline.number" placeholder="请输入"></el-input>

methods: {
        number(){
          this.formInline.number = this.formInline.number.replace(/[^\.\d]/g,'')
          this.formInline.number = this.formInline.number.replace('.', '')
        }
}

8、邮箱验证

export const isEmail = (e) => {
 return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(e)
}

9、防抖

function debounce(fn, wait) {
  let timeout = null
  return function() {
    if(timeout !== null) clearTimeout(timeout)     
    timeout = setTimeout(fn, wait);
  }
}

10、节流

function throttle(fn, delay) { 
  var prev = Date.now()         
  return function() {               
    var now = Date.now()               
    if (now - prev > delay) {                   
      fn()                
      prev = Date.now()             
    }         
  }       
}