3、Dropdown

一、components/Dropdown.vue

<template>
  <div class="dropdown">
    <button
      class="btn btn-secondary dropdown-toggle"
      type="button"
      @click="toggle"
    >
      {{name}}
    </button>
    <div class="dropdown-menu" style="display:block"  v-if="isShow">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "Dropdown",
  props:{
      name:{
          type:String
      }
  },
  setup(){
      const isShow = ref(false);
      const toggle = ()=>{
          isShow.value = !isShow.value
      }
      return {
          isShow,
          toggle
      }
  }
});
</script>

二、GlobalHeader.vue中使用

<template>
  <nav class="navbar navbar-light bg-light border mb-2" style="color:#fff">
    <div class="container">
      ...
      <div v-else class="list-line mb-0">
        <dropdown :name="user.name"></dropdown> ++
      </div>
    </div>
  </nav>
</template>
<script lang="ts">
import { defineComponent, PropType } from "vue";
import Dropdown from './Dropdown.vue'
export interface UserProps {
  isLogin: boolean;
  name?: string;
  id?: number;
}
export default defineComponent({
  name: "GlobalHeader",
  props: {
    user: {
      type: Object as PropType<UserProps>,
      required: true
    },
  },
  components:{
    Dropdown ++
  }
});
</script>