贵阳网站建设怎么样,wordpress关键词位置,设计制作公司,中天建设集团有限公司排名通过鼠标或键盘输入字符 1.如何使用#xff1f; Input 为受控组件#xff0c;它总会显示 Vue 绑定值。 通常情况下#xff0c;应当处理 input 事件#xff0c;并更新组件的绑定值#xff08;或使用v-model#xff09;。否则#xff0c;输入框内显示的值将不会改变。不支… 通过鼠标或键盘输入字符 1.如何使用 Input 为受控组件它总会显示 Vue 绑定值。 通常情况下应当处理 input 事件并更新组件的绑定值或使用v-model。否则输入框内显示的值将不会改变。不支持 v-model 修饰符。 el-input v-modelinput placeholder请输入内容/el-inputscript
export default {data() {return {input: }}
}
/script
2.禁用状态
通过 disabled 属性指定是否禁用 input 组件
el-inputplaceholder请输入内容v-modelinput:disabledtrue
/el-inputscript
export default {data() {return {input: }}
}
/script
3.可清空
使用clearable属性即可得到一个可清空的输入框
el-inputplaceholder请输入内容v-modelinputclearable
/el-inputscriptexport default {data() {return {input: }}}
/script
4.密码框
使用show-password属性即可得到一个可切换显示隐藏的密码框
el-input placeholder请输入密码 v-modelinput show-password/el-inputscriptexport default {data() {return {input: }}}
/script
5.带 icon 的输入框
带有图标标记输入类型
可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标也可以通过 slot 来放置图标。
div classdemo-input-suffix属性方式el-inputplaceholder请选择日期suffix-iconel-icon-datev-modelinput1/el-inputel-inputplaceholder请输入内容prefix-iconel-icon-searchv-modelinput2/el-input
/div
div classdemo-input-suffixslot 方式el-inputplaceholder请选择日期v-modelinput3i slotsuffix classel-input__icon el-icon-date/i/el-inputel-inputplaceholder请输入内容v-modelinput4i slotprefix classel-input__icon el-icon-search/i/el-input
/divscript
export default {data() {return {input1: ,input2: ,input3: ,input4: }}
}
/script
6.文本域
用于输入多行文本信息通过将 type 属性的值指定为 textarea。
文本域高度可通过 rows 属性控制
el-inputtypetextarea:rows2placeholder请输入内容v-modeltextarea
/el-inputscript
export default {data() {return {textarea: }}
}
/script
7.可自适应文本高度的文本域
通过设置 autosize 属性可以使得文本域的高度能够根据文本内容自动进行调整并且 autosize 还可以设定为一个对象指定最小行数和最大行数。
el-inputtypetextareaautosizeplaceholder请输入内容v-modeltextarea1
/el-input
div stylemargin: 20px 0;/div
el-inputtypetextarea:autosize{ minRows: 2, maxRows: 4}placeholder请输入内容v-modeltextarea2
/el-inputscript
export default {data() {return {textarea1: ,textarea2: }}
}
/script8.复合型输入框
可前置或后置元素一般为标签或按钮
可通过 slot 来指定在 input 中前置或者后置内容。
divel-input placeholder请输入内容 v-modelinput1template slotprependHttp:///template/el-input
/div
div stylemargin-top: 15px;el-input placeholder请输入内容 v-modelinput2template slotappend.com/template/el-input
/div
div stylemargin-top: 15px;el-input placeholder请输入内容 v-modelinput3 classinput-with-selectel-select v-modelselect slotprepend placeholder请选择el-option label餐厅名 value1/el-optionel-option label订单号 value2/el-optionel-option label用户电话 value3/el-option/el-selectel-button slotappend iconel-icon-search/el-button/el-input
/div
style.el-select .el-input {width: 130px;}.input-with-select .el-input-group__prepend {background-color: #fff;}
/style
script
export default {data() {return {input1: ,input2: ,input3: ,select: }}
}
/script
9.尺寸
可通过 size 属性指定输入框的尺寸除了默认的大小外还提供了 large、small 和 mini 三种尺寸。
div classdemo-input-sizeel-inputplaceholder请输入内容suffix-iconel-icon-datev-modelinput1/el-inputel-inputsizemediumplaceholder请输入内容suffix-iconel-icon-datev-modelinput2/el-inputel-inputsizesmallplaceholder请输入内容suffix-iconel-icon-datev-modelinput3/el-inputel-inputsizeminiplaceholder请输入内容suffix-iconel-icon-datev-modelinput4/el-input
/divscript
export default {data() {return {input1: ,input2: ,input3: ,input4: }}
}
/script
10. 带输入建议
根据输入内容提供对应的输入建议
/*autocomplete 是一个可带输入建议的输入框组件fetch-suggestions 是一个返回输入建议的方法属性如 querySearch(queryString, cb)在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。*/el-row classdemo-autocompleteel-col :span12div classsub-title激活即列出输入建议/divel-autocompleteclassinline-inputv-modelstate1:fetch-suggestionsquerySearchplaceholder请输入内容selecthandleSelect/el-autocomplete/el-colel-col :span12div classsub-title输入后匹配输入建议/divel-autocompleteclassinline-inputv-modelstate2:fetch-suggestionsquerySearchplaceholder请输入内容:trigger-on-focusfalseselecthandleSelect/el-autocomplete/el-col
/el-row
scriptexport default {data() {return {restaurants: [],state1: ,state2: };},methods: {querySearch(queryString, cb) {var restaurants this.restaurants;var results queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;// 调用 callback 返回建议列表的数据cb(results);},createFilter(queryString) {return (restaurant) {return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) 0);};},loadAll() {return [{ value: 三全鲜食北新泾店, address: 长宁区新渔路144号 },{ value: Hot honey 首尔炸鸡仙霞路, address: 上海市长宁区淞虹路661号 },];},handleSelect(item) {console.log(item);}},mounted() {this.restaurants this.loadAll();}}
/script
11.自定义模板
可自定义输入建议的显示
使用scoped slot自定义输入建议的模板。该 scope 的参数为item表示当前输入建议对象。
el-autocompletepopper-classmy-autocompletev-modelstate:fetch-suggestionsquerySearchplaceholder请输入内容selecthandleSelecticlassel-icon-edit el-input__iconslotsuffixclickhandleIconClick/itemplate slot-scope{ item }div classname{{ item.value }}/divspan classaddr{{ item.address }}/span/template
/el-autocompletestyle
.my-autocomplete {li {line-height: normal;padding: 7px;.name {text-overflow: ellipsis;overflow: hidden;}.addr {font-size: 12px;color: #b4b4b4;}.highlighted .addr {color: #ddd;}}
}
/stylescriptexport default {data() {return {restaurants: [],state: };},methods: {querySearch(queryString, cb) {var restaurants this.restaurants;var results queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;// 调用 callback 返回建议列表的数据cb(results);},createFilter(queryString) {return (restaurant) {return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) 0);};},loadAll() {return [{ value: 三全鲜食北新泾店, address: 长宁区新渔路144号 },{ value: Hot honey 首尔炸鸡仙霞路, address: 上海市长宁区淞虹路661号 },];},handleSelect(item) {console.log(item);},handleIconClick(ev) {console.log(ev);}},mounted() {this.restaurants this.loadAll();}}
/script
12.远程搜索
从服务端搜索数据
el-autocompletev-modelstate:fetch-suggestionsquerySearchAsyncplaceholder请输入内容selecthandleSelect
/el-autocomplete
scriptexport default {data() {return {restaurants: [],state: ,timeout: null};},methods: {loadAll() {return [{ value: 三全鲜食北新泾店, address: 长宁区新渔路144号 },{ value: Hot honey 首尔炸鸡仙霞路, address: 上海市长宁区淞虹路661号 },];},querySearchAsync(queryString, cb) {var restaurants this.restaurants;var results queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;clearTimeout(this.timeout);this.timeout setTimeout(() {cb(results);}, 3000 * Math.random());},createStateFilter(queryString) {return (state) {return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) 0);};},handleSelect(item) {console.log(item);}},mounted() {this.restaurants this.loadAll();}};
/script
13.输入长度限制
maxlength 和 minlength 是原生属性用来限制输入框的字符长度其中字符长度是用 Javascript 的字符串长度统计的。对于类型为 text 或 textarea 的输入框在使用 maxlength 属性限制最大输入长度的同时可通过设置 show-word-limit 属性来展示字数统计。
el-inputtypetextplaceholder请输入内容v-modeltextmaxlength10show-word-limit/el-input
div stylemargin: 20px 0;/div
el-inputtypetextareaplaceholder请输入内容v-modeltextareamaxlength30show-word-limit/el-inputscript
export default {data() {return {text: ,textarea: }}
}
/script
以上就是input输入框的大致内容若想深入浅出可以前往输入框
