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

ElementPlus组件提供了很多图标svg

如何在你的系统中,用户可以使用呢?

这就是图标器,去调用ElementPlus的icon组件库,展示到页面,用户选择,返回选择的组件名称。

效果

代码

bash 复制代码
<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" style="cursor: pointer; padding: 5px; border: 1px solid rgb(227,232,232);"
           :class="currentIconName === name ? 'red' : ''"
           @click="currentIconName = name"
      >
        <component :is="name" style="width: 1.2rem;height: 1.2rem"></component>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="iconDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleOk"
        >确定</el-button
        >
      </span>
    </template>
  </el-dialog>

</template>

<script>
import * as ElIcons from '@element-plus/icons-vue'
import {reactive, ref, toRefs, watch} from "vue";

export default {
  components: {
    ...ElIcons
  },
  name: "Naruto-Icon.vue",
  emits: ['update:iconName'],
  props: {
    iconName: {
      type: String
    }
  },
  setup(props, context) {
    const getData = () => {
      let icons = []
      for (const name in ElIcons) {
        icons.push(name)
      }
      return icons
    }
    const handleClose = () => {
      iconList.iconDialogVisible = false;
    }
    const beforeOpen = () => {

    }
    const handleOk = () => {
      context.emit(`update:iconName`, iconList.currentIconName);
      handleClose();
    }
    const iconList = reactive({
      icons: getData(),
      iconDialogVisible: false,
      currentIconName: 'Aim'
    })
    watch(() => props.iconName,(val) => {
      iconList.currentIconName = val;
    })
    return {
      ...toRefs(iconList),
      handleClose,
      beforeOpen,
      handleOk
    }
  }
}
</script>

<style scoped>
.red{
  background-color: palevioletred;
  color: white;
}
</style>
相关推荐
CodeCraft Studio15 分钟前
PDF处理控件Aspose.PDF教程:使用 Python 将 PDF 转换为 Base64
开发语言·python·pdf·base64·aspose·aspose.pdf
零点零一17 分钟前
VS+QT的编程开发工作:关于QT VS tools的使用 qt的官方帮助
开发语言·qt
2501_915918411 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂2 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技2 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip2 小时前
JavaScript二叉树相关概念
前端
lingchen19062 小时前
MATLAB的数值计算(三)曲线拟合与插值
开发语言·matlab
gb42152873 小时前
java中将租户ID包装为JSQLParser的StringValue表达式对象,JSQLParser指的是?
java·开发语言·python
一朵梨花压海棠go3 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
蒋星熠3 小时前
Flutter跨平台工程实践与原理透视:从渲染引擎到高质产物
开发语言·python·算法·flutter·设计模式·性能优化·硬件工程