09.Element UI之input組件

一、基本用法:

? ? |--語法:<el-input v-model="inputText" placeholder="請輸入內容"></el-input>

默認寬度100%,可以通過柵格控制寬度
數據控制

二、添加禁用狀態(disabled)

頁面效果
代碼實現

三、添加清空按鈕(clearable)

添加clearable屬性,值為true/false
代碼實現

四、密碼框(show-password)

頁面效果
添加show-password屬性,值為true/false

五、帶icon的輸入框

? ? |--兩種方式:屬性方式和slot方式

? ? |--方式1:屬性方式

? ? ? ? |--prefix-icon:在input組件首部加入圖標

? ? ? ? |--suffix-icon:在input組件尾部加入圖標

? ? ????|--示例:

頁面效果
代碼實現

? ? |--方式2:通過slot屬性

頁面效果
代碼實現

? ? |--兩種方式可以針對不通的綁定事件來進行使用。針對文本框用屬性,針對圖標綁定事件可以用slot方式。

六、文本域(textarea)

? ? |--添加type="textarea"

? ? |--添加rows="2"來控制高度,這里的2代表能輸入2兩文本的高度

? ? |--示例:創建一個能輸入5行文本高度的文本域

頁面效果
代碼實現

? ? |--autosize屬性:通過設置autosize屬性可以使得文本域的高度能夠根據文本內容自動調整。并且autosize還可以設定為一個對象,指定最小行數和最大行數。

頁面效果
添加autosize屬性

? ? ?|--autosize綁定{minRows:2,maxRows:5}

設置最小高度為2行文本高度
設置最大高度為5行文本高度
超過5行文本高度會出現滑動條
代碼實現

七、復合輸入框

? ? |--通過slot屬性設置前置位還是后置位

? ? ? ? |--前置位:slot="prepend"

? ? ? ? |--后置位:slot="append"

? ? |--示例1:

頁面效果
代碼實現

? ? |--示例2:

頁面效果
代碼實現
控制select、input寬度

八、尺寸控制(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:

頁面效果
組件設置
data中的設置
組件掛載完給飯店數組賦值
進行過濾,返回匹配的數組
當執行選中的時候觸發handleSelet方法
handleSelect方法

? ? |--如果想輸入后再匹配,而不是激活輸入框就匹配,添加屬性綁定:trigger-on-focus="false"

輸入san以后才激活匹配
代碼實現,添加trigger-on-focus

? ? |--自定義提示模板樣式:

頁面效果
item為每一個提示項,注意是{item}不是{{item}}
自定義的樣式
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容