在线直播源码，开发一个下拉菜单组件
1. 创建dropdown组件
<template>
<div>
<a class="btn btn-outline-light dropdown-toggle my-2" @click.prevent="toggleOpen">{{ title }}</a>
<ul v-if="isOpen" :style="{display: 'block'}">
<slot></slot>
</ul>
</div>
</template>
<script>
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="{'is-disabled': disabled}">
<slot></slot>
</li>
</template>
<script>
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;
}
</style>
以上就是在线直播源码，开发一个下拉菜单组件， 更多内容欢迎关注之后的文章