CSS 格式 設置標簽間距 和 input slot

作者:張艷濤

日期:2020-07-29

---

CSS設置倆個標簽的間距 及 Input Slots

    <div>
        <div class="m-b-20 ovf-hd">

            <div class="fl w-200 ">
                <el-input placeholder="請輸入用戶名" v-model="realname">
                    <el-button slot="append" icon="search" @click="search()"></el-button>
                </el-input>
            </div>
            <div class="fl m-l-30" v-show="addShow">
                <router-link class="btn-link-large add-btn" to="add">
                    <i class="el-icon-plus"></i>  添加用戶
                </router-link>
            </div>
        </div>

　global.css中設置

.m-l-30 {
  margin-left: 30px !important;
}

　

 Input Slots

---

 

　參考:https://element.eleme.cn/#/zh-CN/component/input

　

 

<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>

Input Slots

name	說明
prefix	輸入框頭部內容，只對 type="text" 有效
suffix	輸入框尾部內容，只對 type="text" 有效
prepend	輸入框前置內容，只對 type="text" 有效
append	輸入框后置內容，只對 type="text" 有效

 

                <el-input placeholder="請輸入用戶名" v-model="realname">
                    <el-button slot="append" icon="search" @click="search()"></el-button>
                </el-input>

　　

atzhang