Skip to content

E
Element
Commit 16b58dc1 authored by cinwell.li's avatar cinwell.li Committed by GitHub
Browse files
Options

Merge pull request #113 from eleme/fix-autocomplete 

fixed autocomplete
parents 7b860de9 a0bbda71
Show whitespace changes
Inline Side-by-side
Showing with 574 additions and 516 deletions
examples/docs/autocomplete.md deleted 100644 → 0
View file @ 7b860de9
<style>
.demo-box {
.el-autocomplete {
width: 180px;
}
.my-suggestions-item {
& .remark {
float: right;
font-size: 13px;
}
}
}
</style>
<script>
var Vue = require('vue');
Vue.component('my-item', {
functional: true,
render: function (h, ctx) {
var item = ctx.props.item;
return h('li', {
attrs: { class: 'my-suggestions-item' }
}, [
h('span', { attrs: { class: 'label' } }, ['选项' + ctx.props.index]),
h('span', { attrs: { class: 'remark' } }, [item.display])
]);
},
props: {
item: {
type: Object,
required: true
},
index: {
type: Number
}
}
});
export default {
data() {
return {
states: [],
state1: '',
state2: '',
state3: '',
state4: '',
timeout: null
}
},
methods: {
loadAll() {
var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
Wisconsin, Wyoming';
var result = [];
allStates.split(/, +/g).forEach((state) => {
if (state) {
result.push({
value: state.toLowerCase(),
display: state
});
}
});
return result;
},
querySearch(queryString, cb) {
var states = this.states;
var results = queryString ? states.filter(this.createStateFilter(queryString)) : states;
cb(results);
},
querySearchAsync(queryString, cb) {
var states = this.states;
var results = queryString ? states.filter(this.createStateFilter(queryString)) : states;
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
cb(results);
}, 3000 * Math.random());
},
createStateFilter(queryString) {
return (state) => {
return (state.value.indexOf(queryString.toLowerCase()) === 0);
};
}
},
mounted() {
this.states = this.loadAll();
}
};
</script>
## 基础使用
<div class="demo-box">
<el-autocomplete
v-model="state1"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
></el-autocomplete>
</div>
```html
<template>
<el-autocomplete
v-model="state1"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
></el-autocomplete>
</template>
<script>
export default {
data() {
return {
states: [],
state1: ''
}
},
methods: {
loadAll() {
var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
Wisconsin, Wyoming';
var result = [];
allStates.split(/, +/g).forEach((state) => {
if (state) {
result.push({
value: state.toLowerCase(),
display: state
});
}
});
return result;
},
querySearch(queryString, callback) {
var states = this.states;
var results = queryString ? states.filter(this.createStateFilter(queryString)) : states;
callback(results);
},
createStateFilter(queryString) {
return (state) => {
return (state.value.indexOf(queryString.toLowerCase()) === 0);
};
}
},
mounted() {
this.states = this.loadAll();
}
};
</script>
```
## 自定义模板
<div class="demo-box">
<el-autocomplete
v-model="state2"
:fetch-suggestions="querySearch"
custom-item="my-item"
placeholder="请输入内容"
></el-autocomplete>
</div>
```html
<el-autocomplete
v-model="state2"
:fetch-suggestions="querySearch"
custom-item="my-item"
placeholder="请输入内容"
></el-autocomplete>
<script>
var Vue = require('vue');
Vue.component('my-item', {
functional: true,
render: function (h, ctx) {
var item = ctx.props.item;
return h('li', {
attrs: { class: 'my-suggestions-item' }
}, [
h('span', { attrs: { class: 'label' } }, ['选项' + ctx.props.index]),
h('span', { attrs: { class: 'remark' } }, [item.display])
]);
},
props: {
item: {
type: Object,
required: true
},
index: {
type: Number
}
}
});
export default {
data() {
return {
states: [],
state2: ''
}
},
methods: {
loadAll() {
var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
Wisconsin, Wyoming';
var result = [];
allStates.split(/, +/g).forEach((state) => {
if (state) {
result.push({
value: state.toLowerCase(),
display: state
});
}
});
return result;
},
querySearch(queryString, cb) {
var states = this.states;
var results = queryString ? states.filter(this.createStateFilter(queryString)) : states;
cb(results);
},
createStateFilter(queryString) {
return (state) => {
return (state.value.indexOf(queryString.toLowerCase()) === 0);
};
}
},
mounted() {
this.states = this.loadAll();
}
};
</script>
```
## 服务端数据
<div class="demo-box">
<el-autocomplete
v-model="state3"
placeholder = "请输入内容"
:fetch-Suggestions="querySearchAsync"
></el-autocomplete>
</div>
```html
<template>
<el-autocomplete
v-model="state3"
placeholder = "请输入内容"
:fetch-Suggestions="querySearchAsync"
></el-autocomplete>
</template>
<script>
export default {
data() {
return {
state3: '',
states: []
}
},
methods: {
loadAll() {
var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
Wisconsin, Wyoming';
var result = [];
allStates.split(/, +/g).forEach((state) => {
if (state) {
result.push({
value: state.toLowerCase(),
display: state
});
}
});
return result;
},
querySearchAsync(query, callback) {
var states = this.states;
var results = query ? states.filter(this.createStateFilter(query)) : states;
if (!query) { return []; }
setTimeout(() => {
callback(results);
}, 3000 * Math.random());
},
createStateFilter(query) {
return (state) => {
return (state.value.indexOf(query.toLowerCase()) === 0);
};
}
},
ready() {
this.states = this.loadAll();
}
};
</script>
```
## API
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| placeholder | 输入框占位文本 | string | | |
| disabled | 禁用 | boolean | true, false | false |
| value | 必填值输入绑定值 | string | | |
| showOnUpDown | 是否通过键盘上下键控制建议列表 | boolean | | |
| fetch-suggestions | 返回输入建议的方法，组件内部通过调用该方法来获得输入建议的数据，在该方法中，仅当你的输入建议数据 resolve 时再通过调用 callback(data:[]) 来返回它 | Function(queryString, callback) | | |
examples/docs/input.md
View file @ 16b58dc1
<script> <script>
module.exports = { var Vue = require('vue');
Vue.component('my-item', {
functional: true,
render: function (h, ctx) {
var item = ctx.props.item;
return h('li', ctx.data, [
h('div', { attrs: { class: 'name' } }, [item.value]),
h('span', { attrs: { class: 'addr' } }, [item.address])
]);
},
props: {
item: { type: Object, required: true }
}
});
export default {
data() { data() {
return { return {
input: '', input: '',
...@@ -9,15 +23,103 @@ ...@@ -9,15 +23,103 @@
input4: '', input4: '',
input5: '', input5: '',
input6: '', input6: '',
input7: '',
input8: '',
input9: '',
textarea: '', textarea: '',
select: '' select: '',
state1: '',
state2: '',
state3: '',
state4: ''
}; };
},
methods: {
loadAll() {
return [
{ "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
{ "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
{ "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
{ "value": "泷千家(天山西路店)", "address": "天山西路438号" },
{ "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
{ "value": "贡茶", "address": "上海市长宁区金钟路633号" },
{ "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
{ "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },
{ "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },
{ "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },
{ "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },
{ "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },
{ "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },
{ "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },
{ "value": "NONO JUICE 鲜榨果汁", "address": "上海市长宁区天山西路119号" },
{ "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },
{ "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },
{ "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
{ "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
{ "value": "枪会山", "address": "上海市普陀区棕榈路" },
{ "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },
{ "value": "钱记", "address": "上海市长宁区天山西路" },
{ "value": "壹杯加", "address": "上海市长宁区通协路" },
{ "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },
{ "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },
{ "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },
{ "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },
{ "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },
{ "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },
{ "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },
{ "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },
{ "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },
{ "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },
{ "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },
{ "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },
{ "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },
{ "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },
{ "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },
{ "value": "浏阳蒸菜", "address": "天山西路430号" },
{ "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },
{ "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },
{ "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },
{ "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },
{ "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },
{ "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },
{ "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },
{ "value": "阳阳麻辣烫", "address": "天山西路389号" },
{ "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }
];
},
querySearch(queryString, cb) {
var restaurants = this.restaurants;
var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
cb(results);
},
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.indexOf(queryString.toLowerCase()) === 0);
};
}
},
mounted() {
this.restaurants = this.loadAll();
} }
}; };
</script> </script>
<style> <style>
.demo-box.demo-input { .demo-input {
.text {
font-size: 14px;
color: #8492a6;
}
.el-input { .el-input {
width: 180px; width: 180px;
...@@ -35,118 +137,117 @@ ...@@ -35,118 +137,117 @@
.el-input-group + .el-input-group { .el-input-group + .el-input-group {
margin-top: 15px; margin-top: 15px;
} }
.el-autocomplete {
display: inline-block;
}
.inline-input {
.el-input {
display: inline-block;
vertical-align: top;
margin: 10px 5px;
}
.el-autocomplete {
margin: 10px 0 0;
.el-input {
margin: 0;
}
}
}
.tac {
text-align: center;
}
.el-row.border-grid {
.el-col:not(:last-child) {
border-right: 1px solid rgba(224,230,237,0.50);
}
}
.my-autocomplete {
li {
line-height: normal;
padding: 7px *;
.name {
text-overflow: ellipsis;
overflow: hidden;
}
.addr {
font-size: 12px;
color: #b4b4b4;
}
}
}
} }
</style> </style>
## 基本用法 ## Input 输入框
<div class="demo-box demo-input"> 通过鼠标或键盘输入字符
<el-input
placeholder="请输入内容" ### 基础用法
:value.sync="input"
name="user">
</el-input>
<el-input
placeholder="请输入内容"
:value.sync="textarea"
name="desc"
type="textarea">
</el-input>
</div>
::: demo
```html ```html
<el-input <el-input
placeholder="请输入内容" placeholder="请输入内容"
:value.sync="input" v-model="input">
name="user">
</el-input>
<el-input
placeholder="请输入内容"
:value.sync="textarea"
name="desc"
type="textarea">
</el-input> </el-input>
``` ```
:::
## 禁用状态
<div class="demo-box demo-input"> ### 禁用状态
<el-input
:disabled="true"
placeholder="请输入内容"
:value.sync="input1">
</el-input>
</div>
::: demo 通过 `disabled` 属性指定是否禁用 input 组件
```html ```html
<el-input <el-input
:disabled="true"
placeholder="请输入内容" placeholder="请输入内容"
:value.sync="input1"> v-model="input1"
:disabled="true">
</el-input> </el-input>
``` ```
:::
## Input 图标 ### 带 icon 的输入框
<div class="demo-box demo-input"> 带有图标标记输入类型
<el-input
placeholder="请选择日期"
icon="time"
:value.sync="input1">
</el-input>
</div>
::: demo 可以通过 `icon` 属性在 input 组件尾部增加显示图标。
```html ```html
<el-input <el-input
placeholder="请选择日期" placeholder="请选择日期"
icon="time" icon="time"
:value.sync="input1"> v-model="input2">
</el-input> </el-input>
``` ```
:::
## Input Group ### 文本域
### 后置元素 可调整大小，用于输入多行文本信息
<div class="demo-box demo-input">
<el-input placeholder="请输入内容" :value.sync="input2">
<template slot="append">.com</template>
</el-input>
</div>
::: demo 通过将 `type` 属性的值指定为 textarea。
```html ```html
<el-input placeholder="请输入内容" :value.sync="input2"> <el-input
<template slot="append">.com</template> type="textarea"
v-model="textarea">
</el-input> </el-input>
``` ```
:::
### 前置元素 ### 复合型输入框
<div class="demo-box demo-input">
<el-input placeholder="请输入内容" :value.sync="input2">
<template slot="prepend">Http://</template>
</el-input>
</div>
可前置或后置元素，一般为标签或按钮
::: demo 可通过 slot 来指定在 input 中前置或者后置内容。
```html ```html
<el-input placeholder="请输入内容" :value.sync="input2"> <el-input placeholder="请输入内容" v-model="input3">
<template slot="prepend">Http://</template> <template slot="prepend">Http://</template>
</el-input> </el-input>
``` <el-input placeholder="请输入内容" v-model="input4">
<template slot="append">.com</template>
### 前置和后置元素 </el-input>
<div class="demo-box demo-input"> <el-input placeholder="请输入内容" v-model="input5" style="width: 300px;">
<el-input placeholder="请输入内容" :value.sync="input2" style="width: 300px;">
<el-select v-model="select" slot="prepend" :width="100">
<el-option label="餐厅名" value="1"></el-option>
<el-option label="订单号" value="2"></el-option>
<el-option label="用户电话" value="3"></el-option>
</el-select>
<el-button slot="append" icon="search"></el-button>
</el-input>
</div>
```html
<el-input placeholder="请输入内容" :value.sync="input2" style="width: 300px;">
<el-select v-model="select" slot="prepend" :width="100"> <el-select v-model="select" slot="prepend" :width="100">
<el-option label="餐厅名" value="1"></el-option> <el-option label="餐厅名" value="1"></el-option>
<el-option label="订单号" value="2"></el-option> <el-option label="订单号" value="2"></el-option>
...@@ -155,81 +256,370 @@ ...@@ -155,81 +256,370 @@
<el-button slot="append" icon="search"></el-button> <el-button slot="append" icon="search"></el-button>
</el-input> </el-input>
``` ```
:::
## 尺寸 ### 尺寸
### large
<div class="demo-box demo-input"> ::: demo 可通过 `size` 属性指定输入框的尺寸，除了默认的大小外，还提供了 large、small 和 mini 三种尺寸。
```html
<div class="inline-input">
<el-input <el-input
size="large" size="large"
placeholder="请输入内容" placeholder="请输入内容"
:value.sync="input4"> v-model="input6">
</el-input> </el-input>
</div>
### normal
<div class="demo-box demo-input">
<el-input <el-input
placeholder="请输入内容" placeholder="请输入内容"
:value.sync="input4"> v-model="input7">
</el-input> </el-input>
</div>
### small
<div class="demo-box demo-input">
<el-input <el-input
size="small" size="small"
placeholder="请输入内容" placeholder="请输入内容"
:value.sync="input4"> v-model="input8">
</el-input> </el-input>
</div>
### mini
<div class="demo-box demo-input">
<el-input <el-input
size="mini" size="mini"
placeholder="请输入内容" placeholder="请输入内容"
:value.sync="input4"> v-model="input9">
</el-input> </el-input>
</div> </div>
```
:::
### 带输入建议
根据输入内容提供对应的输入建议
::: demo autocomplete 是一个可带输入建议的输入框组件，`fetch-suggestions` 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。
```html ```html
<el-input <el-row class="inline-input border-grid">
size="large" <el-col :span="12" class="tac">
<div class="text">激活即列出输入建议</div>
<el-autocomplete
v-model="state1"
:fetch-suggestions="querySearch"
placeholder="请输入内容" placeholder="请输入内容"
:value.sync="input4"> ></el-autocomplete>
</el-input> </el-col>
<el-input <el-col :span="12" class="tac">
<div class="text">输入后匹配输入建议</div>
<el-autocomplete
v-model="state2"
:fetch-suggestions="querySearch"
placeholder="请输入内容" placeholder="请输入内容"
:value.sync="input4"> :trigger-on-focus="false"
</el-input> ></el-autocomplete>
<el-input </el-col>
size="small" </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;
// 调用 callback 返回建议列表的数据
cb(results);
},
createFilter(queryString) {
return (restaurant) => {
return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);
};
},
loadAll() {
return [
{ "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
{ "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
{ "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
{ "value": "泷千家(天山西路店)", "address": "天山西路438号" },
{ "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
{ "value": "贡茶", "address": "上海市长宁区金钟路633号" },
{ "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
{ "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },
{ "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },
{ "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },
{ "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },
{ "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },
{ "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },
{ "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },
{ "value": "NONO JUICE 鲜榨果汁", "address": "上海市长宁区天山西路119号" },
{ "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },
{ "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },
{ "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
{ "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
{ "value": "枪会山", "address": "上海市普陀区棕榈路" },
{ "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },
{ "value": "钱记", "address": "上海市长宁区天山西路" },
{ "value": "壹杯加", "address": "上海市长宁区通协路" },
{ "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },
{ "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },
{ "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },
{ "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },
{ "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },
{ "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },
{ "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },
{ "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },
{ "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },
{ "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },
{ "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },
{ "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },
{ "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },
{ "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },
{ "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },
{ "value": "浏阳蒸菜", "address": "天山西路430号" },
{ "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },
{ "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },
{ "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },
{ "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },
{ "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },
{ "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },
{ "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },
{ "value": "阳阳麻辣烫", "address": "天山西路389号" },
{ "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }
];
}
},
mounted() {
this.restaurants = this.loadAll();
}
}
</script>
```
:::
### 自定义模板
可自定义输入建议的显示
::: demo
```html
<el-autocomplete
class="my-autocomplete"
v-model="state3"
:fetch-suggestions="querySearch"
custom-item="my-item"
placeholder="请输入内容" placeholder="请输入内容"
:value.sync="input4"> ></el-autocomplete>
</el-input>
<el-input <script>
size="mini" var Vue = require('vue');
Vue.component('my-item', {
functional: true,
render: function (h, ctx) {
var item = ctx.props.item;
return h('li', ctx.data, [
h('div', { attrs: { class: 'name' } }, [item.value]),
h('span', { attrs: { class: 'addr' } }, [item.address])
]);
},
props: {
item: { type: Object, required: true }
}
});
export default {
data() {
return {
restaurants: [],
state3: ''
};
},
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.indexOf(queryString.toLowerCase()) === 0);
};
},
loadAll() {
return [
{ "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
{ "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
{ "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
{ "value": "泷千家(天山西路店)", "address": "天山西路438号" },
{ "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
{ "value": "贡茶", "address": "上海市长宁区金钟路633号" },
{ "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
{ "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },
{ "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },
{ "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },
{ "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },
{ "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },
{ "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },
{ "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },
{ "value": "NONO JUICE 鲜榨果汁", "address": "上海市长宁区天山西路119号" },
{ "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },
{ "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },
{ "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
{ "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
{ "value": "枪会山", "address": "上海市普陀区棕榈路" },
{ "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },
{ "value": "钱记", "address": "上海市长宁区天山西路" },
{ "value": "壹杯加", "address": "上海市长宁区通协路" },
{ "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },
{ "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },
{ "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },
{ "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },
{ "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },
{ "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },
{ "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },
{ "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },
{ "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },
{ "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },
{ "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },
{ "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },
{ "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },
{ "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },
{ "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },
{ "value": "浏阳蒸菜", "address": "天山西路430号" },
{ "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },
{ "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },
{ "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },
{ "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },
{ "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },
{ "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },
{ "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },
{ "value": "阳阳麻辣烫", "address": "天山西路389号" },
{ "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }
];
}
},
mounted() {
this.restaurants = this.loadAll();
}
}
</script>
```
:::
### 远程搜索
从服务端搜索数据
::: demo
```html
<el-autocomplete
v-model="state4"
:fetch-suggestions="querySearchAsync"
placeholder="请输入内容" placeholder="请输入内容"
:value.sync="input4"> ></el-autocomplete>
</el-input> <script>
export default {
data() {
return {
restaurants: [],
state4: '',
timeout: null
};
},
methods: {
loadAll() {
return [
{ "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
{ "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
{ "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
{ "value": "泷千家(天山西路店)", "address": "天山西路438号" },
{ "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
{ "value": "贡茶", "address": "上海市长宁区金钟路633号" },
{ "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
{ "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },
{ "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },
{ "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },
{ "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },
{ "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },
{ "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },
{ "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },
{ "value": "NONO JUICE 鲜榨果汁", "address": "上海市长宁区天山西路119号" },
{ "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },
{ "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },
{ "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
{ "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
{ "value": "枪会山", "address": "上海市普陀区棕榈路" },
{ "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },
{ "value": "钱记", "address": "上海市长宁区天山西路" },
{ "value": "壹杯加", "address": "上海市长宁区通协路" },
{ "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },
{ "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },
{ "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },
{ "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },
{ "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },
{ "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },
{ "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },
{ "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },
{ "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },
{ "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },
{ "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },
{ "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },
{ "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },
{ "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },
{ "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },
{ "value": "浏阳蒸菜", "address": "天山西路430号" },
{ "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },
{ "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },
{ "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },
{ "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },
{ "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },
{ "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },
{ "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },
{ "value": "阳阳麻辣烫", "address": "天山西路389号" },
{ "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }
];
},
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.indexOf(queryString.toLowerCase()) === 0);
};
}
},
mounted() {
this.restaurants = this.loadAll();
}
};
</script>
``` ```
:::
### Input API
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| type | 同原生的 input 的 type 属性，如果为textarea则显示为extarea | string | — | — |
| value | 绑定值 | string, number | — | — |
| maxlength | 最大输入长度 | number | — | — |
| minlength | 最小输入长度 | number | — | — |
| placeholder | 输入框占位文本 | string | — | — |
| disabled | 禁用 | boolean | — | false |
| size | 输入框尺寸 | string | large, small, mini | — |
| icon | 输入框尾部图标 | string | — | — |
| number | 指定model值为number类型 | boolean | — | false |
### Autocomplete API
## API
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- | |------------- |---------------- |---------------- |---------------------- |-------- |
| type | 同原生的 input 的 type 属性，如果为textarea则显示为extarea | string | | | | placeholder | 输入框占位文本 | string | — | — |
| name | 同原生的 input 的 name 属性 | string | | | | disabled | 禁用 | boolean | — | false |
| model | 绑定值 | string, number | | | | value | 必填值输入绑定值 | string | — | — |
| maxlength | 最大输入长度 | number | | | | custom-item | 通过该参数指定自定义的输入建议列表项的组件名 | string | — | — |
| minlength | 最小输入长度 | number | | | | fetch-suggestions | 返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它 | Function(queryString, callback) | — | — |
| placeholder | 输入框占位文本 | string | | |
| disabled | 禁用 | boolean | true, false | false |
| readonly | 禁用 | boolean | true, false | false |
| size | 输入框尺寸 | string | large, small, mini | |
| icon | 输入框尾部图标 | string | | |
| number | 指定model值为number类型 | boolean | | false |
examples/nav.config.json
View file @ 16b58dc1
...@@ -137,11 +137,6 @@ ...@@ -137,11 +137,6 @@
"title": "Form 表单", "title": "Form 表单",
"description": "一个多功能的并带有字段验证的表单组件" "description": "一个多功能的并带有字段验证的表单组件"
}, },
{
"path": "/autocomplete",
"name": "自动完成 (autocomplete)",
"title": "Autocomplete 自动完成"
},
{ {
"path": "/rate", "path": "/rate",
"name": "评分 (rate)", "name": "评分 (rate)",
......
packages/autocomplete/src/autocomplete.vue
View file @ 16b58dc1
...@@ -13,35 +13,31 @@ ...@@ -13,35 +13,31 @@
></el-input> ></el-input>
<transition name="md-fade-bottom"> <transition name="md-fade-bottom">
<ul <ul
v-show="suggestionVisible && !loading && suggestions.length > 0" v-if="suggestionVisible"
class="el-autocomplete__suggestions" class="el-autocomplete__suggestions"
:class="{ 'is-loading': loading }"
ref="suggestions" ref="suggestions"
> >
<li v-if="loading"><i class="el-icon-loading"></i></li>
<template v-for="(item, index) in suggestions" v-else>
<li <li
v-if="!customItem" v-if="!customItem"
:class="{'highlighted': highlightedIndex === index}" :class="{'highlighted': highlightedIndex === index}"
@click="select(index)" @click="select(index)"
v-for="(item, index) in suggestions"> >
{{item.display}} {{item.value}}
</li> </li>
<component <component
v-else v-else
:class="{'highlighted': highlightedIndex === index}"
@click="select(index)"
:is="customItem" :is="customItem"
@click.native="select(index)"
v-for="(item, index) in suggestions"
:item="item" :item="item"
:index="index"> :index="index">
</component> </component>
</template>
</ul> </ul>
</transition> </transition>
<transition name="md-fade-bottom">
<div
v-show="suggestionVisible && loading"
class="el-autocomplete__suggestions is-loading"
>
<i class="el-icon-loading"></i>
</div>
</transition>
</div> </div>
</template> </template>
<script> <script>
...@@ -62,7 +58,7 @@ ...@@ -62,7 +58,7 @@
name: String, name: String,
value: String, value: String,
fetchSuggestions: Function, fetchSuggestions: Function,
triggerOnfocus: { triggerOnFocus: {
type: Boolean, type: Boolean,
default: true default: true
}, },
...@@ -72,7 +68,6 @@ ...@@ -72,7 +68,6 @@
return { return {
suggestions: [], suggestions: [],
suggestionVisible: false, suggestionVisible: false,
inputFocusing: false,
loading: false, loading: false,
highlightedIndex: -1 highlightedIndex: -1
}; };
...@@ -83,60 +78,59 @@ ...@@ -83,60 +78,59 @@
this.showSuggestions(value); this.showSuggestions(value);
}, },
handleFocus() { handleFocus() {
if (this.triggerOnfocus) { if (this.triggerOnFocus) {
this.showSuggestions(this.value); this.showSuggestions(this.value);
} }
}, },
handleBlur() { handleBlur() {
this.suggestionVisible = false; this.hideSuggestions();
}, },
select(index) { select(index) {
if (this.suggestions && this.suggestions[index]) { if (this.suggestions && this.suggestions[index]) {
this.$emit('input', this.suggestions[index].value); this.$emit('input', this.suggestions[index].value);
this.$nextTick(() => { this.$nextTick(() => {
this.suggestionVisible = false; this.hideSuggestions();
}); });
} }
}, },
hideSuggestions() {
this.suggestionVisible = false;
this.suggestions = [];
this.loading = false;
},
showSuggestions(value) { showSuggestions(value) {
this.suggestionVisible = true; this.suggestionVisible = true;
this.loading = true; this.loading = true;
this.fetchSuggestions(value, (suggestions) => { this.fetchSuggestions(value, (suggestions) => {
this.loading = false; this.loading = false;
if (Array.isArray(suggestions) && suggestions.length > 0) {
this.suggestions = suggestions; this.suggestions = suggestions;
});
},
getSuggestionElement(index) {
if (!this.suggestions || !this.suggestions[index]) {
return null;
} else { } else {
return this.$refs.suggestions.children[index]; this.hideSuggestions();
} }
});
}, },
highlight(index) { highlight(index) {
if (!this.suggestionVisible || this.loading) { return; }
if (index < 0) { if (index < 0) {
index = 0; index = 0;
} else if (index >= this.suggestions.length) { } else if (index >= this.suggestions.length) {
index = this.suggestions.length - 1; index = this.suggestions.length - 1;
} }
var elSelect = this.getSuggestionElement(index);
var elSuggestions = this.$refs.suggestions; var elSuggestions = this.$refs.suggestions;
var elSelect = elSuggestions.children[index];
var scrollTop = elSuggestions.scrollTop; var scrollTop = elSuggestions.scrollTop;
var offsetTop = elSelect.offsetTop; var offsetTop = elSelect.offsetTop;
if (offsetTop > (scrollTop + elSuggestions.clientHeight - 12)) { if (offsetTop + elSelect.scrollHeight > (scrollTop + elSuggestions.clientHeight)) {
elSuggestions.scrollTop += elSelect.scrollHeight; elSuggestions.scrollTop += elSelect.scrollHeight;
} }
if (offsetTop < scrollTop - 12) { if (offsetTop < scrollTop) {
elSuggestions.scrollTop -= elSelect.scrollHeight; elSuggestions.scrollTop -= elSelect.scrollHeight;
} }
this.highlightedIndex = index; this.highlightedIndex = index;
if (this.showOnUpDown) {
this.suggestionVisible = true;
}
} }
} }
}; };
......
packages/theme-default/src/autocomplete.css
View file @ 16b58dc1
...@@ -25,9 +25,14 @@ ...@@ -25,9 +25,14 @@
& li { & li {
list-style: none; list-style: none;
line-height: 36px; line-height: 36px;
padding: 0 27px 0 10px; padding: 0 10px;
margin: 0; margin: 0;
cursor: pointer; cursor: pointer;
color: #475669;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&.highlighted, &.highlighted,
&:hover { &:hover {
...@@ -47,6 +52,7 @@ ...@@ -47,6 +52,7 @@
} }
@when loading { @when loading {
li {
text-align: center; text-align: center;
height: 100px; height: 100px;
line-height: 100px; line-height: 100px;
...@@ -54,6 +60,11 @@ ...@@ -54,6 +60,11 @@
color: #999; color: #999;
@utils-vertical-center; @utils-vertical-center;
&:hover {
background-color: #fff;
}
}
& .el-icon-loading { & .el-icon-loading {
vertical-align: middle; vertical-align: middle;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment