Vue项目中自定义指令的用法介绍——举例,创建一个自定义指令,限制输入框只能输入金额

Vue项目中自定义指令的用法介绍——举例,创建一个自定义指令,限制输入框只能输入金额

除了核心功能默认内置的指令 (v-modelv-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令

比如:当页面加载时,让元素获取焦点、限制输入框输入等等需要对Dom进行的操作,都可以用自定义指令来实现

下面用一个限制输入框只能输入金额的指令来介绍自定义指令 的用法

例如,页面上有一个input输入框,默认情况下可以输入任何文本
<template>
  <div class="home">
    金额:<input type="text" v-model="money" placeholder="请输入金额">
  </div>
</template>

<script>

export default {
  name: 'Home',
  data(){
    return {
      money:"",
    }
  }
}
</script>

下面,我们创建一个自定义指令来限制输入框只能输入金额(数字,并且只能输入两位小数),代码如下

在 main.js下创建一个名为checkMoney的自定义指令

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false
//自定义指令限制只能输入金额
Vue.directive('checkMoney',{
  //当被绑定的元素插入到 DOM 中时
  inserted(el){
    el.addEventListener("input",function(e){
      let val = e.target.value;
      let reg = /^[0-9]+(.[0-9]{0,2})?$/;
      if(!val){
        e.target.value = "";
      }else if(!isNaN(val)){
        if(!reg.test(val)){
          e.target.value = parseFloat(val).toFixed(2);
        }
      }else{
        e.target.value = "";
      }
    })
  }
})

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

在页面上使用我们创建好的自定义指令

在input 输入框上添加 一个 v-checkMoney

<template>
  <div class="home">
    金额:<input type="text" v-checkMoney v-model="money" placeholder="请输入金额">
  </div>
</template>

<script>

export default {
  name: 'Home',
  data(){
    return {
      money:"",
    }
  }
}
</script>

效果如下图,输入框只能输入两位小数的数字了