一、基本用法:
? ? |--語法:<el-input v-model="inputText" placeholder="請輸入內容"></el-input>
二、添加禁用狀態(disabled)
三、添加清空按鈕(clearable)
四、密碼框(show-password)
五、帶icon的輸入框
? ? |--兩種方式:屬性方式和slot方式
? ? |--方式1:屬性方式
? ? ? ? |--prefix-icon:在input組件首部加入圖標
? ? ? ? |--suffix-icon:在input組件尾部加入圖標
? ? ????|--示例:
? ? |--方式2:通過slot屬性
? ? |--兩種方式可以針對不通的綁定事件來進行使用。針對文本框用屬性,針對圖標綁定事件可以用slot方式。
六、文本域(textarea)
? ? |--添加type="textarea"
? ? |--添加rows="2"來控制高度,這里的2代表能輸入2兩文本的高度
? ? |--示例:創建一個能輸入5行文本高度的文本域
? ? |--autosize屬性:通過設置autosize屬性可以使得文本域的高度能夠根據文本內容自動調整。并且autosize還可以設定為一個對象,指定最小行數和最大行數。
? ? ?|--autosize綁定{minRows:2,maxRows:5}
七、復合輸入框
? ? |--通過slot屬性設置前置位還是后置位
? ? ? ? |--前置位:slot="prepend"
? ? ? ? |--后置位:slot="append"
? ? |--示例1:
? ? |--示例2:
八、尺寸控制(size屬性)
九、輸入長度限制
? ? |--通過minlength和maxlength限制字數
? ? |--通過show-word-limit顯示字數統計
十、輸入建議
? ? |--用法:<el-autocomplete></el-autocomplete>
? ? |--屬性:
? ? ? ? |--:fetch-suggestions:"querySearch":返回輸入建議的方法屬性,queryString(queryString,cb)
? ? ? ? ? ? |--queryString:為你輸入的值
? ? ? ? ? ? |--cb:callback函數
? ? ? ? ? ? |--該方法中你可以在你輸入建議數據準備好時通過cb(data)返回到el-autocomplete組件中。
? ? ? ? |--@select="handleSelect"
? ? ? ? ? ? |--當你選中輸入建議時,觸發的函數,handleSelect(item),item是你選中的輸入建議的對象
? ? |--示例1:
? ? |--如果想輸入后再匹配,而不是激活輸入框就匹配,添加屬性綁定:trigger-on-focus="false"
? ? |--自定義提示模板樣式: