目标:我们想实现,网页一加载input框自动聚焦
在utils文件下创建 directive.js封装中间件
固定格式:
import Vue from 'vue'
// 封装中间价函数插件
const directiveObj = {
install (vue) {
//实现体
}
}
export default directiveObj
import Vue from 'vue'
// 封装中间价函数插件
const directiveObj = {
// 只有第一次出现是插入到真实DOM, 触发inserted方法
// 以后初选是css层面的显示出现(eg:css的display:none), 不会触发inserted方法
// 插件对象(必须有install方法, 才可以注入到Vue.use中)
install (vue) {
// 自定义全局指令---对input可以自动聚焦
Vue.directive('fofo', {
// el参数为被绑定fofo指令的dom节点
inserted (el) {
fn(el)
},
update (el) {
fn(el)
}
})
}
// 给自定义指令添加update方法, 指定所在DOM更新时执行
}
function fn (el) {
if (el.nodeName === 'INPUT' || el.nodeName === 'TEXTAREA') {
// 如果直接是input标签/textarea标签
el.focus()
} else {
// 指令在van-search组件身上, 获取的是组件根标签div, 而input在标签内
const inp = el.querySelector('input')
const textArea = el.querySelector('textarea')
// 如果找到了
if (inp || textArea) {
inp && inp.focus()
textArea && textArea.focus()
} else {
// 本身也不是, 子标签里也没有
console.error('请把v-fofo用在输入框标签上')
}
}
}
export default directiveObj
使用:
<van-field
v-fofo
v-model.trim="message"
rows="2"
autosize
type="textarea"
maxlength="10"
placeholder="请输入昵称"
show-word-limit
/>