下边代码的目的是用自定义指令实现组件中input输入框的自动聚焦
在main.js中定义全局自定义指令
//全局创建自定义指令
Vue.directive('fofo',{
inserted(el){
// 因为使用的是vant2的Search组件,它里边有很多元素,所以要找到input标签
let theInput = el.querySelector('input')
theInput.focus()
}
})
在页面中使用指令
<van-search placeholder="请输入搜索关键词" background="#007BFF" shape="round" v-fofo/>
在main.js中封装中间件函数插件
实现的效果也是输入框自动聚焦
const directiveObj={
install(Vue){
Vue.directive('fofo',{
inserted(el){
let theInput = el.querySelector('input')
theInput.focus()
}
})
}
}
Vue.use(directiveObj)