線上直播原始碼，開發一個下拉選單元件

線上直播原始碼，開發一個下拉選單元件

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;
    background-color: transparent;
  }
</style>

以上就是線上直播原始碼，開發一個下拉選單元件， 更多內容歡迎關注之後的文章