elementUI的input框（一）

1.elementUI的input框，需要用v-model綁定一個變量，這個變量相當於原生input框的value

2.placeholder屬性和原生的一樣

  <!-- v-model相當於input里的value,必須綁定 -->
<el-input v-model="test" placeholder="請輸入內容"></el-input>

3.禁用el-input，綁定一個disabled屬性即可

<!-- 禁用el-input -->
<el-input v-model="test" :disabled="disabled" placeholder="不能輸入"></el-input>

disabled:true,

4.可清空的input，添加clearable即可

<!-- 可清空的input -->
<el-input v-model="test2" clearable placeholder="這里是可以清空的"></el-input>

效果：

 

 

 

5.密碼框，在el-input里添加show-password即可

<!-- 密碼框 show-password屬性 -->
<el-input v-model="test" placeholder="請輸入密碼" show-password></el-input>

效果：

 

 

 

6.帶圖標的input，使用prefix-icon或者suffix-icon屬性，屬性值是對應的圖標的名稱。prefix-icon是前置icon，suffix-icon是后置屬性

<!-- 帶圖標的input -->
<el-input v-model="test" prefix-icon="el-icon-star-off" placeholder="前面有圖標"></el-input>
<el-input v-model="test" suffix-icon="el-icon-star-off" placeholder="后面有圖標"></el-input>

效果：

 

 

7.elementUI的文本域，在el-input標簽里添加type=“textarea”，即可把input框變成文本域。

文本域內，rows屬性規定文本行數

<!-- tepe規定文本域 rows規定文本域行數 -->
<el-input v-model="test" rows="3" type="textarea" placeholder="這里是文本域"></el-input>

效果：

 

 

 

8.文本域的文本高度自適應，autosize屬性，是一個對象，

有minRows和maxRows規定最小和最大顯示行數

<!-- autosize文本高度自適應，屬性值是一個對象，有minRows和maxRows規定最小和最大顯示行數 -->
<el-input v-model="test" type="textarea" :autosize="{minRows:1,maxRows:3}" placeholder=""></el-input>

 

9.復合型input框

el-input里嵌套template標簽

前置內容和后置內容，使用template標簽，加上slot屬性，屬性值是prepend或者append代表前置或后置，在template里添加想要的內容

 

<!-- 前置內容和后置內容，使用template標簽，加上slot屬性，屬性值是prepend或者append代表前置或后置，在template里添加想要的內容 -->
<el-input v-model="test" placeholder="請輸入內容">
  <template slot="prepend">
      http://
  </template>
  <template slot="append">
    .com
  </template>

效果：

 

 

10.el-input除了可以嵌套template外，還可以嵌套其他標簽，標簽里使用slot綁定prepend或者append即可

<!-- el-input除了可以嵌套template外，還可以嵌套其他標簽，標簽里使用slot綁定prepend或者append即可 -->
<el-input v-model="test" placeholder="">
   <el-button type="primary" slot="append">確定</el-button>
</el-input>

效果：

 

 

11.使用size屬性，指定el-input的尺寸

<!-- 指定input框的尺寸 -->
<el-input v-model="test" placeholder=""></el-input>
<el-input v-model="test" size="medium" placeholder=""></el-input>
<el-input v-model="test" size="small" placeholder=""></el-input>
<el-input v-model="test" size="mini" placeholder=""></el-input>