vue注册局部指令 、全局指令、批量全局注册指令

指令文件夹构成

-- 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 


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值