vue3.0学习笔记3---开发一个下拉菜单组件

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
   }
 })