带卡片的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" 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;
         100%;
        word-wrap: break-word;
    }

    .svg-icon-M2class {
        margin-left: 15px;
        margin-right: 10px;
         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;
    }

效果如下：