1. 创建dropdown组件
<template>
<div class="dropdown">
<a class="btn btn-outline-light dropdown-toggle my-2" @click.prevent="toggleOpen">{{ title }}</a>
<ul class="dropdown-menu" v-if="isOpen" :style="{display: 'block'}">
<slot></slot>
</ul>
</div>
</template>
<script lang="ts">
import {defineComponent, ref} from 'vue'
export default defineComponent({
name: "Dropdown",
props: {
title: String
},
setup() {
const isOpen = ref(false)
const toggleOpen = () => {
isOpen.value = !isOpen.value
}
return {
isOpen,
toggleOpen
}
}
})
</script>
要点: slot插槽用于填充组件。vue3与vue2的不同点在于,变量使用了ref来表示,改变变量需要改变变量的value值。变量,事件等等统一写在setup里面,并且返回出来。
2. dropdown-item组件
<template>
<li class="dropdown-option" :class="{'is-disabled': disabled}">
<slot></slot>
</li>
</template>
<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({
name: "DropdownItem",
props: {
disabled: {
type: Boolean,
default: false
}
}
})
</script>
<style scoped>
.is-disabled {
color: gray;
pointer-events: none;
background-color: transparent;
}
</style>
定义下拉菜单的组件,通过slot让外部传递组件进来。
3.调用
<dropdown :title="`您好 ${user.name}`">
<dropdown-item class="dropdown-item">新建文章</dropdown-item>
<dropdown-item class="dropdown-item">编辑资料</dropdown-item>
<dropdown-item disabled class="dropdown-item">退出登录</dropdown-item>
</dropdown>
语义化调用
4. 扩展(点击外部让下拉菜单关闭)
在hook文件夹新建一个UserClickOutside.ts文件,用于判断用户是否点击了元素外部
import {ref, onMounted, onUnmounted, Ref} from 'vue'
const userClickOutside = (elementRef: Ref<null | HTMLElement>) => {
const isClickOutside = ref(false)
const handler = (e: MouseEvent) => {
if (elementRef.value) {
isClickOutside.value = !elementRef.value.contains(e.target as HTMLElement);
}
}
onMounted(() => {
document.addEventListener('click', handler)
})
onUnmounted(() => {
document.removeEventListener('click', handler)
})
return isClickOutside;
}
export default userClickOutside
在dropdown内,将dropdown设置一个ref=“dropdownRef”,因为vue3在setup中无法取得this对象,不能使用this.$refs来取dom元素,需要定义一个const dropdownRef = ref<null | HTMLElement>(null)来接收这个dom元素,注意名字要和上面ref定义的一样,并将他返回出去。通过watch属性来监听isClickOutside的值,用于关闭dropdown。
const dropdownRef = ref<null | HTMLElement>(null)
const isClickOutside = userClickOutside(dropdownRef)
watch(isClickOutside, () => {
if (isOpen.value && isClickOutside.value) {
isOpen.value = false
}
})