黑豹程序员-ElementPlus选择图标器

最新推荐文章于 2025-12-11 02:40:25 发布

原创

最新推荐文章于 2025-12-11 02:40:25 发布 · 921 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

ElementPlus组件提供了很多图标svg

如何在你的系统中，用户可以使用呢？
这就是图标器，去调用ElementPlus的icon组件库，展示到页面，用户选择，返回选择的组件名称。

效果

在这里插入图片描述

代码

<template>
  <el-input @click="iconDialogVisible = true" v-model="currentIconName">
  </el-input>
  <el-dialog
      v-model="iconDialogVisible"
      title="请选择图标"
      width="80%"
      :before-close="handleClose"
      @open="beforeOpen"
  >
    <div style="display: flex;flex-wrap: wrap">
      <div v-for="(name,index) in icons" :index="index" :key="index"