drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed #1286

Browse source
This commit is contained in:
梁灏 2017-07-14 13:58:34 +08:00
parent da17044c8d
commit 98bf25b3ce
4 changed files with 9555 additions and 13399 deletions
Download patch file Download diff file Expand all files Collapse all files

202
examples/routers/select.vue
View file

@ -1,166 +1,76 @@
<template>
<Row>
<i-col span="4">{{model}}</i-col>
<i-col span="8">
<i-select v-model="model" multiple @input="handleInput" filterable remote :remote-method="remoteMethod" :loading="loading" clearable>
<i-option v-for="option in options" :value="option.value" :key="new Date()">{{option.label}}</i-option>
</i-select>
</i-col>
<Col span="12" style="padding-right:10px">
<Select
v-model="model13"
filterable
remote
:remote-method="remoteMethod1"
:loading="loading1">
<Option v-for="option in options1" :value="option.value" :key="new Date()">{{option.label}}</Option>
</Select>
</Col>
<Col span="12">
<Select
v-model="model14"
multiple
filterable
remote
:remote-method="remoteMethod2"
:loading="loading2">
<Option v-for="option in options2" :value="option.value" :key="new Date()">{{option.label}}</Option>
</Select>
</Col>
</Row>
</template>
<script>
export default {
data () {
return {
// model: 'Alabama',
model: ['Alabama', 'Hawaii'],
options: [
],
list: [],
loading: false,
states: ["Al", "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"]
model13: '',
loading1: false,
options1: [],
model14: [],
loading2: false,
options2: [],
list: ['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'],
}
},
mounted () {
this.options = [
// {
// label: '全部',
// value: 0
// },{
// label: '苹果',
// value: 1
// },{
// label: '香蕉',
// value: 2
// },{
// label: '西瓜',
// value: 3
// }
];
},
methods: {
handleAdd () {
this.options = [
{
label: '全部',
value: 0
},{
label: '苹果',
value: 1
},{
label: '香蕉',
value: 2
},{
label: '西瓜',
value: 3
}
]
},
remoteMethod (query) {
console.log(13)
remoteMethod1 (query) {
if (query !== '') {
this.loading = true;
this.loading1 = true;
setTimeout(() => {
this.loading = false;
this.options = this.list.filter(item => {
return item.label.toLowerCase()
.indexOf(query.toLowerCase()) > -1;
});
}, 500);
} else {
this.options = [];
}
},
handleInput () {
// console.log(1)
}
},
mounted () {
this.list = this.states.map(item => {
this.loading1 = false;
const list = this.list.map(item => {
return {
value: item,
label: 'L ' + item
label: item
};
});
this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
}, 200);
} else {
this.options1 = [];
}
},
remoteMethod2 (query) {
if (query !== '') {
this.loading2 = true;
setTimeout(() => {
this.loading2 = false;
const list = this.list.map(item => {
return {
value: item,
label: item
};
});
this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
}, 200);
} else {
this.options2 = [];
}
}
}
}
</script>
<!--<template>-->
<!--<div>-->
<!--<Row style="width: 400px;">-->
<!--<i-col span="12" style="padding-right:10px">-->
<!--<Select v-model="model11" filterable>-->
<!--<Option v-for="item in cityList" :value="item.value" :key="item">{{ item.label }}</Option>-->
<!--</Select>-->
<!--</i-col>-->
<!--<i-col span="12">-->
<!--<Select v-model="model12" filterable multiple>-->
<!--<Option v-for="item in cityList" :value="item.value" :key="item">{{ item.label }}</Option>-->
<!--</Select>-->
<!--</i-col>-->
<!--</Row>-->
<!--<Button @click="handleSet">set</Button>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--cityList: [-->
<!--{-->
<!--value: 'beijing',-->
<!--label: '北京市'-->
<!--},-->
<!--{-->
<!--value: 'shanghai',-->
<!--label: '上海市'-->
<!--},-->
<!--{-->
<!--value: 'shenzhen',-->
<!--label: '深圳市'-->
<!--},-->
<!--{-->
<!--value: 'hangzhou',-->
<!--label: '杭州市'-->
<!--},-->
<!--{-->
<!--value: 'nanjing',-->
<!--label: '南京市'-->
<!--},-->
<!--{-->
<!--value: 'chongqing',-->
<!--label: '重庆市'-->
<!--}-->
<!--],-->
<!--model11: '',-->
<!--model12: []-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--handleSet () {-->
<!--this.model11 = 'shanghai';-->
<!--// this.model12 = ['beijing'];-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->

22041
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

46
package.json
View file

@ -41,62 +41,62 @@
"dependencies": {
"async-validator": "^1.7.1",
"core-js": "^2.4.1",
"deepmerge": "^1.3.1",
"deepmerge": "^1.5.0",
"popper.js": "^0.6.4"
},
"peerDependencies": {
"vue": "^2.1.10"
"vue": "^2.4.1"
},
"devDependencies": {
"autoprefixer-loader": "^2.0.0",
"babel": "^6.23.0",
"babel-core": "^6.23.1",
"babel-loader": "^6.2.4",
"babel-core": "^6.25.0",
"babel-loader": "^6.4.1",
"babel-plugin-transform-runtime": "^6.12.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-es2015": "^6.24.1",
"babel-runtime": "^6.11.6",
"chai": "^3.5.0",
"cross-env": "^3.1.4",
"cross-env": "^3.2.4",
"css-loader": "^0.23.1",
"eslint": "^3.12.2",
"eslint": "^3.19.0",
"eslint-plugin-html": "^1.7.0",
"extract-text-webpack-plugin": "^2.0.0",
"extract-text-webpack-plugin": "^2.1.2",
"file-loader": "^0.8.5",
"friendly-errors-webpack-plugin": "^1.6.1",
"function-bind": "^1.1.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
"gulp-clean-css": "^2.0.13",
"gulp-less": "^3.1.0",
"gulp-less": "^3.3.2",
"gulp-rename": "^1.2.2",
"html-loader": "^0.3.0",
"html-webpack-plugin": "^2.28.0",
"karma": "^1.4.1",
"html-webpack-plugin": "^2.29.0",
"karma": "^1.7.0",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-sinon-chai": "^1.2.4",
"karma-phantomjs-launcher": "^1.0.4",
"karma-sinon-chai": "^1.3.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.26",
"karma-webpack": "^2.0.2",
"karma-webpack": "^2.0.4",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"lolex": "^1.5.2",
"mocha": "^3.2.0",
"mocha": "^3.4.2",
"phantomjs-prebuilt": "^2.1.13",
"sinon": "^1.17.7",
"sinon-chai": "^2.8.0",
"sinon-chai": "^2.11.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"vue": "^2.3.3",
"url-loader": "^0.5.9",
"vue": "^2.4.1",
"vue-hot-reload-api": "^1.3.3",
"vue-html-loader": "^1.2.3",
"vue-loader": "^11.0.0",
"vue-router": "^2.2.1",
"vue-loader": "^11.3.4",
"vue-router": "^2.7.0",
"vue-style-loader": "^1.0.0",
"vue-template-compiler": "^2.3.3",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1",
"vue-template-compiler": "^2.4.1",
"webpack": "^2.7.0",
"webpack-dev-server": "^2.5.1",
"webpack-merge": "^3.0.0"
},
"engines": {

15
src/components/select/select.vue
View file

@ -53,6 +53,7 @@
type: [String, Number, Array],
default: ''
},
// 使用时，也得设置 value 才行
label: {
type: [String, Number, Array],
default: ''
@ -586,11 +587,9 @@
} else {
this.broadcast('iOption', 'on-query-change', val);
}
}
},
mounted () {
this.modelToQuery();
// 处理 remote 初始值
updateLabel () {
if (this.remote) {
if (!this.multiple && this.model !== '') {
this.selectToChangeQuery = true;
@ -607,6 +606,12 @@
});
}
}
}
},
mounted () {
this.modelToQuery();
// 处理 remote 初始值
this.updateLabel();
this.$nextTick(() => {
this.broadcastQuery('');
});
@ -685,6 +690,10 @@
this.model = val;
if (val === '') this.query = '';
},
label (val) {
this.currentLabel = val;
this.updateLabel();
},
model () {
this.$emit('input', this.model);
this.modelToQuery();