在线直播源码，开发一个下拉菜单组件

在线直播源码，开发一个下拉菜单组件

1. 创建dropdown组件

 

1

<template><br>  <div><br>    <a class="btn btn-outline-light dropdown-toggle my-2" @click.prevent="toggleOpen">{{ title }}</a><br>    <ul v-if="isOpen" :style="{display: 'block'}"><br>      <slot></slot><br>    </ul><br>  </div><br></template><br><script><br>import {defineComponent, ref} from 'vue'<br>export default defineComponent({<br>  name: "Dropdown",<br>  props: {<br>    title: String<br>  },<br>  setup() {<br>    const isOpen = ref(false)<br>    const toggleOpen = () => {<br>      isOpen.value = !isOpen.value<br>    }<br>    return {<br>      isOpen,<br>      toggleOpen<br>    }<br>  }<br>})<br></script><br>

​

要点: slot插槽用于填充组件。vue3与vue2的不同点在于，变量使用了ref来表示，改变变量需要改变变量的value值。变量，事件等等统一写在setup里面，并且返回出来。

 

2. dropdown-item组件

 

1

<template><br>  <li :class="{'is-disabled': disabled}"><br>    <slot></slot><br>  </li><br></template><br><script><br>import {defineComponent} from 'vue'<br>export default defineComponent({<br>  name: "DropdownItem",<br>  props: {<br>    disabled: {<br>      type: Boolean,<br>      default: false<br>    }<br>  }<br>})<br></script><br><style scoped><br>  .is-disabled {<br>    color: gray;<br>    pointer-events: none;<br>    <br>  }<br></style>

 

以上就是在线直播源码，开发一个下拉菜单组件， 更多内容欢迎关注之后的文章