需求:点击出现输入框自动获取焦点
本质上就是一个输入框出现,一个输入框隐藏,当时就使用v-show来实现
至于文本框的焦点选中,想着在文本框中上绑定一个ref,接着在开始的文本框中绑定一个点击事件,点击会调用一个函数,在函数中使用nextTick来实现,功能完美实现
问题:尝试使用自定义指令来实现,发现没有办法出现效果
自定义指令的代码:
// 使用自定义指令实现搜索标签的选中
const directiveObj = {
install (Vue) {
Vue.directive('fofo', {
inserted (el) {
if (el.nodeName === 'TEXTAREA' || el.nodeName === 'INPUT') {
el.focus()
} else {
setTimeout(() => {
const theInput = el.querySelector('input')
const theTextArea = el.querySelector('textarea')
if (theInput) theInput.focus()
if (theTextArea) theTextArea.focus()
})
}
}
})
}
}
但是一直没有办法实现效果