自己写个vue.js插件(2):手动挂载子组件

前面我们使用原始的方法写了一个验证插件

1、学会了插件的创建的方式

2、学会了自定义指令

3、通过自定义指令返回true或false，来控制外部label的显示和隐藏

（注意：外部的label是我们预先写好的）

下面我们使用自动插入label

手动挂载插件:https://vuefe.cn/api/#Vue-extend

动手写代码

1、先移除

user-name.vue

里显示错误的label，因为我们要手动插入

<label class="label label-danger">用户不合法</label>

2、先看一下我们插件

validate.js

的全部代码，然后我们再分析

export default{
install(Vue){

Vue.prototype.checkUserName = (value) => {
if(value == ""){
return true; // 如果没有填写,默认为true
}

if(/\w{6,20}/.test(value)){
return true;
}else{
return false;
}
}

Vue.prototype.errorLabel = null;
Vue.prototype.hasError = false;

Vue.directive("uname",{
bind(){
let errorTpl = Vue.extend({
template:'<label class="label label-danger">用户不合法</label>'
});
// 实例化并挂载
Vue.errorLabel = (new errorTpl()).$mount().$el;
},
update(el,binding,vnode){
if(/\w{6,20}/.test(el.value)){
// 验证通过
if (Vue.hasError){
el.parentNode.removeChild(Vue.errorLabel);
Vue.hasError = !Vue.hasError;
}
}else{
// 验证没有通过
if (!Vue.hasError){
el.parentNode.appendChild(Vue.errorLabel);
Vue.hasError = ! Vue.hasError;
}

}
},
})
}
}

3、定义了2个prototype

Vue.prototype.errorLabel = null;
Vue.prototype.hasError = false;

errorLabel

错误提示模板，我们在要

bind()

方法中创建，然后挂载到它上面；

hasError

是辅助属性，方便我们用来判断当前是有错误还是没有错误。

4、在

update()

方法中，实时监听用户的输入，然后移除/添加 错误模板

update(el,binding,vnode){
if(/\w{6,20}/.test(el.value)){
// 验证通过
if (Vue.hasError){
el.parentNode.removeChild(Vue.errorLabel);
Vue.hasError = !Vue.hasError;
}
}else{
// 验证没有通过
if (!Vue.hasError){
el.parentNode.appendChild(Vue.errorLabel);
Vue.hasError = ! Vue.hasError;
}
}
},

5、演示效果如下图