关于 item 点击关闭 dropdown

来源：4-11 useClickOutside 第一个自定义函数

XYXLI

2020-10-09

目前我是使用 mitt 的方式让 dropdown 监听每个 item 的点击然后关闭 dropdown。

除了使用 mitt 的方式外，是不是没有简便的方式让外层容器监听插槽的组件事件了呢？

写回答

2回答

张轩

2020-10-09

已采纳

同学你好目前来说是这样的其实原来 vue2 的做法也是监听器的原理到 vue3 的时候只不过需要自己抽象去实现这个功能我本人实现这个功能也是用了 mitt，代码在 develop 分支。

刘小易

2020-10-29

// GlobalHeader.vue
<Dropdown :title="`你好，${user.name}`" ref="dropdownRef">
   <DropdownItem @click="clickItem">新建文章</DropdownItem>
   <DropdownItem @click="clickItem">编辑资料</DropdownItem>
</Dropdown>

const dropdownRef = ref(null);
const clickItem = (e: MouseEvent) => {
  e.preventDefault();
  // ...
  if (dropdownRef.value) {
    (dropdownRef.value as unknown as MethodOptions).closeSelf();
  }
};

// Dropdown.vue
const closeSelf = () => {
  isOpen.value = false;
};

我是这样实现的，点击事件放在了组件上，然后调用Dropdown组件的方法

Vue3 + TS 仿知乎专栏企业级项目

带你完成前后端分离复杂项目，率先掌握 vue3 造轮子技能

3067 学习 · 2247 问题

查看课程

相似问题

关于 dropdownItem 点击跳转后自动收起 dropdown

回答 1

老师，对<dropdown-item>的使用有点小疑问

回答 3

对于Dropdown组件的几个问题，谢谢

回答 1

关于bootstrap的使用问题

回答 1

关于点击登录出现阿里云错误

回答 2

打开慕课网App查看更多内容