vue3+ts实现动态下拉选项为图标

落入红尘入你怀？

于 2025-02-27 09:31:11 发布

阅读量222

点赞数 1

文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/weixin_42378006/article/details/145894711

版权

功能：实现可配置项，下拉选项为图标，如图：

代码如下：

<el-select v-model="BuyVolAcc" size="small" style="width: 100%" class="icon-selector">
    <el-option v-for="icon in priceShortcutKeyOptions" :key="icon.name" :label="icon.name" :value="icon.name">
       <div class="option-content">
           <component :is="icon.component" class="icon" />
           <span class="icon-name">{{ icon.name }}</span>
       </div>
    </el-option>
    <template #prefix>
          <component v-if="form.BuyVolAcc4" :is="form.BuyVolAcc4" class="icon" />
     </template>
</el-select>

<script setup lang="ts">
import { Right, ArrowDown, Top, Bottom, Back, Plus, Check } from '@element-plus/icons-vue'
import type { Component, ref, markRaw  } from 'vue'

const BuyVolAcc = ref();
interface IconItem {
    name: string
    component: Component // 可以使用更具体的组件类型
}
const priceShortcutKeyOptions = ref<IconItem[]>([
    { name: 'Top', component: markRaw(Top) },
    { name: 'Bottom', component: markRaw(Bottom) },
    { name: 'Right', component: markRaw(Right) },
    { name: 'Back', component: markRaw(Back) },
])

</script>