vue 使用下拉菜单选择图标怎么写

在 Vue 中使用下拉菜单选择图标可以通过以下步骤实现：

1. 在组件中引入需要使用的图标库，如 Font Awesome。

<!-- 引入 Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-WyHtG1nMGO7nFzZ9t9JxGx+2o2Q5+Mv9XfR5m5x5J5Fq3m4y8W4dxh2Lm4cO/2Qv9ZEB+5OnxJhZCt0YHt+8Fw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

2. 在组件中定义一个下拉菜单，用于选择图标。

<template>
  <div>
    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i :class="selectedIcon"></i> {{ selectedIcon }}
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#" @click="selectIcon('fas fa-heart')"><i class="fas fa-heart"></i> fa-heart</a>
        <a class="dropdown-item" href="#" @click="selectIcon('fas fa-star')"><i class="fas fa-star"></i> fa-star</a>
        <a class="dropdown-item" href="#" @click="selectIcon('fas fa-check')"><i class="fas fa-check"></i> fa-check</a>
      </div>
    </div>
  </div>
</template>

3. 在组件中定义一个变量用于存储选中的图标，然后在下拉菜单中绑定点击事件，当点击某个图标时，更新选中的图标。

<script>
export default {
  data() {
    return {
      selectedIcon: 'fas fa-heart' // 默认选中的图标
    }
  },
  methods: {
    selectIcon(icon) {
      this.selectedIcon = icon;
    }
  }
}
</script>

4. 在组件中使用选中的图标。

<template>
  <div>
    <i :class="selectedIcon"></i>
  </div>
</template>