update Cascader Icons

This commit is contained in:
梁灏 2018-06-25 13:30:40 +08:00
parent 0f512d6a73
commit 207d6b072b
3 changed files with 55 additions and 59 deletions

View file

@ -1,64 +1,60 @@
<template>
<div>
<Cascader v-model="value3" :data="data" filterable style="width: 400px"></Cascader>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<Cascader v-model="value3" :data="data" filterable style="width: 400px"></Cascader>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<Cascader v-model="value3" :data="data" filterable style="width: 400px"></Cascader>
</div>
<Cascader :data="data4" :load-data="loadData"></Cascader>
</template>
<script>
export default {
data () {
return {
data: [{
value: 1,
label: '北京',
children: [
{
value: 11,
label: '故宫'
},
{
value: 12,
label: '天坛'
},
{
value: 13,
label: '王府井'
}
]
}, {
value: 2,
label: '江苏',
children: [
{
value: 21,
label: '南京',
children: [
{
value: 211,
label: '夫子庙',
}
]
},
{
value: 22,
label: '苏州',
children: [
{
value: 221,
label: '拙政园',
},
{
value: 222,
label: '狮子林',
}
]
}
],
}],
value3: []
data4: [
{
value: 'beijing',
label: '北京',
children: [],
loading: false
},
{
value: 'hangzhou',
label: '杭州',
children: [],
loading:false
}
]
}
},
methods: {
loadData (item, callback) {
item.loading = true;
setTimeout(() => {
if (item.value === 'beijing') {
item.children = [
{
value: 'talkingdata',
label: 'TalkingData'
},
{
value: 'baidu',
label: '百度'
},
{
value: 'sina',
label: '新浪'
}
];
} else if (item.value === 'hangzhou') {
item.children = [
{
value: 'ali',
label: '阿里巴巴'
},
{
value: '163',
label: '网易'
}
];
}
item.loading = false;
callback();
}, 1000);
}
}
}

View file

@ -16,8 +16,8 @@
:class="[prefixCls + '-label']"
v-show="filterable && query === ''"
@click="handleFocus">{{ displayRender }}</div>
<Icon type="ios-close" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.native.stop="clearSelect"></Icon>
<Icon type="arrow-down-b" :class="[prefixCls + '-arrow']"></Icon>
<Icon type="ios-close-circle" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.native.stop="clearSelect"></Icon>
<Icon type="ios-arrow-down" :class="[prefixCls + '-arrow']"></Icon>
</slot>
</div>
<transition name="transition-drop">

View file

@ -1,8 +1,8 @@
<template>
<li :class="classes">
{{ data.label }}
<i v-if="showArrow" class="ivu-icon ivu-icon-ios-arrow-right"></i>
<i v-if="showLoading" class="ivu-icon ivu-icon-load-c ivu-load-loop"></i>
<i v-if="showArrow" class="ivu-icon ivu-icon-ios-arrow-forward"></i>
<i v-if="showLoading" class="ivu-icon ivu-icon-ios-sync ivu-load-loop"></i>
</li>
</template>
<script>