在使用vue写了几个项目之后,发现为了某一个功能而引入一个组件不值得,于是便学习了一下,写自定义标签也便于自己去理解大团队们的组件运行机制。
man.js中定义
Vue.directive('checkParam',{
//从官方文档中可知inserted为钩子函数
// inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
inserted:function(el,binding){
// el:指令所绑定的元素,可以用来直接操作 DOM 。
el.addEventListener('keyup',function(event){
//input 发生改变时触发事件,改变class的绑定值来改变用户的体验
el.className = el.className.replace('input-error','').trim();
//只有点击提交按钮时,才进行如下操作的限制条件
if (!event.keyCode) {
let isRequired = binding.value.required
if(isRequired){
if(!el.value||el.value===''){
el.className += ' input-error'
}
}
//binding:一个对象;
//binding.value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2。
let regex = binding.value.regex
if(regex === 'IpRegex'){
if(!el.value.match(IP_REGEX)){
el.className += ' input-error'
}
}else if(!el.value.match(regex)){
el.className += ' input-error'
}
}
})
}
})
Vue.directive('checkSubmit',{
inserted:function(el,bingding,vNode){
el.addEventListener('click',function(){
let elements = document.getElementsByClassName('v-check')
//合成 Event 新对象
var evObj = document.createEvent('Event')
//初始化新事件对象的属性
evObj.initEvent('keyup', true, true)
for (let element of elements) {
//Element 对象的 dispatchEvent() 方法进行分派
element.dispatchEvent(evObj)
}
let errorInputs = document.getElementsByClassName('input-error');
if(errorInputs.length === 0){
vNode.context.submit();
}
})
}
})
HTML代码
<div>
<div>
<label class="star">Name:</label>
<input class='v-check' v-checkParam="{required:true,regex:'^[\u4e00-\u9fa5]*$'}" type="text">
</div>
<div>
<label class="star">IP:</label>
<input class='v-check' v-checkParam="{required:true,regex:'IpRegex'}" type="text">
</div>
<div>
<button v-checkSubmit>提交</button>
</div>
</div>
<script>
export default {
methods: {
submit () {
alert('通过校验')
}
}
}
</script>