指令文件夹构成
-- input.vue //业务文件
-- directive
--index.js // 指令注册index
--limitInput.js // 指令文件
-- main.js
------------
limitInput.js --文件
export const limitInput= {
inserted: function(el) {
log(el.children[0].value)
}
};
第一种,
局部使用-单页面注册使用
input.vue--文件
```javascript
<template>
<div>
<input id="a" v-limitInput type="text" />
</div>
</template>
<script>
import { limitInput} from "./directive/limitInput";
export default {
directives: { limitInput },
};
</script>
第二种
全局指令
全局指令只需要把指令文件自己注册然后再main引入即可
第一步
limitInput.js --文件处理
文件构成为:
const limitInput ={};
limitInput.install=Vue=>{
Vue.dretive('limitInput ',{
update(el,binding,vnode){},
inserted(el,binding,vnode){}
})
}
export default limitInput
第二步
main.js引入
import limitInputfrom './directive/limitInput'
Vue.use(limitInput)
第三步
页面直接使用
<input id="a" v-limitInput type="text" />
第三种
批量全局注册
第一步,index引入
--index.js
import limitInput from "./directive/limitInput";
const directives ={limitInput } ;
export default {
install(Vue){
Object.keys(directives ).forEach(key)=>{
Vue.directive(key,directives [key])
}
}
}
第二步,main.js注入
import Directive from './directive/index'
Vue.use(Directive)
第三步,页面直接使用
<input id="a" v-limitInput type="text" />
注意: 如果是批量全局注册,指令文件limitInput.js
定义方式为:
const limitInput ={
update(el,binding,vnode){},
inserted(el,binding,vnode){}
}
export default limitInput