• Input 输入框
    • 基础用法
    • 禁用状态
    • 可清空
    • 密码框
    • 带 icon 的输入框
    • 文本域
    • 可自适应文本高度的文本域
    • 复合型输入框
    • 尺寸
    • 带输入建议
    • 自定义模板
    • 远程搜索
    • 输入长度限制
    • Input Attributes
    • Input Slots
    • Input Events
    • Input Methods
    • Autocomplete Attributes
    • Autocomplete Slots
    • Autocomplete Scoped Slot
    • Autocomplete Events
    • Autocomplete Methods

    Input 输入框

    通过鼠标或键盘输入字符

    Input 为受控组件,它总会显示 Vue 绑定值

    通常情况下,应当处理 input 事件,并更新组件的绑定值(或使用v-model)。否则,输入框内显示的值将不会改变。

    不支持 v-model 修饰符。

    基础用法

    Input 输入框 - 图1

    1. <el-input v-model="input" placeholder="请输入内容"></el-input>
    2. <script>
    3. export default {
    4. data() {
    5. return {
    6. input: ''
    7. }
    8. }
    9. }
    10. </script>

    禁用状态

    Input 输入框 - 图2

    通过 disabled 属性指定是否禁用 input 组件

    1. <el-input
    2. placeholder="请输入内容"
    3. v-model="input"
    4. :disabled="true">
    5. </el-input>
    6. <script>
    7. export default {
    8. data() {
    9. return {
    10. input: ''
    11. }
    12. }
    13. }
    14. </script>

    可清空

    Input 输入框 - 图3

    使用clearable属性即可得到一个可清空的输入框

    1. <el-input
    2. placeholder="请输入内容"
    3. v-model="input"
    4. clearable>
    5. </el-input>
    6. <script>
    7. export default {
    8. data() {
    9. return {
    10. input: ''
    11. }
    12. }
    13. }
    14. </script>

    密码框

    Input 输入框 - 图4

    使用show-password属性即可得到一个可切换显示隐藏的密码框

    1. <el-input placeholder="请输入密码" v-model="input" show-password></el-input>
    2. <script>
    3. export default {
    4. data() {
    5. return {
    6. input: ''
    7. }
    8. }
    9. }
    10. </script>

    带 icon 的输入框

    带有图标标记输入类型

    Input 输入框 - 图5

    可以通过 prefix-iconsuffix-icon 属性在 input 组件首部和尾部增加显示图标,也可以通过 slot 来放置图标。

    1. <div class="demo-input-suffix">
    2. 属性方式:
    3. <el-input
    4. placeholder="请选择日期"
    5. suffix-icon="el-icon-date"
    6. v-model="input1">
    7. </el-input>
    8. <el-input
    9. placeholder="请输入内容"
    10. prefix-icon="el-icon-search"
    11. v-model="input2">
    12. </el-input>
    13. </div>
    14. <div class="demo-input-suffix">
    15. slot 方式:
    16. <el-input
    17. placeholder="请选择日期"
    18. v-model="input3">
    19. <i slot="suffix" class="el-input__icon el-icon-date"></i>
    20. </el-input>
    21. <el-input
    22. placeholder="请输入内容"
    23. v-model="input4">
    24. <i slot="prefix" class="el-input__icon el-icon-search"></i>
    25. </el-input>
    26. </div>
    27. <script>
    28. export default {
    29. data() {
    30. return {
    31. input1: '',
    32. input2: '',
    33. input3: '',
    34. input4: ''
    35. }
    36. }
    37. }
    38. </script>

    文本域

    用于输入多行文本信息,通过将 type 属性的值指定为 textarea。

    Input 输入框 - 图6

    文本域高度可通过 rows 属性控制

    1. <el-input
    2. type="textarea"
    3. :rows="2"
    4. placeholder="请输入内容"
    5. v-model="textarea">
    6. </el-input>
    7. <script>
    8. export default {
    9. data() {
    10. return {
    11. textarea: ''
    12. }
    13. }
    14. }
    15. </script>

    可自适应文本高度的文本域

    通过设置 autosize 属性可以使得文本域的高度能够根据文本内容自动进行调整,并且 autosize 还可以设定为一个对象,指定最小行数和最大行数。

    Input 输入框 - 图7

    1. <el-input
    2. type="textarea"
    3. autosize
    4. placeholder="请输入内容"
    5. v-model="textarea1">
    6. </el-input>
    7. <div style="margin: 20px 0;"></div>
    8. <el-input
    9. type="textarea"
    10. :autosize="{ minRows: 2, maxRows: 4}"
    11. placeholder="请输入内容"
    12. v-model="textarea2">
    13. </el-input>
    14. <script>
    15. export default {
    16. data() {
    17. return {
    18. textarea1: '',
    19. textarea2: ''
    20. }
    21. }
    22. }
    23. </script>

    复合型输入框

    可前置或后置元素,一般为标签或按钮

    Input 输入框 - 图8

    可通过 slot 来指定在 input 中前置或者后置内容。

    1. <div>
    2. <el-input placeholder="请输入内容" v-model="input1">
    3. <template slot="prepend">Http://</template>
    4. </el-input>
    5. </div>
    6. <div style="margin-top: 15px;">
    7. <el-input placeholder="请输入内容" v-model="input2">
    8. <template slot="append">.com</template>
    9. </el-input>
    10. </div>
    11. <div style="margin-top: 15px;">
    12. <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
    13. <el-select v-model="select" slot="prepend" placeholder="请选择">
    14. <el-option label="餐厅名" value="1"></el-option>
    15. <el-option label="订单号" value="2"></el-option>
    16. <el-option label="用户电话" value="3"></el-option>
    17. </el-select>
    18. <el-button slot="append" icon="el-icon-search"></el-button>
    19. </el-input>
    20. </div>
    21. <style>
    22. .el-select .el-input {
    23. width: 130px;
    24. }
    25. .input-with-select .el-input-group__prepend {
    26. background-color: #fff;
    27. }
    28. </style>
    29. <script>
    30. export default {
    31. data() {
    32. return {
    33. input1: '',
    34. input2: '',
    35. input3: '',
    36. select: ''
    37. }
    38. }
    39. }
    40. </script>

    尺寸

    Input 输入框 - 图9

    可通过 size 属性指定输入框的尺寸,除了默认的大小外,还提供了 large、small 和 mini 三种尺寸。

    1. <div class="demo-input-size">
    2. <el-input
    3. placeholder="请输入内容"
    4. suffix-icon="el-icon-date"
    5. v-model="input1">
    6. </el-input>
    7. <el-input
    8. size="medium"
    9. placeholder="请输入内容"
    10. suffix-icon="el-icon-date"
    11. v-model="input2">
    12. </el-input>
    13. <el-input
    14. size="small"
    15. placeholder="请输入内容"
    16. suffix-icon="el-icon-date"
    17. v-model="input3">
    18. </el-input>
    19. <el-input
    20. size="mini"
    21. placeholder="请输入内容"
    22. suffix-icon="el-icon-date"
    23. v-model="input4">
    24. </el-input>
    25. </div>
    26. <script>
    27. export default {
    28. data() {
    29. return {
    30. input1: '',
    31. input2: '',
    32. input3: '',
    33. input4: ''
    34. }
    35. }
    36. }
    37. </script>

    带输入建议

    根据输入内容提供对应的输入建议

    Input 输入框 - 图10

    autocomplete 是一个可带输入建议的输入框组件,fetch-suggestions 是一个返回输入建议的方法属性,如 querySearch(queryString, cb),在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。

    1. <el-row class="demo-autocomplete">
    2. <el-col :span="12">
    3. <div class="sub-title">激活即列出输入建议</div>
    4. <el-autocomplete
    5. class="inline-input"
    6. v-model="state1"
    7. :fetch-suggestions="querySearch"
    8. placeholder="请输入内容"
    9. @select="handleSelect"
    10. ></el-autocomplete>
    11. </el-col>
    12. <el-col :span="12">
    13. <div class="sub-title">输入后匹配输入建议</div>
    14. <el-autocomplete
    15. class="inline-input"
    16. v-model="state2"
    17. :fetch-suggestions="querySearch"
    18. placeholder="请输入内容"
    19. :trigger-on-focus="false"
    20. @select="handleSelect"
    21. ></el-autocomplete>
    22. </el-col>
    23. </el-row>
    24. <script>
    25. export default {
    26. data() {
    27. return {
    28. restaurants: [],
    29. state1: '',
    30. state2: ''
    31. };
    32. },
    33. methods: {
    34. querySearch(queryString, cb) {
    35. var restaurants = this.restaurants;
    36. var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
    37. // 调用 callback 返回建议列表的数据
    38. cb(results);
    39. },
    40. createFilter(queryString) {
    41. return (restaurant) => {
    42. return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
    43. };
    44. },
    45. loadAll() {
    46. return [
    47. { "value": "三全鲜食(北新泾店)", "address": "长宁区新渔路144号" },
    48. { "value": "Hot honey 首尔炸鸡(仙霞路)", "address": "上海市长宁区淞虹路661号" },
    49. { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
    50. { "value": "泷千家(天山西路店)", "address": "天山西路438号" },
    51. { "value": "胖仙女纸杯蛋糕(上海凌空店)", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
    52. { "value": "贡茶", "address": "上海市长宁区金钟路633号" },
    53. { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
    54. { "value": "茶芝兰(奶茶,手抓饼)", "address": "上海市普陀区同普路1435号" },
    55. { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },
    56. { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },
    57. { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },
    58. { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },
    59. { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F,2383弄62号1F" },
    60. { "value": "浮生若茶(凌空soho店)", "address": "上海长宁区金钟路968号9号楼地下一层" },
    61. { "value": "NONO JUICE 鲜榨果汁", "address": "上海市长宁区天山西路119号" },
    62. { "value": "CoCo都可(北新泾店)", "address": "上海市长宁区仙霞西路" },
    63. { "value": "快乐柠檬(神州智慧店)", "address": "上海市长宁区天山西路567号1层R117号店铺" },
    64. { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
    65. { "value": "猫山王(西郊百联店)", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
    66. { "value": "枪会山", "address": "上海市普陀区棕榈路" },
    67. { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },
    68. { "value": "钱记", "address": "上海市长宁区天山西路" },
    69. { "value": "壹杯加", "address": "上海市长宁区通协路" },
    70. { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢(B幢)第01层第1-02A单元" },
    71. { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },
    72. { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },
    73. { "value": "鲜果榨汁(金沙江路和美广店)", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },
    74. { "value": "开心丽果(缤谷店)", "address": "上海市长宁区威宁路天山路341号" },
    75. { "value": "超级鸡车(丰庄路店)", "address": "上海市嘉定区丰庄路240号" },
    76. { "value": "妙生活果园(北新泾店)", "address": "长宁区新渔路144号" },
    77. { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },
    78. { "value": "凡仔汉堡(老真北路店)", "address": "上海市普陀区老真北路160号" },
    79. { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },
    80. { "value": "蜀香源麻辣香锅(剑河路店)", "address": "剑河路443-1" },
    81. { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },
    82. { "value": "饭典*新简餐(凌空SOHO店)", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },
    83. { "value": "焦耳·川式快餐(金钟路店)", "address": "上海市金钟路633号地下一层甲部" },
    84. { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },
    85. { "value": "浏阳蒸菜", "address": "天山西路430号" },
    86. { "value": "四海游龙(天山西路店)", "address": "上海市长宁区天山西路" },
    87. { "value": "樱花食堂(凌空店)", "address": "上海市长宁区金钟路968号15楼15-105室" },
    88. { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },
    89. { "value": "福荣祥烧腊(平溪路店)", "address": "上海市长宁区协和路福泉路255弄57-73号" },
    90. { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },
    91. { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },
    92. { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },
    93. { "value": "阳阳麻辣烫", "address": "天山西路389号" },
    94. { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }
    95. ];
    96. },
    97. handleSelect(item) {
    98. console.log(item);
    99. }
    100. },
    101. mounted() {
    102. this.restaurants = this.loadAll();
    103. }
    104. }
    105. </script>

    自定义模板

    可自定义输入建议的显示

    Input 输入框 - 图11

    使用scoped slot自定义输入建议的模板。该 scope 的参数为item,表示当前输入建议对象。

    1. <el-autocomplete
    2. popper-class="my-autocomplete"
    3. v-model="state"
    4. :fetch-suggestions="querySearch"
    5. placeholder="请输入内容"
    6. @select="handleSelect">
    7. <i
    8. class="el-icon-edit el-input__icon"
    9. slot="suffix"
    10. @click="handleIconClick">
    11. </i>
    12. <template slot-scope="{ item }">
    13. <div class="name">{{ item.value }}</div>
    14. <span class="addr">{{ item.address }}</span>
    15. </template>
    16. </el-autocomplete>
    17. <style>
    18. .my-autocomplete {
    19. li {
    20. line-height: normal;
    21. padding: 7px;
    22. .name {
    23. text-overflow: ellipsis;
    24. overflow: hidden;
    25. }
    26. .addr {
    27. font-size: 12px;
    28. color: #b4b4b4;
    29. }
    30. .highlighted .addr {
    31. color: #ddd;
    32. }
    33. }
    34. }
    35. </style>
    36. <script>
    37. export default {
    38. data() {
    39. return {
    40. restaurants: [],
    41. state: ''
    42. };
    43. },
    44. methods: {
    45. querySearch(queryString, cb) {
    46. var restaurants = this.restaurants;
    47. var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
    48. // 调用 callback 返回建议列表的数据
    49. cb(results);
    50. },
    51. createFilter(queryString) {
    52. return (restaurant) => {
    53. return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
    54. };
    55. },
    56. loadAll() {
    57. return [
    58. { "value": "三全鲜食(北新泾店)", "address": "长宁区新渔路144号" },
    59. { "value": "Hot honey 首尔炸鸡(仙霞路)", "address": "上海市长宁区淞虹路661号" },
    60. { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
    61. { "value": "泷千家(天山西路店)", "address": "天山西路438号" },
    62. { "value": "胖仙女纸杯蛋糕(上海凌空店)", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
    63. { "value": "贡茶", "address": "上海市长宁区金钟路633号" },
    64. { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
    65. { "value": "茶芝兰(奶茶,手抓饼)", "address": "上海市普陀区同普路1435号" },
    66. { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },
    67. { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },
    68. { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },
    69. { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },
    70. { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F,2383弄62号1F" },
    71. { "value": "浮生若茶(凌空soho店)", "address": "上海长宁区金钟路968号9号楼地下一层" },
    72. { "value": "NONO JUICE 鲜榨果汁", "address": "上海市长宁区天山西路119号" },
    73. { "value": "CoCo都可(北新泾店)", "address": "上海市长宁区仙霞西路" },
    74. { "value": "快乐柠檬(神州智慧店)", "address": "上海市长宁区天山西路567号1层R117号店铺" },
    75. { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
    76. { "value": "猫山王(西郊百联店)", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
    77. { "value": "枪会山", "address": "上海市普陀区棕榈路" },
    78. { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },
    79. { "value": "钱记", "address": "上海市长宁区天山西路" },
    80. { "value": "壹杯加", "address": "上海市长宁区通协路" },
    81. { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢(B幢)第01层第1-02A单元" },
    82. { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },
    83. { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },
    84. { "value": "鲜果榨汁(金沙江路和美广店)", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },
    85. { "value": "开心丽果(缤谷店)", "address": "上海市长宁区威宁路天山路341号" },
    86. { "value": "超级鸡车(丰庄路店)", "address": "上海市嘉定区丰庄路240号" },
    87. { "value": "妙生活果园(北新泾店)", "address": "长宁区新渔路144号" },
    88. { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },
    89. { "value": "凡仔汉堡(老真北路店)", "address": "上海市普陀区老真北路160号" },
    90. { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },
    91. { "value": "蜀香源麻辣香锅(剑河路店)", "address": "剑河路443-1" },
    92. { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },
    93. { "value": "饭典*新简餐(凌空SOHO店)", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },
    94. { "value": "焦耳·川式快餐(金钟路店)", "address": "上海市金钟路633号地下一层甲部" },
    95. { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },
    96. { "value": "浏阳蒸菜", "address": "天山西路430号" },
    97. { "value": "四海游龙(天山西路店)", "address": "上海市长宁区天山西路" },
    98. { "value": "樱花食堂(凌空店)", "address": "上海市长宁区金钟路968号15楼15-105室" },
    99. { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },
    100. { "value": "福荣祥烧腊(平溪路店)", "address": "上海市长宁区协和路福泉路255弄57-73号" },
    101. { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },
    102. { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },
    103. { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },
    104. { "value": "阳阳麻辣烫", "address": "天山西路389号" },
    105. { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }
    106. ];
    107. },
    108. handleSelect(item) {
    109. console.log(item);
    110. },
    111. handleIconClick(ev) {
    112. console.log(ev);
    113. }
    114. },
    115. mounted() {
    116. this.restaurants = this.loadAll();
    117. }
    118. }
    119. </script>

    远程搜索

    从服务端搜索数据

    Input 输入框 - 图12

    1. <el-autocomplete
    2. v-model="state"
    3. :fetch-suggestions="querySearchAsync"
    4. placeholder="请输入内容"
    5. @select="handleSelect"
    6. ></el-autocomplete>
    7. <script>
    8. export default {
    9. data() {
    10. return {
    11. restaurants: [],
    12. state: '',
    13. timeout: null
    14. };
    15. },
    16. methods: {
    17. loadAll() {
    18. return [
    19. { "value": "三全鲜食(北新泾店)", "address": "长宁区新渔路144号" },
    20. { "value": "Hot honey 首尔炸鸡(仙霞路)", "address": "上海市长宁区淞虹路661号" },
    21. { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
    22. { "value": "泷千家(天山西路店)", "address": "天山西路438号" },
    23. { "value": "胖仙女纸杯蛋糕(上海凌空店)", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
    24. { "value": "贡茶", "address": "上海市长宁区金钟路633号" },
    25. { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
    26. { "value": "茶芝兰(奶茶,手抓饼)", "address": "上海市普陀区同普路1435号" },
    27. { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },
    28. { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },
    29. { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },
    30. { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },
    31. { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F,2383弄62号1F" },
    32. { "value": "浮生若茶(凌空soho店)", "address": "上海长宁区金钟路968号9号楼地下一层" },
    33. { "value": "NONO JUICE 鲜榨果汁", "address": "上海市长宁区天山西路119号" },
    34. { "value": "CoCo都可(北新泾店)", "address": "上海市长宁区仙霞西路" },
    35. { "value": "快乐柠檬(神州智慧店)", "address": "上海市长宁区天山西路567号1层R117号店铺" },
    36. { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
    37. { "value": "猫山王(西郊百联店)", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
    38. { "value": "枪会山", "address": "上海市普陀区棕榈路" },
    39. { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },
    40. { "value": "钱记", "address": "上海市长宁区天山西路" },
    41. { "value": "壹杯加", "address": "上海市长宁区通协路" },
    42. { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢(B幢)第01层第1-02A单元" },
    43. { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },
    44. { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },
    45. { "value": "鲜果榨汁(金沙江路和美广店)", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },
    46. { "value": "开心丽果(缤谷店)", "address": "上海市长宁区威宁路天山路341号" },
    47. { "value": "超级鸡车(丰庄路店)", "address": "上海市嘉定区丰庄路240号" },
    48. { "value": "妙生活果园(北新泾店)", "address": "长宁区新渔路144号" },
    49. { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },
    50. { "value": "凡仔汉堡(老真北路店)", "address": "上海市普陀区老真北路160号" },
    51. { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },
    52. { "value": "蜀香源麻辣香锅(剑河路店)", "address": "剑河路443-1" },
    53. { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },
    54. { "value": "饭典*新简餐(凌空SOHO店)", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },
    55. { "value": "焦耳·川式快餐(金钟路店)", "address": "上海市金钟路633号地下一层甲部" },
    56. { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },
    57. { "value": "浏阳蒸菜", "address": "天山西路430号" },
    58. { "value": "四海游龙(天山西路店)", "address": "上海市长宁区天山西路" },
    59. { "value": "樱花食堂(凌空店)", "address": "上海市长宁区金钟路968号15楼15-105室" },
    60. { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },
    61. { "value": "福荣祥烧腊(平溪路店)", "address": "上海市长宁区协和路福泉路255弄57-73号" },
    62. { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },
    63. { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },
    64. { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },
    65. { "value": "阳阳麻辣烫", "address": "天山西路389号" },
    66. { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }
    67. ];
    68. },
    69. querySearchAsync(queryString, cb) {
    70. var restaurants = this.restaurants;
    71. var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
    72. clearTimeout(this.timeout);
    73. this.timeout = setTimeout(() => {
    74. cb(results);
    75. }, 3000 * Math.random());
    76. },
    77. createStateFilter(queryString) {
    78. return (state) => {
    79. return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
    80. };
    81. },
    82. handleSelect(item) {
    83. console.log(item);
    84. }
    85. },
    86. mounted() {
    87. this.restaurants = this.loadAll();
    88. }
    89. };
    90. </script>

    输入长度限制

    Input 输入框 - 图13

    maxlengthminlength 是原生属性,用来限制输入框的字符长度,其中字符长度是用 Javascript 的字符串长度统计的。对于类型为 texttextarea 的输入框,在使用 maxlength 属性限制最大输入长度的同时,可通过设置 show-word-limit 属性来展示字数统计。

    1. <el-input
    2. type="text"
    3. placeholder="请输入内容"
    4. v-model="text"
    5. maxlength="10"
    6. show-word-limit
    7. >
    8. </el-input>
    9. <div style="margin: 20px 0;"></div>
    10. <el-input
    11. type="textarea"
    12. placeholder="请输入内容"
    13. v-model="textarea"
    14. maxlength="30"
    15. show-word-limit
    16. >
    17. </el-input>
    18. <script>
    19. export default {
    20. data() {
    21. return {
    22. text: '',
    23. textarea: ''
    24. }
    25. }
    26. }
    27. </script>

    Input Attributes

    参数说明类型可选值默认值
    type类型stringtext,textarea 和其他 原生 input 的 type 值text
    value / v-model绑定值string / number
    maxlength原生属性,最大输入长度number
    minlength原生属性,最小输入长度number
    show-word-limit是否显示输入字数统计,只在 type = "text"type = "textarea" 时有效booleanfalse
    placeholder输入框占位文本string
    clearable是否可清空booleanfalse
    show-password是否显示切换密码图标booleanfalse
    disabled禁用booleanfalse
    size输入框尺寸,只在 type!="textarea" 时有效stringmedium / small / mini
    prefix-icon输入框头部图标string
    suffix-icon输入框尾部图标string
    rows输入框行数,只对 type="textarea" 有效number2
    autosize自适应内容高度,只对 type="textarea" 有效,可传入对象,如,{ minRows: 2, maxRows: 6 }boolean / objectfalse
    autocomplete原生属性,自动补全stringon, offoff
    auto-complete下个主版本弃用stringon, offoff
    name原生属性string
    readonly原生属性,是否只读booleanfalse
    max原生属性,设置最大值
    min原生属性,设置最小值
    step原生属性,设置输入字段的合法数字间隔
    resize控制是否能被用户缩放stringnone, both, horizontal, vertical
    autofocus原生属性,自动获取焦点booleantrue, falsefalse
    form原生属性string
    label输入框关联的label文字string
    tabindex输入框的tabindexstring--
    validate-event输入时是否触发表单的校验boolean-true

    Input Slots

    name说明
    prefix输入框头部内容,只对 type="text" 有效
    suffix输入框尾部内容,只对 type="text" 有效
    prepend输入框前置内容,只对 type="text" 有效
    append输入框后置内容,只对 type="text" 有效

    Input Events

    事件名称说明回调参数
    blur在 Input 失去焦点时触发(event: Event)
    focus在 Input 获得焦点时触发(event: Event)
    change在 Input 值改变时触发(value: string | number)
    clear在点击由 clearable 属性生成的清空按钮时触发

    Input Methods

    方法名说明参数
    focus使 input 获取焦点
    blur使 input 失去焦点
    select选中 input 中的文字

    Autocomplete Attributes

    参数说明类型可选值默认值
    placeholder输入框占位文本string
    disabled禁用booleanfalse
    value-key输入建议对象中用于显示的键名stringvalue
    value必填值,输入绑定值string
    debounce获取输入建议的去抖延时number300
    placement菜单弹出位置stringtop / top-start / top-end / bottom / bottom-start / bottom-endbottom-start
    fetch-suggestions返回输入建议的方法,仅当你的输入建议数据 resolve 时,通过调用 callback(data:[]) 来返回它Function(queryString, callback)
    popper-classAutocomplete 下拉列表的类名string
    trigger-on-focus是否在输入框 focus 时显示建议列表booleantrue
    name原生属性string
    select-when-unmatched在输入没有任何匹配建议的情况下,按下回车是否触发 select 事件booleanfalse
    label输入框关联的label文字string
    prefix-icon输入框头部图标string
    suffix-icon输入框尾部图标string
    hide-loading是否隐藏远程加载时的加载图标booleanfalse
    popper-append-to-body是否将下拉列表插入至 body 元素。在下拉列表的定位出现问题时,可将该属性设置为 falseboolean-true
    highlight-first-item是否默认突出显示远程搜索建议中的第一项booleanfalse

    Autocomplete Slots

    name说明
    prefix输入框头部内容
    suffix输入框尾部内容
    prepend输入框前置内容
    append输入框后置内容

    Autocomplete Scoped Slot

    name说明
    自定义输入建议,参数为 { item }

    Autocomplete Events

    事件名称说明回调参数
    select点击选中建议项时触发选中建议项

    Autocomplete Methods

    方法名说明参数
    focus使 input 获取焦点-