<!-- 图标选择器
<select-icon v-model=[绑定变量] :data=[选项数据] />
-->
<template>
<el-popover
placement="bottom-start"
popper-class="pupop-select-icon"
transition="el-zoom-in-top"
trigger="click"
v-model="popoverVisible"
:disabled="disabledSelected">
<!-- 弹出框内容区 -->
<el-scrollbar
v-if="popoverVisible"
class="hide-x"
:native="false"
:noresize="false">
<!-- 图标项 -->
<div
class="icon-item"
v-for="item in options"
:key="item"
:class="{ 'is-active': isActive(item) }"
@click="onClickSelected(item)">
<i :class="item"></i>
</div>
</el-scrollbar>
<!-- 页面显示内容区 -->
<template slot="reference">
<div :class="{
'mod-select-icon': 1,
'is-opened': popoverVisible,
ElementUI 实现图标选择器
最新推荐文章于 2024-09-20 16:00:06 发布
本文详细介绍了如何利用ElementUI库,结合其内置的图标资源,开发一个图标选择器功能。通过步骤分解,读者可以了解到如何配置组件,实现图标预览及选择,为前端项目提供便捷的图标管理解决方案。
摘要由CSDN通过智能技术生成