美文网首页
vue常用指令

vue常用指令

作者: 咔簌 | 来源:发表于2019-04-26 16:37 被阅读0次
// v-enterInt: 只能输入正整数
Vue.directive('enterInt', {
  inserted(el) {
    el.addEventListener('keypress',function(e){
      e = e || window.event;
      let charcode = typeof e.charCode === 'number' ? e.charCode : e.keyCode;
      let re = /\d/;
      if(!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey){
        if(e.preventDefault){
          e.preventDefault();
        }else{
          e.returnValue = false;
        }
      }
    });
  }
});

// v-enterFloatNumber: 只能输入正数(包含小数)
Vue.directive('enterFloatNumber', {
  inserted(el) {
    el.addEventListener('keypress',function(e){
      e = e || window.event;
      let charcode = typeof e.charCode === 'number' ? e.charCode : e.keyCode;
      let re = /\d/;
      if(charcode === 46){
        if(e.target.value.includes('.')){
          e.preventDefault();
        }
      }else if(!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey){
        if(e.preventDefault){
          e.preventDefault();
        }else{
          e.returnValue = false;
        }
      }
    });
  }
});


// v-enterNumber: 只能数字,去掉e,支持负值
Vue.directive('enterNumber', {
  inserted(el) {
    el.addEventListener('keypress',function(e){
      e = e || window.event;
      let charcode = typeof e.charCode === 'number' ? e.charCode : e.keyCode;
      if(charcode === 46){
        if(e.target.value.includes('.')){
          e.preventDefault();
        }
      }else if(charcode === 101){
        e.preventDefault();
      }
    });
  }
});



// v-enterMoney: 钱相关,保留两位
Vue.directive('enterMoney', {
  inserted(el) {
    el.addEventListener('keypress',function(e){
      e = e || window.event;
      let charcode = typeof e.charCode === 'number' ? e.charCode : e.keyCode;
      let re = /\d/;
      let splitValue = e.target.value.split('.');
      if(charcode === 46){
        if(e.target.value.includes('.')){
          e.preventDefault();
        }
      }else if(!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey){
        if(e.preventDefault){
          e.preventDefault();
        }else{
          e.returnValue = false;
        }
      } else if(splitValue[1] && splitValue[1].length > 1){
        e.preventDefault();
      }
    });
  }
});


Vue.directive('preventReClick', {
  bind(el, binding) {
    const time = binding.value || 2000;
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true;
        el.style.cursor = 'no-drop';
        setTimeout(() => {
          el.disabled = false;
          el.style.cursor = 'pointer'
        }, time)
      }
    })
  }
});

相关文章

  • vue入门6---vue基本指令、自定义指令、插件

    一、vue常用指令概览 二、vue自定义指令 注册全局指令Vue.directive('my-directive'...

  • Vue.js第二天

    指令 1.什么是指令? 2.vue中常用的指令

  • Vue基础知识介绍

    本节主要介绍Vue.js开发中的常用指令介绍,后续会持续补充 1. vue中常用的v-指令 v-text // 是...

  • vue 常用指令

    一、了解 Vue.js 1 Vue.js是什么?作者:尤雨溪Vue.js是一套用于构建用户界面的渐进式框架。V...

  • Vue常用指令:

    v-for="(value,index) in arr" 循环 遍历 v-model=""双向数据...

  • vue常用指令

    v-text:绑定内容 v-html:渲染html v-show:切换显示隐藏 v-if:条件渲染 v-else:...

  • Vue常用指令

    v-bind:将这个元素节点的特性和Vue实例的属性保持一致v-if:将其绑定到DOM结构中v-for:用于绑定数...

  • vue常用指令

    常用指令列表 v-modelv-ifv-elsev-showv-forv-bind----简写: :class="...

  • vue 常用指令

    v-text {{name}} v-html {{{html}}} v-model 123showModel v-...

  • VUE常用指令

    一、指令 v-model 双向绑定,监听用户的输入事件,更新数据 v-bind 能够及时对页面的数据进行更改 必须...

网友评论

      本文标题:vue常用指令

      本文链接:https://www.haomeiwen.com/subject/uzdqnqtx.html