带卡片的input输入框

效果:

带卡片的input输入框

点击右侧的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;
    }

 

上一篇:【博客美化】04.自定义地址栏logo


下一篇:react 从入门到实践之 react 的虚拟 DOM 和 Diff 算法