Vue3中出现“failed to resolve directive: click-outside”错误通常是因为未定义或未正确注册该指令。 在Vue3中,自定义指令需要通过app.directive方法注册,然后才能在模板中使用。如果尝试使用一个未注册或未正确注册的指令,Vue会抛出“failed to resolve directive”的错误。 解决步骤 确认指令是否已注册: 检查你的...
上面得出的结论,我们可以在VueUse中同时得到验证;如果我们使用VueUse的onClickOutside,我们会发现它只有在鼠标左键时才会触发;而element-plus则是三键同时可以触发。 打开VueUse源码中我们就会发现他注册的就是click事件: const cleanup = [ useEventListener(window, 'click', listener, { passive: true, capture }...
方案一 使用vueuse提供的onClickOutside函数 如下代码: <template>你好啊</template>import{onClickOutside}from'@vueuse/core'import{ref}from"vue";consttarget=ref(null)onClickOutside(target,(event)=>{console.log('点击外部区域',event)}) 官方文档地址: https://vueuse.org/core/onClickOutside/v...
$ yarn add click-outside-vue3 Use import{createApp}from"vue"importAppfrom"./App.vue"importvClickOutsidefrom"click-outside-vue3"constapp=createApp(App)app.use(vClickOutside) export default{data(){vcoConfig:{handler:this.handler,middleware:this.middleware,events:['dblclick','click'],// Not...
$ yarn add click-outside-vue3 Use import{ createApp }from"vue"importAppfrom"./App.vue"importvClickOutsidefrom"click-outside-vue3"constapp = createApp(App) app.use(vClickOutside) exportdefault{ data () {vcoConfig: {handler:this.handler,middleware:this.middleware,events: ['dblclick',...
vue3.0中使用ClickOutside 1、从elemtn-plus中导入ClickOutside指令 import { ClickOutside as vClickOutside } from 'element-plus' 2、从元素上绑定对应的指令 v-click-outside= "onClickOutside" 3、onClickOutside绑定对应的方法 vue2.0 1、导入指令 ...
vue3 自定义指令 v-click-outside exportdefaultfunctionregisterDirectives(app: App) { app.directive('click-outside', {mounted(el:any, bindings:any) { el.handler=function(e:any) {if(!el.contains(e.target)) { bindings.value(e) } }document.addEventListener('click', el.handler,true)...
npm install vueuse/core ``` 或 ```bash yarn add vueuse/core ``` 4.2 在组件中使用v-click-outside指令 安装完成后,在Vue3组件中即可直接使用v-click-outside指令。示例代码如下: ```html <template> 点击我以外的地方 </template> import { useClickOutside } from "vueuse/core"; export defaul...
本文介绍了五种ClickOutside(点击自身以外的位置)的解决方案,以供大家使用。笔者都是使用方案一居多效果图Vue3中方案一 使用vueuse提供的onClickOutside函...
import{createApp}from"vue"importAppfrom"./App.vue"importvClickOutsidefrom"click-outside-vue3"constapp=createApp(App)app.use(vClickOutside) export default{data(){vcoConfig:{handler:this.handler,middleware:this.middleware,events:['dblclick','click'],// Note: The default value is true, but...