我目前正在try 使用onClickOutside,但它只有在我用鼠标左键单击外部时才起作用. 我也需要让它在鼠标右键上工作.

对此有什么解决方案吗?也许我错过了这个功能的一些选项.

推荐答案

VueUse在这里不起作用,因为不会引发Click事件.相反,将在此处引发ConextMenu事件.

试着这样做:

import type { Ref } from 'vue'

export const useClickOutside = (target: Ref<HTMLElement>, handler: () => void) => {
  const { isOutside } = useMouseInElement(target)

  const onClick = () => {
    if (isOutside.value) {
      handler()
    }
  }

  onMounted(() => {
    document.addEventListener('click', onClick)
    document.addEventListener('contextmenu', onClick)
  })

  onUnmounted(() => {
    document.removeEventListener('click', onClick)
    document.removeEventListener('contextmenu', onClick)
  })
}

Vue.js相关问答推荐

我可以将Created()中内置的内容传递给Provide属性吗?

Vue ChildComponent (GrandchildComponent) 应该更新 ParentComponent 的列表

Vue.js 3 运行时挂载组件实例

Vue Js Composition Api 未定义(读取名称)

Nuxt3-Vue中的useRoute和useRouter有什么区别

禁用 vue-cli webpack 编码图像 base64

云Firestore保存额外的用户数据

如果 Vuetify 自动完成没有匹配的结果,则保留输入的文本

在 vue 3 中使用 vue-chartjs:createElement 不是函数

为什么 vue 中的 @mouseover 操作不起作用

在 vue.js 中获取当前时间和日期

Vue.js + Vuex:如何改变嵌套项状态?

VueJS + Typescript:类型上不存在属性

vue-test-utils:无法覆盖属性 $route,这通常是由于插件将该属性添加为只读值

Vue router路由,Root Vue 没有数据?

'vue' 未被识别为内部或外部命令

如何设置 :id 前缀字符串?

Vue过滤器应该如何使用typescript绑定?

Vuetify v-data-table 固定标题不起作用

vue-cli@3 没有可用于依赖类型的模块工厂:CssDependency