效果:
点击右侧的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" class="cardClass"> <div v-for="(icon,index) in icons" :key="index" class="iconDiv"> <el-link :id="icon" :underline="false" @click="selectIcon(icon)"> <svg-icon :icon-class=icon class="svg-icon-Mclass"></svg-icon> </el-link> </div> </el-card> </el-form-item>
注意:el-link标签的id属性值为icon名称,使用id属性是为了通过id选择该标签,然后设置style属性的color的值。
点击右侧的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; }
svg-icon-M2class设置的是svg的样式
注意:上述的el-card占用了一定的空间,将下面的标签往下挤。如果想要el-card悬浮在上面,则需要使用z-index样式。
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。
注释:Z-index 仅能在定位元素上奏效(例如 position:absolute;)!
给el-card标签添加cardClass样式
.cardClass { position: absolute; z-index: 9999; }
效果如下: