vue实现icon多选组件

Vue 实现 Icon 多选组件

组件设计思路

多选 Icon 组件的核心在于管理选中状态和渲染可交互的图标列表。通常需要以下功能：

• 支持传入图标列表（本地或远程）
• 支持单选/多选模式
• 提供选中状态的回调事件
• 支持自定义样式

基础实现代码

<template>
  <div class="icon-selector">
    <div 
      v-for="icon in icons" 
      :key="icon.name"
      class="icon-item"
      :class="{ 'selected': selectedIcons.includes(icon.name) }"
      @click="toggleSelect(icon)"
    >
      <i :class="icon.class"></i>
      <span>{{ icon.name }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    icons: {
      type: Array,
      required: true
    },
    multiple: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      selectedIcons: []
    }
  },
  methods: {
    toggleSelect(icon) {
      if (this.multiple) {
        const index = this.selectedIcons.indexOf(icon.name)
        index === -1 
          ? this.selectedIcons.push(icon.name)
          : this.selectedIcons.splice(index, 1)
      } else {
        this.selectedIcons = [icon.name]
      }
      this.$emit('change', this.selectedIcons)
    }
  }
}
</script>

<style scoped>
.icon-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.icon-item {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.icon-item:hover {
  background-color: #f5f5f5;
}
.icon-item.selected {
  border-color: #409eff;
  background-color: #ecf5ff;
}
</style>

使用 Font Awesome 示例

// 父组件中使用
<template>
  <icon-selector 
    :icons="faIcons" 
    @change="handleIconChange"
  />
</template>

<script>
import IconSelector from './IconSelector.vue'

export default {
  components: { IconSelector },
  data() {
    return {
      faIcons: [
        { name: 'home', class: 'fas fa-home' },
        { name: 'user', class: 'fas fa-user' },
        { name: 'cog', class: 'fas fa-cog' },
        { name: 'bell', class: 'fas fa-bell' }
      ]
    }
  },
  methods: {
    handleIconChange(selected) {
      console.log('Selected icons:', selected)
    }
  }
}
</script>

高级功能扩展

搜索过滤

<input 
  v-model="searchQuery" 
  placeholder="Search icons..."
  class="search-input"
>

// 计算属性
computed: {
  filteredIcons() {
    return this.icons.filter(icon => 
      icon.name.includes(this.searchQuery.toLowerCase())
    )
  }
}

分类显示

// 数据结构
icons: [
  {
    category: 'Common',
    items: [
      { name: 'home', class: 'fas fa-home' },
      { name: 'user', class: 'fas fa-user' }
    ]
  }
]

// 模板修改
<div v-for="group in icons" :key="group.category">
  <h4>{{ group.category }}</h4>
  <div class="icon-group">
    <div v-for="icon in group.items" ...>
      <!-- 原有图标渲染 -->
    </div>
  </div>
</div>

性能优化

对于大量图标的情况：

• 使用虚拟滚动（vue-virtual-scroller）
• 实现懒加载
• 分页显示
• 防抖搜索

import { debounce } from 'lodash'

methods: {
  search: debounce(function(query) {
    this.searchQuery = query
  }, 300)
}

注意事项

• 图标库需要提前引入（如 Font Awesome）
• 选中状态可持久化到 Vuex 或 localStorage
• 移动端需增加触摸反馈
• 考虑无障碍访问（ARIA 属性）