Vue3组件开发——dropdown显示点击展开列表项
发布时间
阅读量：
阅读量
Vue3组件开发——实现下拉菜单的点击交互功能
1. 环境配置：
vscode
TS
“bootstrap”: “^5.1.3”,
“core-js”: “^3.6.5”,
“vue”: “^3.0.0”,
“vue-class-component”: “^8.0.0-0”
此前在展示过程中，采用的是通过is-disabled进行判断的方式，这种方式仅能提供固定不变的数据。接下来将借助TS中的函数来完成点击操作的逻辑实现
2. 编写点击点击显示下拉菜单函数：
- 逻辑代码：
setup () {
const dropdownRef = ref<null |HTMLElement>(null)
const isOpen = ref(false)
const toggleOpen = () => {
isOpen.value = !isOpen.value
}
const handler = (e: MouseEvent) => {
if (dropdownRef.value) {
console.log(dropdownRef.value)
if (!dropdownRef.value.contains(e.targe全部评论 (0)
还没有任何评论哟~