实用的自定义指令

[heikaimu]

创建自定义指令

在src下新建directives.js

directives.js

// 倒计时
const countdown = (e, binding) => {
  let sec = binding.value || 60;
  let timer;
  e.addEventListener('click', () => {
    e.setAttribute('disabled', true);
    e.innerHTML = `${sec}秒再发送`;
    timer = setInterval(() => {
      sec -= 1;
      e.innerHTML = `${sec}秒再发送`;
      if (sec <= 0) {
        clearInterval(timer);
        e.innerHTML = '获取验证码';
        e.removeAttribute('disabled');
        sec = binding.value || 60;
      }
    }, 1000)
  })
}


// 配置指令
let directives = {}
directives.install = function (Vue) {
  Vue.directive('countdown', countdown);
}

export default directives;

引入

main.js

import Directives from './directives';
Vue.use(Directives);

使用

test.vue

<button class="verify-btn" @click="getCode" v-countdown>获取验证码</button>
<style>
.verify-btn{
    width: 116px;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    outline: 0;
    padding: 0 15px;
    &:disabled{
      color: #c0c4cc;
      cursor: not-allowed;
      background-image: none;
      background-color: #fff;
      border-color: #ebeef5;
    }
  }
</style>