【金秋打卡】第14天 Vue3 + Typescript 从0到1开发通用基础组件（4-9~4-10）

课程名称：Vue3 + Typescript 从0到1开发通用基础组件

课程章节：
4-9 Dropdown 第一部分
4-10 Dropdown 第二部分

课程讲师：张轩

课程内容：

今天课程学习的主要知识点内容包括：
1、使用 vue3 开发 Dropdown 组件；
2、使用 vue3 开发 DropdownItem 组件；
3、对 Dropdown + DropdownItem 组件的使用；

课程收获：

通过学习老师的视频课程和同学的公开笔记，主要收获如下：
一、使用 vue3 开发 Dropdown 组件
1、编写 Dropdown.vue 文件：

<template>
<div class="dropdown" ref="dropdownRef">
  <a href="#" class="btn btn-outline-light my-2 dropdown-toggle" @click.prevent="toggleOpen">
    {{title}}
  </a>
  <ul class="dropdown-menu" :style="{display: 'block'}" v-if="isOpen">
    <slot></slot>
  </ul>
</div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import useClickOutside from '../hooks/useClickOutside'
export default defineComponent({
  name: 'Dropdown',
  props: {
    title: {
      type: String,
      required: true
    }
  },
  setup() {
    const isOpen = ref(false)
    const dropdownRef = ref<null | HTMLElement>(null)
    const toggleOpen = () => {
      isOpen.value = !isOpen.value
    }
    const isClickOutside = useClickOutside(dropdownRef)

    watch(isClickOutside, () => {
      if (isOpen.value && isClickOutside.value) {
        isOpen.value = false
      }
    })
    return {
      isOpen,
      toggleOpen,
      dropdownRef
    }
  }
})
</script>

二、使用 vue3 开发 DropdownItem 组件
1、编写 DropdownItem.vue 文件：

<template>
  <li
    class="dropdown-option"
    :class="{'is-disabled': disabled}"
  >
    <slot></slot>
  </li>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  props: {
    disabled: {
      type: Boolean,
      default: false
    }
  }
})
</script>

<style>
.dropdown-option.is-disabled * {
  color: #6c757d;
  pointer-events: none;
  background-color: transparent;
}
</style>

三、对 Dropdown + DropdownItem 组件的使用
1、修改 GlobalHeader.vue ，主要修改内容如下：
（1）导入 Dropdown + DropdownItem 组件：

<script lang="ts">
......
import Dropdown from './Dropdown.vue'
import DropdownItem from './DropdownItem.vue'
......
export default defineComponent({
  ......
  components: {
    Dropdown,
    DropdownItem
  },
  ......
})
</script>

（2）使用 Dropdown + DropdownItem 组件：
将原来的：

      <li class="list-inline-item"><a href="#" class="btn btn-outline-light my-2">"`你好 ${user.name}`"</a></li>

替换成：

      <li class="list-inline-item">
        <dropdown :title="`你好 ${user.name}`">
          <dropdown-item><a href="#" class="dropdown-item">新建文章</a></dropdown-item>
          <dropdown-item disabled><a href="#" class="dropdown-item">编辑资料</a></dropdown-item>
          <dropdown-item><a href="#" class="dropdown-item">退出登陆</a></dropdown-item>
        </dropdown>
      </li>