zoukankan      html  css  js  c++  java
  • 带 icon 的输入框:slot方式。slot="prefix"和slot="suffix"

    一、带有图标标记输入类型

    1、官网中使用

    代码如下:

    <div class="demo-input-suffix">
      slot 方式:
      <el-input
        placeholder="请选择日期"
        v-model="input3">
        <i slot="suffix" class="el-input__icon el-icon-date"></i>
      </el-input>
      <el-input
        placeholder="请输入内容"
        v-model="input4">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </div>

    2、实际开发中使用

    <el-form-item label="菜单图标" prop="icon" :rules="form.type==0?rules.icon:[]">
                        <el-input class="icon-input" :readonly="true" type="text" v-model="form.icon" size="small" clearable
                            align-c="center">
                            <svg-icon slot="prefix" class="svg-icon-M2class" :icon-class="iconName" />
                            <el-link @click="openSelectIcon" slot="suffix" :underline="false" icon="el-icon-s-tools">
                            </el-link>
                        </el-input>
                    </el-form-item>

    效果如下:

  • 相关阅读:
    线程阻塞工具:LockSupport
    jenkins
    Mysql中MVCC的使用及原理详解
    你知道 hash 的实现吗?为什么要这样实现?
    为什么哈希表的容量一定要是 2的整数次幂?
    同步异步 阻塞 非阻塞
    MFC
    MFC
    MFC
    MFC
  • 原文地址:https://www.cnblogs.com/zwh0910/p/15675115.html
Copyright © 2011-2022 走看看