项目场景:
提示:这里简述项目相关背景:
TypeError: Cannot read properties of undefined (reading ‘deep’) at withDirectives
问题描述
提示:这里描述项目中遇到的问题:
在vue项目中,设置了自定义指令,但是不生效
main.ts
import { createApp } from 'vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './utils/router.js'
import Light from './utils/index'
import VueClipboard from "vue-clipboard2";
import debounceClickDirective from './directive/debounce-click'
import ClearTableIndexDirective from './directive/clear-index'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
debounceClickDirective(app)
ClearTableIndexDirective(app)
app.use(router) // 路由
app.use(Light) // light的入口
app.use(VueClipboard);
app.mount('#app')
clear-index.js
/**
* @desc 解决tooltip,在弹窗之后再次出现的问题
* @reason tableIndex 导致
*/
export default function ClearTableIndexDirective(app) {
app.directive('clear-index', {
beforeMount(el, binding) { //el为绑定的元素,binding为绑定给指令的对象
console.log("el, binding", el, binding);
el.__vueSetTimeoutIndex__ = setTimeout(() => {
// 清除当前tabIndex
el.removeAttribute('tabindex')
clearTimeout(el.__vueSetTimeoutIndex__)
}, 0)
},
unmounted(el) {
clearTimeout(el.__vueSetTimeoutIndex__)
}
})
}
**
原因分析:
提示:这里填写问题的分析:
这个clear-index
的指令,已经在main.ts申明了。为什么还要报错:
TypeError: Cannot read properties of undefined (reading 'deep') at withDirectives
可能是自动定指令写错了
解决方案:
提示:这里填写该问题的具体解决方案:
检查自定义指令在使用的时候,有没有写错。