<!-- 图标选择器
<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-05-31 17:13:59 发布