Skip to content

Commit

Permalink
Merge pull request #258 from YikaJ/master
Browse files Browse the repository at this point in the history
Select组件/Tag组件
  • Loading branch information
icarusion authored Feb 15, 2017
2 parents d8de604 + 1d8dad9 commit 8f48491
Show file tree
Hide file tree
Showing 4 changed files with 77 additions and 44 deletions.
31 changes: 18 additions & 13 deletions src/components/select/select.vue
Original file line number Diff line number Diff line change
Expand Up @@ -478,29 +478,33 @@
setQuery (query) {
if (!this.filterable) return;
this.query = query;
},
modelToQuery() {
if (!this.multiple && this.filterable && this.model) {
this.findChild((child) => {
if (this.model === child.value) {
if (child.label) {
this.query = child.label;
} else if (child.searchLabel) {
this.query = child.searchLabel;
} else {
this.query = child.value;
}
}
});
}
}
},
compiled () {
if (!this.multiple && this.filterable && this.model) {
this.findChild((child) => {
if (this.model === child.value) {
if (child.label) {
this.query = child.label;
} else if (child.searchLabel) {
this.query = child.searchLabel;
} else {
this.query = child.value;
}
}
});
}
this.modelToQuery();
this.updateOptions(true);
document.addEventListener('keydown', this.handleKeydown);
// watch slot changed
if (MutationObserver) {
this.observer = new MutationObserver(() => {
this.modelToQuery();
this.slotChange();
this.updateOptions(true, true);
});
Expand All @@ -521,6 +525,7 @@
},
watch: {
model () {
this.modelToQuery();
if (this.multiple) {
if (this.slotChangeDuration) {
this.slotChangeDuration = false;
Expand Down
2 changes: 1 addition & 1 deletion src/components/tag/tag.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div :class="classes" transition="fade">
<span :class="dotClasses" v-if="showDot"></span><span :class="textClasses"><slot></slot></span><Icon v-if="closable" type="ios-close-empty" @click="close"></Icon>
<span :class="dotClasses" v-if="showDot"></span><span :class="textClasses"><slot></slot></span><Icon v-if="closable" type="ios-close-empty" @click.stop="close"></Icon>
</div>
</template>
<script>
Expand Down
80 changes: 50 additions & 30 deletions test/routers/select.vue
Original file line number Diff line number Diff line change
@@ -1,50 +1,70 @@
<template>
<Row>
<i-col span="12" style="padding-right:10px">
<i-select :model.sync="model11" filterable>
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
<i-select :model.sync="model111" filterable>
<i-option v-for="item in cityList1" :value="item.value">{{ item.label }}</i-option>
</i-select>
</i-col>
</Row>
<Row>
<i-col span="12" style="padding-right:10px">
<i-select :model.sync="model112" filterable>
<i-option v-for="item in cityList2" :value="item.value">{{ item.label }}</i-option>
</i-select>
</i-col>
</Row>
<Row>
<i-col span="12">
<i-select :model.sync="model12" filterable multiple>
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
<i-option v-for="item in cityList1" :value="item.value">{{ item.label }}</i-option>
</i-select>
</i-col>
</Row>
</template>
<script>
const cityList = [
{
value: 'beijing',
label: '北京市'
},
{
value: 'shanghai',
label: '上海市'
},
{
value: 'shenzhen',
label: '深圳市'
},
{
value: 'hangzhou',
label: '杭州市'
},
{
value: 'nanjing',
label: '南京市'
},
{
value: 'chongqing',
label: '重庆市'
}
]
export default {
data () {
return {
cityList: [
{
value: 'beijing',
label: '北京市'
},
{
value: 'shanghai',
label: '上海市'
},
{
value: 'shenzhen',
label: '深圳市'
},
{
value: 'hangzhou',
label: '杭州市'
},
{
value: 'nanjing',
label: '南京市'
},
{
value: 'chongqing',
label: '重庆市'
}
],
model11: '',
cityList1: cityList,
model111: '',
cityList2: [],
model112: 'beijing',
model12: []
}
},
ready() {
this.model111 = 'hangzhou'
setTimeout(()=>{
this.cityList2 = cityList
}, 500)
}
}
</script>
8 changes: 8 additions & 0 deletions test/routers/tag.vue
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@
<i-button @click="loading = true">true</i-button>
<i-button @click="loading = false">false</i-button>
</Modal>
<br><br>
<Tag type="border" color="yellow" closable @click="clickTag" @on-close="clickTagClose">标签一</Tag>
</template>
<script>
import { Tag, Modal, iButton } from 'iview';
Expand All @@ -56,6 +58,12 @@
setTimeout(() => {
this.modal1 = false;
}, 2000);
},
clickTag() {
console.log('click tag');
},
clickTagClose() {
console.log('click tag close-icon');
}
}
}
Expand Down

0 comments on commit 8f48491

Please sign in to comment.