Dropdown 下拉菜单 #

<template>
  <tass-dropdown :trigger="state.hover">
    <button class="tas-dropdown-button">
      <span class="tas-dropdown-link">
        下拉菜单
        <tass-icon style="margin-left: 10px" name="chevrondown"></tass-icon>
      </span>
    </button>
    <tass-dropdown-menu>
      <tass-dropdown-item>北京市</tass-dropdown-item>
      <tass-dropdown-item>上海市</tass-dropdown-item>
      <tass-dropdown-item>杭州市</tass-dropdown-item>
      <tass-dropdown-item>厦门市</tass-dropdown-item>
    </tass-dropdown-menu>
  </tass-dropdown>
</template>

<script setup lang="ts">
  import { reactive } from 'vue';

  const state = reactive({
    hover: 'hover'
  });
</script>

<template>
  <div>
    <tass-dropdown :trigger="state.click">
      <button class="tas-dropdown-button">
        <span class="tas-dropdown-link">
          下拉菜单
          <tass-icon style="margin-left: 10px" name="chevrondown"></tass-icon>
        </span>
      </button>
      <tass-dropdown-menu-click>
        <tass-dropdown-item>北京市</tass-dropdown-item>
        <tass-dropdown-item>上海市</tass-dropdown-item>
        <tass-dropdown-item>杭州市</tass-dropdown-item>
        <tass-dropdown-item>厦门市</tass-dropdown-item>
      </tass-dropdown-menu-click>
    </tass-dropdown>
  </div>
</template>

<script setup lang="ts">
  import { reactive } from 'vue';

  const state = reactive({
    click: 'click',
    hover: 'hover'
  });
</script>