blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-22 14:39:16 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] TreeSelect: jsx (#2638)

Browse Source
This commit is contained in:
张敏 2019-01-28 09:50:37 +08:00 committed by neverland
parent d42f866cd8
commit fe9dbf10bd
3 changed files with 108 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
packages/tree-select/index.js Normal file
View File

@ -0,0 +1,100 @@
import { use } from '../utils';
import Icon from '../icon';
const [sfc, bem] = use('tree-select');
export default sfc({
props: {
items: Array,
mainActiveIndex: Number,
activeId: {
type: [Number, String],
default: 0
},
height: {
type: Number,
default: 300
}
},
computed: {
subItems() {
const selectedItem = this.items[this.mainActiveIndex] || {};
return selectedItem.children || [];
}
},
methods: {
onClickNav(data, index) {
if (!data.disabled) {
this.$emit('navclick', index);
}
},
onItemSelect(data) {
if (!data.disabled) {
this.$emit('itemclick', data);
}
}
},
render(h) {
const {
height,
items,
mainActiveIndex,
activeId,
subItems
} = this;
return (
<div class={bem()} style={{ height: height + 'px' }}>
<div class={bem('nav')}>
{items.map((item, index) => (
<div
key={index}
class={[
'van-ellipsis',
bem('nitem', {
active: mainActiveIndex === index,
disabled: item.disabled
})
]}
onClick={() => {
this.onClickNav(item, index);
}}
>
{ item.text }
</div>
))}
</div>
<div class={bem('content')}>
{subItems.map(item => (
<div
key={item.id}
class={[
'van-ellipsis',
bem('item', {
active: activeId === item.id,
disabled: item.disabled
})
]}
onClick={() => {
this.onItemSelect(item);
}}
>
{ item.text }
{activeId === item.id && (
<Icon
name="checked"
size="16px"
class={bem('selected')}
/>
)}
</div>
))}
</div>
</div>
);
}
});

78
packages/tree-select/index.vue
View File

@ -1,78 +0,0 @@
<template>
<div
:class="b()"
:style="{ height: height + 'px' }"
>
<div :class="b('nav')">
<div
v-for="(item, index) in items"
v-text="item.text"
class="van-ellipsis"
:class="b('nitem', { active: mainActiveIndex === index, disabled: item.disabled })"
@click="onClickNav(item, index)"
/>
</div>
<div :class="b('content')">
<div
v-for="item in subItems"
:key="item.id"
class="van-ellipsis"
:class="b('item', {
active: activeId === item.id,
disabled: item.disabled
})"
@click="onItemSelect(item)"
>
{{ item.text }}
<icon
v-if="activeId === item.id"
name="checked"
size="16px"
:class="b('selected')"
/>
</div>
</div>
</div>
</template>
<script>
import create from '../utils/create';
export default create({
name: 'tree-select',
props: {
items: Array,
mainActiveIndex: Number,
activeId: {
type: [Number, String],
default: 0
},
height: {
type: Number,
default: 300
}
},
computed: {
subItems() {
const selectedItem = this.items[this.mainActiveIndex] || {};
return selectedItem.children || [];
}
},
methods: {
onClickNav(data, index) {
if (!data.disabled) {
this.$emit('navclick', index);
}
},
onItemSelect(data) {
if (!data.disabled) {
this.$emit('itemclick', data);
}
}
}
});
</script>

39
packages/tree-select/test/__snapshots__/demo.spec.js.snap
View File

@ -11,38 +11,15 @@ exports[`renders demo correctly 1`] = `
<div class="van-ellipsis van-tree-select__nitem van-tree-select__nitem--disabled">福建</div>
</div>
<div class="van-tree-select__content">
<div class="van-ellipsis van-tree-select__item van-tree-select__item--active">
杭州
<i class="van-icon van-icon-checked van-tree-select__selected" style="color:undefined;font-size:16px;">
<div class="van-ellipsis van-tree-select__item van-tree-select__item--active">杭州<i class="van-icon van-icon-checked van-tree-select__selected" style="color:undefined;font-size:16px;">
<!----></i></div>
<div class="van-ellipsis van-tree-select__item">
温州
<!---->
</div>
<div class="van-ellipsis van-tree-select__item van-tree-select__item--disabled">
宁波
<!---->
</div>
<div class="van-ellipsis van-tree-select__item">
义乌
<!---->
</div>
<div class="van-ellipsis van-tree-select__item">
南京
<!---->
</div>
<div class="van-ellipsis van-tree-select__item">
无锡
<!---->
</div>
<div class="van-ellipsis van-tree-select__item">
徐州
<!---->
</div>
<div class="van-ellipsis van-tree-select__item">
苏州
<!---->
</div>
<div class="van-ellipsis van-tree-select__item">温州</div>
<div class="van-ellipsis van-tree-select__item van-tree-select__item--disabled">宁波</div>
<div class="van-ellipsis van-tree-select__item">义乌</div>
<div class="van-ellipsis van-tree-select__item">南京</div>
<div class="van-ellipsis van-tree-select__item">无锡</div>
<div class="van-ellipsis van-tree-select__item">徐州</div>
<div class="van-ellipsis van-tree-select__item">苏州</div>
</div>
</div>
</div>