情况1:对象+install方法
const directiveObj = {
install(Vue){
//vue函数相当于import Vue from 'vue'
console.log(Vue)
// 全局指令的方法
Vue.direvtive('fofo',{
inserter(el){
//el是原生的div标签
//往里获取到input
el.quertSelector('input'.focus())
}
})
}
}
export defaule directiveObj
情况2:导出的函数(不是对象+install方法)(推荐)
// 自动获取焦点
export default function (Vue) {
Vue.directive('fofo', {
// 指令所在标签, 插入到真实DOM时, 才触发
inserted (el) {
// van-search组件封装一套div里包含input
// el是原生的div标签
// 往里获取到input
// JS触发标签事件, 直接.事件名()\
if (el.nodeName === 'TEXTAREA' || el.nodeName === 'INPUT') {
el.focus()
} else {
// el不是输入框, 尝试往里查找
const inp = el.querySelector('input')
const textA = el.querySelector('textarea')
if (inp) {
inp.focus()
}
if (textA) {
textA.focus()
}
}
},
// 指令所在标签, 发生更新时触发, (例如: display:none隐藏->出现)
update (el) {
if (el.nodeName === 'TEXTAREA' || el.nodeName === 'INPUT') {
el.focus()
} else {
// el不是输入框, 尝试往里查找
const inp = el.querySelector('input')
const textA = el.querySelector('textarea')
if (inp) {
inp.focus()
}
if (textA) {
textA.focus()
}
}
}
})
}
情况3:main.js全局注册
Vue.directive('fofo', {
inserted (el) {
el.querySelector('input').focus()
}
})