全局注册指令方法: 文件路径:./utils/directive
vue.directive(‘自定义名’,
{inserted(el){ // el是原生的div标签
el.querySelector('input').focus//标签选择器
// 往里获取到input
// JS触发标签事件, 直接.事件名()
el.querySelector('input').focus()
}})
在mian.js 中引入,全局使用
import diretvieObj from './utils/directive'
Vue.use(diretvieObj)
封装全局指令
// 情况1: 对象+install方法
const directiveObj = {
install (Vue) {
// Vue函数相当于import Vue from 'vue'
console.log(Vue)
// 全局指令的方法
Vue.directive('fofo', {
// 指令所在标签, 插入到真实DOM时, 才触发
inserted (el) {
// van-search组件封装一套div里包含input
// el是原生的div标签
// 往里获取到input
// JS触发标签事件, 直接.事件名()
el.querySelector('input').focus()
}
})
}
}
export default directiveObj
// 情况2: 导出的函数(不是对象+install方法)
export default function (Vue) {
Vue.directive('fofo', {
// 指令所在标签, 插入到真实DOM时, 才触发
inserted (el) {
// van-search组件封装一套div里包含input
// el是原生的div标签
// 往里获取到input
// JS触发标签事件, 直接.事件名()
el.querySelector('input').focus()
}
})
}
------------------------------------------------------------------------------------------------------------------------
export default function (Vue) { // 自定义指令 v-fofo 在main.js中全局使用
Vue.directive('fofo', {
// 指令所在标签插入到真实dom时触发一次 (新建时触发)
inserted (el) {
if (el.nodeName === 'TEXTAREA' || el.nodeName === 'INPUT') {
el.focus()
} else if (el.querySelector('input') || el.querySelector('textarea')) {
el.querySelector('input').focus()
} else {
(
console.log('没有找到标签')
)
}
},
// 指令所在标签更新时触发指令
updated (el) {
if (el.nodeName === 'TEXTAREA' || el.nodeName === 'INPUT') {
el.focus()
} else if (el.querySelector('input') || el.querySelector('textarea')) {
el.querySelector('input').focus()
} else {
(
console.log('没有找到标签')
)
}
}
})
}