通過(guò)鼠標(biāo)或鍵盤輸入字符
1.如何使用？
Input 為受控組件，它總會(huì)顯示 Vue 綁定值。
通常情況下，應(yīng)當(dāng)處理?
input?事件，并更新組件的綁定值（或使用v-model）。否則，輸入框內(nèi)顯示的值將不會(huì)改變。不支持?v-model?修飾符。
<el-input v-model="input" placeholder="請(qǐng)輸入內(nèi)容"></el-input>
<script>
export default {
data() {
return {
input: ''
}
}
}
</script>2.禁用狀態(tài)
通過(guò)?disabled?屬性指定是否禁用 input 組件
<el-input
placeholder="請(qǐng)輸入內(nèi)容"
v-model="input"
:disabled="true">
</el-input>
<script>
export default {
data() {
return {
input: ''
}
}
}
</script>3.可清空
使用clearable屬性即可得到一個(gè)可清空的輸入框
<el-input
placeholder="請(qǐng)輸入內(nèi)容"
v-model="input"
clearable>
</el-input>
<script>
export default {
data() {
return {
input: ''
}
}
}
</script>4.密碼框
使用show-password屬性即可得到一個(gè)可切換顯示隱藏的密碼框
<el-input placeholder="請(qǐng)輸入密碼" v-model="input" show-password></el-input>
<script>
export default {
data() {
return {
input: ''
}
}
}
</script>5.帶 icon 的輸入框
帶有圖標(biāo)標(biāo)記輸入類型
可以通過(guò)?prefix-icon?和?suffix-icon?屬性在 input 組件首部和尾部增加顯示圖標(biāo)，也可以通過(guò) slot 來(lái)放置圖標(biāo)。
<div class="demo-input-suffix">
屬性方式：
<el-input
placeholder="請(qǐng)選擇日期"
suffix-icon="el-icon-date"
v-model="input1">
</el-input>
<el-input
placeholder="請(qǐng)輸入內(nèi)容"
prefix-icon="el-icon-search"
v-model="input2">
</el-input>
</div>
<div class="demo-input-suffix">
slot 方式：
<el-input
placeholder="請(qǐng)選擇日期"
v-model="input3">
<i slot="suffix" class="el-input__icon el-icon-date"></i>
</el-input>
<el-input
placeholder="請(qǐng)輸入內(nèi)容"
v-model="input4">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
</div>
<script>
export default {
data() {
return {
input1: '',
input2: '',
input3: '',
input4: ''
}
}
}
</script>6.文本域
用于輸入多行文本信息，通過(guò)將?type?屬性的值指定為 textarea。
文本域高度可通過(guò)?rows?屬性控制
<el-input
type="textarea"
:rows="2"
placeholder="請(qǐng)輸入內(nèi)容"
v-model="textarea">
</el-input>
<script>
export default {
data() {
return {
textarea: ''
}
}
}
</script>7.可自適應(yīng)文本高度的文本域
通過(guò)設(shè)置?autosize?屬性可以使得文本域的高度能夠根據(jù)文本內(nèi)容自動(dòng)進(jìn)行調(diào)整，并且?autosize?還可以設(shè)定為一個(gè)對(duì)象，指定最小行數(shù)和最大行數(shù)。
<el-input
type="textarea"
autosize
placeholder="請(qǐng)輸入內(nèi)容"
v-model="textarea1">
</el-input>
<div style="margin: 20px 0;"></div>
<el-input
type="textarea"
:autosize="{ minRows: 2, maxRows: 4}"
placeholder="請(qǐng)輸入內(nèi)容"
v-model="textarea2">
</el-input>
<script>
export default {
data() {
return {
textarea1: '',
textarea2: ''
}
}
}
</script>
8.復(fù)合型輸入框
可前置或后置元素，一般為標(biāo)簽或按鈕
可通過(guò) slot 來(lái)指定在 input 中前置或者后置內(nèi)容。
<div>
<el-input placeholder="請(qǐng)輸入內(nèi)容" v-model="input1">
<template slot="prepend">Http://</template>
</el-input>
</div>
<div style="margin-top: 15px;">
<el-input placeholder="請(qǐng)輸入內(nèi)容" v-model="input2">
<template slot="append">.com</template>
</el-input>
</div>
<div style="margin-top: 15px;">
<el-input placeholder="請(qǐng)輸入內(nèi)容" v-model="input3" class="input-with-select">
<el-select v-model="select" slot="prepend" placeholder="請(qǐng)選擇">
<el-option label="餐廳名" value="1"></el-option>
<el-option label="訂單號(hào)" value="2"></el-option>
<el-option label="用戶電話" value="3"></el-option>
</el-select>
<el-button slot="append" icon="el-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.尺寸
可通過(guò)?size?屬性指定輸入框的尺寸，除了默認(rèn)的大小外，還提供了 large、small 和 mini 三種尺寸。
<div class="demo-input-size">
<el-input
placeholder="請(qǐng)輸入內(nèi)容"
suffix-icon="el-icon-date"
v-model="input1">
</el-input>
<el-input
size="medium"
placeholder="請(qǐng)輸入內(nèi)容"
suffix-icon="el-icon-date"
v-model="input2">
</el-input>
<el-input
size="small"
placeholder="請(qǐng)輸入內(nèi)容"
suffix-icon="el-icon-date"
v-model="input3">
</el-input>
<el-input
size="mini"
placeholder="請(qǐng)輸入內(nèi)容"
suffix-icon="el-icon-date"
v-model="input4">
</el-input>
</div>
<script>
export default {
data() {
return {
input1: '',
input2: '',
input3: '',
input4: ''
}
}
}
</script>10.?帶輸入建議
根據(jù)輸入內(nèi)容提供對(duì)應(yīng)的輸入建議
/*autocomplete 是一個(gè)可帶輸入建議的輸入框組件，fetch-suggestions 是一個(gè)返回輸入建議的方法屬性，如 querySearch(queryString, cb)，在該方法中你可以在你的輸入建議數(shù)據(jù)準(zhǔn)備好時(shí)通過(guò) cb(data) 返回到 autocomplete 組件中。*/
<el-row class="demo-autocomplete">
<el-col :span="12">
<div class="sub-title">激活即列出輸入建議</div>
<el-autocomplete
class="inline-input"
v-model="state1"
:fetch-suggestions="querySearch"
placeholder="請(qǐng)輸入內(nèi)容"
@select="handleSelect"
></el-autocomplete>
</el-col>
<el-col :span="12">
<div class="sub-title">輸入后匹配輸入建議</div>
<el-autocomplete
class="inline-input"
v-model="state2"
:fetch-suggestions="querySearch"
placeholder="請(qǐng)輸入內(nèi)容"
:trigger-on-focus="false"
@select="handleSelect"
></el-autocomplete>
</el-col>
</el-row>
<script>
export default {
data() {
return {
restaurants: [],
state1: '',
state2: ''
};
},
methods: {
querySearch(queryString, cb) {
var restaurants = this.restaurants;
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
// 調(diào)用 callback 返回建議列表的數(shù)據(jù)
cb(results);
},
createFilter(queryString) {
return (restaurant) => {
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
loadAll() {
return [
{ "value": "三全鮮食（北新涇店）", "address": "長(zhǎng)寧區(qū)新漁路144號(hào)" },
{ "value": "Hot honey 首爾炸雞（仙霞路）", "address": "上海市長(zhǎng)寧區(qū)淞虹路661號(hào)" },
];
},
handleSelect(item) {
console.log(item);
}
},
mounted() {
this.restaurants = this.loadAll();
}
}
</script>11.自定義模板
可自定義輸入建議的顯示
使用scoped slot自定義輸入建議的模板。該 scope 的參數(shù)為item，表示當(dāng)前輸入建議對(duì)象。
<el-autocomplete
popper-class="my-autocomplete"
v-model="state"
:fetch-suggestions="querySearch"
placeholder="請(qǐng)輸入內(nèi)容"
@select="handleSelect">
<i
class="el-icon-edit el-input__icon"
slot="suffix"
@click="handleIconClick">
</i>
<template slot-scope="{ item }">
<div class="name">{{ item.value }}</div>
<span class="addr">{{ item.address }}</span>
</template>
</el-autocomplete>
<style>
.my-autocomplete {
li {
line-height: normal;
padding: 7px;
.name {
text-overflow: ellipsis;
overflow: hidden;
}
.addr {
font-size: 12px;
color: #b4b4b4;
}
.highlighted .addr {
color: #ddd;
}
}
}
</style>
<script>
export default {
data() {
return {
restaurants: [],
state: ''
};
},
methods: {
querySearch(queryString, cb) {
var restaurants = this.restaurants;
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
// 調(diào)用 callback 返回建議列表的數(shù)據(jù)
cb(results);
},
createFilter(queryString) {
return (restaurant) => {
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
loadAll() {
return [
{ "value": "三全鮮食（北新涇店）", "address": "長(zhǎng)寧區(qū)新漁路144號(hào)" },
{ "value": "Hot honey 首爾炸雞（仙霞路）", "address": "上海市長(zhǎng)寧區(qū)淞虹路661號(hào)" },
];
},
handleSelect(item) {
console.log(item);
},
handleIconClick(ev) {
console.log(ev);
}
},
mounted() {
this.restaurants = this.loadAll();
}
}
</script>12.遠(yuǎn)程搜索
從服務(wù)端搜索數(shù)據(jù)
<el-autocomplete
v-model="state"
:fetch-suggestions="querySearchAsync"
placeholder="請(qǐng)輸入內(nèi)容"
@select="handleSelect"
></el-autocomplete>
<script>
export default {
data() {
return {
restaurants: [],
state: '',
timeout: null
};
},
methods: {
loadAll() {
return [
{ "value": "三全鮮食（北新涇店）", "address": "長(zhǎng)寧區(qū)新漁路144號(hào)" },
{ "value": "Hot honey 首爾炸雞（仙霞路）", "address": "上海市長(zhǎng)寧區(qū)淞虹路661號(hào)" },
];
},
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.輸入長(zhǎng)度限制
maxlength?和?minlength?是原生屬性，用來(lái)限制輸入框的字符長(zhǎng)度，其中字符長(zhǎng)度是用 Javascript 的字符串長(zhǎng)度統(tǒng)計(jì)的。對(duì)于類型為?text?或?textarea?的輸入框，在使用?maxlength?屬性限制最大輸入長(zhǎng)度的同時(shí)，可通過(guò)設(shè)置?show-word-limit?屬性來(lái)展示字?jǐn)?shù)統(tǒng)計(jì)。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-702342.html
<el-input
type="text"
placeholder="請(qǐng)輸入內(nèi)容"
v-model="text"
maxlength="10"
show-word-limit
>
</el-input>
<div style="margin: 20px 0;"></div>
<el-input
type="textarea"
placeholder="請(qǐng)輸入內(nèi)容"
v-model="textarea"
maxlength="30"
show-word-limit
>
</el-input>
<script>
export default {
data() {
return {
text: '',
textarea: ''
}
}
}
</script>以上就是input輸入框的大致內(nèi)容，若想深入淺出可以前往輸入框?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-702342.html
到了這里，關(guān)于ElementUI淺嘗輒止36：Input 輸入框的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
