效果:
点击右侧的icon图标,弹出一个card,代码如下:
<el-form-item label="菜单图标" prop="icon"> <!-- input输入框使用readonly为true,就会去掉后面的清空按钮 --> <el-input class="icon-input" :readonly="true" v-model="form.icon" size="small" clearable> <svg-icon slot="prefix" :icon-class="iconName"></svg-icon> <el-link @click="openSelectIcon" :underline="false" icon="el-icon-s-tools" slot="suffix"></el-link> </el-input> <el-card v-show="isShowIcon"> <div v-for="(icon,index) in icons" :key="index" class="iconDiv"> <svg-icon :icon-class=icon class="svg-icon-Mclass"></svg-icon> </div> </el-card> </el-form-item>
点击右侧的icon图标,执行openSelectIcon方法:
openSelectIcon() { // 如果图标列表中包含有该图标,则改变图标列表中该图标的颜色 if (this.icons.indexOf(this.iconName) != -1) { document.getElementById(this.iconName).style.color = "#20a0ff"; } // 将isShowIcon改为true,即显示卡片 this.isShowIcon = !this.isShowIcon; },
将isShowIcon设置为true,图片就展示出来了。
样式如下:
.iconDiv { display: inline; width: 100%; word-wrap: break-word; } .svg-icon-M2class { margin-left: 15px; margin-right: 10px; width: 1em; height: 1em; vertical-align: -0.15em; fill: black; overflow: hidden; }