https://github.com/lpreterite/iview-typeahead-input
typeahead component for iview
https://github.com/lpreterite/iview-typeahead-input
input iview typeahead vue
Last synced: 3 months ago
JSON representation
typeahead component for iview
- Host: GitHub
- URL: https://github.com/lpreterite/iview-typeahead-input
- Owner: lpreterite
- License: mit
- Created: 2017-05-03T02:30:48.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-06-06T04:03:22.000Z (almost 8 years ago)
- Last Synced: 2025-01-13T10:11:29.280Z (4 months ago)
- Topics: input, iview, typeahead, vue
- Language: JavaScript
- Size: 27.3 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# iview-typeahead-input
typeahead component for iview by [vue-typeahead](https://github.com/pespantelis/vue-typeahead)
## How to use
### setup
```
npm install lpreterite/iview-typeahead-input
```
### use
```
import Vue from 'vue';
import TypeaheadInput from 'iview-typeahead-input';
import 'iview/dist/styles/iview.css';
import axios from 'axios';
Vue.prototype.$http = axios;
Vue.component('TypeaheadInput', TypeaheadInput);
var vm = new Vue({
el: '#app',
data: function(){
return {
src: '//localhost:8080/typeahead',
input: '',
selection: {
id: 0,
name: ''
}
}
},
methods: {
convent(data){
return data;
}
}
})
```
### template
```
```
### props
`src`: 数据源url
`limit`: 显示item最大数
`minChars`: 响应字符数，输入字符超出时才响应请求
`autocomplete`: 自动补全
`paramName`: 请求时的字段名称，默认`keywords`(?keywords=xxx)
`itemTitleKey`: item显示字段，默认`name`
`selectedFirst`: 自动选择第一个，默认`true`
`convent`: 请求后的数据处理方法，可选
`v-model`: 绑定输入框内容
### methods
`clear()` 清除当前状态
### attr
`isEmpty`: 输入空是否为空
`isDirty`: 用于判断是否已选择
`hasItems`: 用于判断是否有数据返回
#### attr example
```
{
...
methods: {
test(){
console.log(this.refs.typeahead.isDirty);
}
}
...
}
```
## Build
```
npm i
npm run build
```
## Test
```
npm i
npm run mock
npm run dev
```