mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 19:41:45 +08:00
test(TreeSelect): add demo test
This commit is contained in:
nemo-shen
neverland
parent
1a9df5599d
commit
1739317a5c
@ -139,6 +139,7 @@
|
|||||||
"van-toast-demo": "./dist/toast/demo/index",
|
"van-toast-demo": "./dist/toast/demo/index",
|
||||||
"van-transition": "./dist/transition/index",
|
"van-transition": "./dist/transition/index",
|
||||||
"van-tree-select": "./dist/tree-select/index",
|
"van-tree-select": "./dist/tree-select/index",
|
||||||
|
"van-tree-select-demo": "./dist/tree-select/demo/index",
|
||||||
"van-datetime-picker": "./dist/datetime-picker/index",
|
"van-datetime-picker": "./dist/datetime-picker/index",
|
||||||
"van-rate": "./dist/rate/index",
|
"van-rate": "./dist/rate/index",
|
||||||
"van-rate-demo": "./dist/rate/demo/index",
|
"van-rate-demo": "./dist/rate/demo/index",
|
||||||
|
|||||||
@ -1,52 +0,0 @@
|
|||||||
export default {
|
|
||||||
pro1Name: '浙江',
|
|
||||||
pro1: [
|
|
||||||
{
|
|
||||||
text: '杭州',
|
|
||||||
id: 1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '温州',
|
|
||||||
id: 2,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '宁波',
|
|
||||||
id: 3,
|
|
||||||
disabled: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '义乌',
|
|
||||||
id: 4,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
pro2Name: '江苏',
|
|
||||||
pro2: [
|
|
||||||
{
|
|
||||||
text: '南京',
|
|
||||||
id: 5,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '无锡',
|
|
||||||
id: 6,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '徐州',
|
|
||||||
id: 7,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '苏州',
|
|
||||||
id: 8,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
pro3Name: '福建',
|
|
||||||
pro3: [
|
|
||||||
{
|
|
||||||
text: '泉州',
|
|
||||||
id: 9,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '厦门',
|
|
||||||
id: 10,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
@ -1,68 +1,3 @@
|
|||||||
import Page from '../../common/page';
|
import Page from '../../common/page';
|
||||||
import config from './config';
|
|
||||||
|
|
||||||
const items = [
|
Page();
|
||||||
{
|
|
||||||
text: config.pro1Name,
|
|
||||||
children: config.pro1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: config.pro2Name,
|
|
||||||
children: config.pro2,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: config.pro3Name,
|
|
||||||
disabled: true,
|
|
||||||
children: config.pro3,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
Page({
|
|
||||||
data: {
|
|
||||||
items,
|
|
||||||
badgeItems: items.slice(0, 2).map((item, index) => {
|
|
||||||
if (index === 0) {
|
|
||||||
return { ...item, dot: true };
|
|
||||||
}
|
|
||||||
if (index === 1) {
|
|
||||||
return { ...item, badge: 5 };
|
|
||||||
}
|
|
||||||
|
|
||||||
return item;
|
|
||||||
}),
|
|
||||||
mainActiveIndex: 0,
|
|
||||||
activeId: 0,
|
|
||||||
mainActiveIndexMulti: 0,
|
|
||||||
activeIdMulti: [],
|
|
||||||
},
|
|
||||||
|
|
||||||
onClickNav({ detail }) {
|
|
||||||
this.setData({
|
|
||||||
mainActiveIndex: detail.index || 0,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
onClickItem({ detail }) {
|
|
||||||
const activeId = this.data.activeId === detail.id ? null : detail.id;
|
|
||||||
|
|
||||||
this.setData({ activeId });
|
|
||||||
},
|
|
||||||
|
|
||||||
onClickNavMulti({ detail }) {
|
|
||||||
this.setData({
|
|
||||||
mainActiveIndexMulti: detail.index || 0,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
onClickItemMulti({ detail }) {
|
|
||||||
const { activeIdMulti } = this.data;
|
|
||||||
const idx = activeIdMulti.indexOf(detail.id);
|
|
||||||
if (idx > -1) {
|
|
||||||
activeIdMulti.splice(idx, 1);
|
|
||||||
} else {
|
|
||||||
activeIdMulti.push(detail.id);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setData({ activeIdMulti });
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|||||||
@ -1,56 +1 @@
|
|||||||
<demo-block title="单选模式">
|
<van-tree-select-demo />
|
||||||
<van-tree-select
|
|
||||||
items="{{ items }}"
|
|
||||||
main-active-index="{{ mainActiveIndex }}"
|
|
||||||
active-id="{{ activeId }}"
|
|
||||||
bind:click-item="onClickItem"
|
|
||||||
bind:click-nav="onClickNav"
|
|
||||||
></van-tree-select>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="多选模式">
|
|
||||||
<van-tree-select
|
|
||||||
max="2"
|
|
||||||
items="{{ items }}"
|
|
||||||
main-active-index="{{ mainActiveIndexMulti }}"
|
|
||||||
active-id="{{ activeIdMulti }}"
|
|
||||||
bind:click-item="onClickItemMulti"
|
|
||||||
bind:click-nav="onClickNavMulti"
|
|
||||||
></van-tree-select>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="自定义内容">
|
|
||||||
<van-tree-select
|
|
||||||
items="{{ [{ text: '分组 1' }, { text: '分组 2' }] }}"
|
|
||||||
height="55vw"
|
|
||||||
main-active-index="{{ mainActiveIndex }}"
|
|
||||||
active-id="{{ activeId }}"
|
|
||||||
bind:click-item="onClickItem"
|
|
||||||
bind:click-nav="onClickNav"
|
|
||||||
>
|
|
||||||
<van-image
|
|
||||||
wx:if="{{ mainActiveIndex === 0 }}"
|
|
||||||
src="https://img.yzcdn.cn/vant/apple-1.jpg"
|
|
||||||
width="100%"
|
|
||||||
height="100%"
|
|
||||||
slot="content"
|
|
||||||
/>
|
|
||||||
<van-image
|
|
||||||
wx:elif="{{ mainActiveIndex === 1 }}"
|
|
||||||
src="https://img.yzcdn.cn/vant/apple-2.jpg"
|
|
||||||
width="100%"
|
|
||||||
height="100%"
|
|
||||||
slot="content"
|
|
||||||
/>
|
|
||||||
</van-tree-select>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="徽标提示">
|
|
||||||
<van-tree-select
|
|
||||||
items="{{ badgeItems }}"
|
|
||||||
main-active-index="{{ mainActiveIndex }}"
|
|
||||||
active-id="{{ activeId }}"
|
|
||||||
bind:click-item="onClickItem"
|
|
||||||
bind:click-nav="onClickNav"
|
|
||||||
></van-tree-select>
|
|
||||||
</demo-block>
|
|
||||||
|
|||||||
@ -1 +0,0 @@
|
|||||||
/* pages/tree-select/index.wxss */
|
|
||||||
8
packages/tree-select/demo/index.json
Normal file
8
packages/tree-select/demo/index.json
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"component": true,
|
||||||
|
"usingComponents": {
|
||||||
|
"van-image": "../../image/index",
|
||||||
|
"van-tree-select": "../../tree-select/index",
|
||||||
|
"demo-block": "../../../example/components/demo-block/index"
|
||||||
|
}
|
||||||
|
}
|
||||||
121
packages/tree-select/demo/index.ts
Normal file
121
packages/tree-select/demo/index.ts
Normal file
@ -0,0 +1,121 @@
|
|||||||
|
import { VantComponent } from '../../common/component';
|
||||||
|
|
||||||
|
const config = {
|
||||||
|
pro1Name: '浙江',
|
||||||
|
pro1: [
|
||||||
|
{
|
||||||
|
text: '杭州',
|
||||||
|
id: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '温州',
|
||||||
|
id: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '宁波',
|
||||||
|
id: 3,
|
||||||
|
disabled: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '义乌',
|
||||||
|
id: 4,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
pro2Name: '江苏',
|
||||||
|
pro2: [
|
||||||
|
{
|
||||||
|
text: '南京',
|
||||||
|
id: 5,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '无锡',
|
||||||
|
id: 6,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '徐州',
|
||||||
|
id: 7,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '苏州',
|
||||||
|
id: 8,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
pro3Name: '福建',
|
||||||
|
pro3: [
|
||||||
|
{
|
||||||
|
text: '泉州',
|
||||||
|
id: 9,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '厦门',
|
||||||
|
id: 10,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
const items = [
|
||||||
|
{
|
||||||
|
text: config.pro1Name,
|
||||||
|
children: config.pro1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: config.pro2Name,
|
||||||
|
children: config.pro2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: config.pro3Name,
|
||||||
|
disabled: true,
|
||||||
|
children: config.pro3,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
VantComponent({
|
||||||
|
data: {
|
||||||
|
items,
|
||||||
|
badgeItems: items.slice(0, 2).map((item, index) => {
|
||||||
|
if (index === 0) {
|
||||||
|
return { ...item, dot: true };
|
||||||
|
}
|
||||||
|
if (index === 1) {
|
||||||
|
return { ...item, badge: 5 };
|
||||||
|
}
|
||||||
|
|
||||||
|
return item;
|
||||||
|
}),
|
||||||
|
mainActiveIndex: 0,
|
||||||
|
activeId: 0,
|
||||||
|
mainActiveIndexMulti: 0,
|
||||||
|
activeIdMulti: [],
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
onClickNav({ detail }) {
|
||||||
|
this.setData({
|
||||||
|
mainActiveIndex: detail.index || 0,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
onClickItem({ detail }) {
|
||||||
|
const activeId = this.data.activeId === detail.id ? null : detail.id;
|
||||||
|
|
||||||
|
this.setData({ activeId });
|
||||||
|
},
|
||||||
|
|
||||||
|
onClickNavMulti({ detail }) {
|
||||||
|
this.setData({
|
||||||
|
mainActiveIndexMulti: detail.index || 0,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
onClickItemMulti({ detail }) {
|
||||||
|
const { activeIdMulti }: { activeIdMulti: any } = this.data;
|
||||||
|
const idx = activeIdMulti.indexOf(detail.id);
|
||||||
|
if (idx > -1) {
|
||||||
|
activeIdMulti.splice(idx, 1);
|
||||||
|
} else {
|
||||||
|
activeIdMulti.push(detail.id);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setData({ activeIdMulti });
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
56
packages/tree-select/demo/index.wxml
Normal file
56
packages/tree-select/demo/index.wxml
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
<demo-block title="单选模式">
|
||||||
|
<van-tree-select
|
||||||
|
items="{{ items }}"
|
||||||
|
main-active-index="{{ mainActiveIndex }}"
|
||||||
|
active-id="{{ activeId }}"
|
||||||
|
bind:click-item="onClickItem"
|
||||||
|
bind:click-nav="onClickNav"
|
||||||
|
></van-tree-select>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="多选模式">
|
||||||
|
<van-tree-select
|
||||||
|
max="2"
|
||||||
|
items="{{ items }}"
|
||||||
|
main-active-index="{{ mainActiveIndexMulti }}"
|
||||||
|
active-id="{{ activeIdMulti }}"
|
||||||
|
bind:click-item="onClickItemMulti"
|
||||||
|
bind:click-nav="onClickNavMulti"
|
||||||
|
></van-tree-select>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="自定义内容">
|
||||||
|
<van-tree-select
|
||||||
|
items="{{ [{ text: '分组 1' }, { text: '分组 2' }] }}"
|
||||||
|
height="55vw"
|
||||||
|
main-active-index="{{ mainActiveIndex }}"
|
||||||
|
active-id="{{ activeId }}"
|
||||||
|
bind:click-item="onClickItem"
|
||||||
|
bind:click-nav="onClickNav"
|
||||||
|
>
|
||||||
|
<van-image
|
||||||
|
wx:if="{{ mainActiveIndex === 0 }}"
|
||||||
|
src="https://img.yzcdn.cn/vant/apple-1.jpg"
|
||||||
|
width="100%"
|
||||||
|
height="100%"
|
||||||
|
slot="content"
|
||||||
|
/>
|
||||||
|
<van-image
|
||||||
|
wx:elif="{{ mainActiveIndex === 1 }}"
|
||||||
|
src="https://img.yzcdn.cn/vant/apple-2.jpg"
|
||||||
|
width="100%"
|
||||||
|
height="100%"
|
||||||
|
slot="content"
|
||||||
|
/>
|
||||||
|
</van-tree-select>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="徽标提示">
|
||||||
|
<van-tree-select
|
||||||
|
items="{{ badgeItems }}"
|
||||||
|
main-active-index="{{ mainActiveIndex }}"
|
||||||
|
active-id="{{ activeId }}"
|
||||||
|
bind:click-item="onClickItem"
|
||||||
|
bind:click-nav="onClickNav"
|
||||||
|
></van-tree-select>
|
||||||
|
</demo-block>
|
||||||
593
packages/tree-select/test/__snapshots__/demo.spec.ts.snap
Normal file
593
packages/tree-select/test/__snapshots__/demo.spec.ts.snap
Normal file
@ -0,0 +1,593 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`should render demo and match snapshot 1`] = `
|
||||||
|
<main>
|
||||||
|
<demo-block>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class demo-block van-clearfix "
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
单选模式
|
||||||
|
</wx-view>
|
||||||
|
<van-tree-select
|
||||||
|
bind:click-item="onClickItem"
|
||||||
|
bind:click-nav="onClickNav"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-tree-select"
|
||||||
|
style="height: 300px"
|
||||||
|
>
|
||||||
|
<wx-scroll-view
|
||||||
|
class="van-tree-select__nav"
|
||||||
|
scrollY="{{true}}"
|
||||||
|
>
|
||||||
|
<van-sidebar
|
||||||
|
customClass="van-tree-select__nav__inner"
|
||||||
|
bind:change="onClickNav"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-sidebar custom-class"
|
||||||
|
>
|
||||||
|
<van-sidebar-item
|
||||||
|
activeClass="main-active-class"
|
||||||
|
customClass="main-item-class"
|
||||||
|
disabledClass="main-disabled-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-sidebar-item van-sidebar-item--selected active-class custom-class"
|
||||||
|
hoverClass="van-sidebar-item--hover"
|
||||||
|
hoverStayTime="70"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-sidebar-item__text"
|
||||||
|
>
|
||||||
|
<van-info />
|
||||||
|
<wx-view>
|
||||||
|
浙江
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-sidebar-item>
|
||||||
|
<van-sidebar-item
|
||||||
|
activeClass="main-active-class"
|
||||||
|
customClass="main-item-class"
|
||||||
|
disabledClass="main-disabled-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-sidebar-item custom-class"
|
||||||
|
hoverClass="van-sidebar-item--hover"
|
||||||
|
hoverStayTime="70"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-sidebar-item__text"
|
||||||
|
>
|
||||||
|
<van-info />
|
||||||
|
<wx-view>
|
||||||
|
江苏
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-sidebar-item>
|
||||||
|
<van-sidebar-item
|
||||||
|
activeClass="main-active-class"
|
||||||
|
customClass="main-item-class"
|
||||||
|
disabledClass="main-disabled-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-sidebar-item van-sidebar-item--disabled disabled-class custom-class"
|
||||||
|
hoverClass="van-sidebar-item--hover"
|
||||||
|
hoverStayTime="70"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-sidebar-item__text"
|
||||||
|
>
|
||||||
|
<van-info />
|
||||||
|
<wx-view>
|
||||||
|
福建
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-sidebar-item>
|
||||||
|
</wx-view>
|
||||||
|
</van-sidebar>
|
||||||
|
</wx-scroll-view>
|
||||||
|
<wx-scroll-view
|
||||||
|
class="van-tree-select__content"
|
||||||
|
scrollY="{{true}}"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis content-item-class van-tree-select__item "
|
||||||
|
data-item="{{
|
||||||
|
Object {
|
||||||
|
"id": 1,
|
||||||
|
"text": "杭州",
|
||||||
|
}
|
||||||
|
}}"
|
||||||
|
bind:tap="onSelectItem"
|
||||||
|
>
|
||||||
|
|
||||||
|
杭州
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis content-item-class van-tree-select__item "
|
||||||
|
data-item="{{
|
||||||
|
Object {
|
||||||
|
"id": 2,
|
||||||
|
"text": "温州",
|
||||||
|
}
|
||||||
|
}}"
|
||||||
|
bind:tap="onSelectItem"
|
||||||
|
>
|
||||||
|
|
||||||
|
温州
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis content-item-class van-tree-select__item van-tree-select__item--disabled content-disabled-class"
|
||||||
|
data-item="{{
|
||||||
|
Object {
|
||||||
|
"disabled": true,
|
||||||
|
"id": 3,
|
||||||
|
"text": "宁波",
|
||||||
|
}
|
||||||
|
}}"
|
||||||
|
bind:tap="onSelectItem"
|
||||||
|
>
|
||||||
|
|
||||||
|
宁波
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis content-item-class van-tree-select__item "
|
||||||
|
data-item="{{
|
||||||
|
Object {
|
||||||
|
"id": 4,
|
||||||
|
"text": "义乌",
|
||||||
|
}
|
||||||
|
}}"
|
||||||
|
bind:tap="onSelectItem"
|
||||||
|
>
|
||||||
|
|
||||||
|
义乌
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
</wx-scroll-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-tree-select>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class demo-block van-clearfix "
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
多选模式
|
||||||
|
</wx-view>
|
||||||
|
<van-tree-select
|
||||||
|
bind:click-item="onClickItemMulti"
|
||||||
|
bind:click-nav="onClickNavMulti"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-tree-select"
|
||||||
|
style="height: 300px"
|
||||||
|
>
|
||||||
|
<wx-scroll-view
|
||||||
|
class="van-tree-select__nav"
|
||||||
|
scrollY="{{true}}"
|
||||||
|
>
|
||||||
|
<van-sidebar
|
||||||
|
customClass="van-tree-select__nav__inner"
|
||||||
|
bind:change="onClickNav"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-sidebar custom-class"
|
||||||
|
>
|
||||||
|
<van-sidebar-item
|
||||||
|
activeClass="main-active-class"
|
||||||
|
customClass="main-item-class"
|
||||||
|
disabledClass="main-disabled-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-sidebar-item van-sidebar-item--selected active-class custom-class"
|
||||||
|
hoverClass="van-sidebar-item--hover"
|
||||||
|
hoverStayTime="70"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-sidebar-item__text"
|
||||||
|
>
|
||||||
|
<van-info />
|
||||||
|
<wx-view>
|
||||||
|
浙江
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-sidebar-item>
|
||||||
|
<van-sidebar-item
|
||||||
|
activeClass="main-active-class"
|
||||||
|
customClass="main-item-class"
|
||||||
|
disabledClass="main-disabled-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-sidebar-item custom-class"
|
||||||
|
hoverClass="van-sidebar-item--hover"
|
||||||
|
hoverStayTime="70"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-sidebar-item__text"
|
||||||
|
>
|
||||||
|
<van-info />
|
||||||
|
<wx-view>
|
||||||
|
江苏
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-sidebar-item>
|
||||||
|
<van-sidebar-item
|
||||||
|
activeClass="main-active-class"
|
||||||
|
customClass="main-item-class"
|
||||||
|
disabledClass="main-disabled-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-sidebar-item van-sidebar-item--disabled disabled-class custom-class"
|
||||||
|
hoverClass="van-sidebar-item--hover"
|
||||||
|
hoverStayTime="70"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-sidebar-item__text"
|
||||||
|
>
|
||||||
|
<van-info />
|
||||||
|
<wx-view>
|
||||||
|
福建
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-sidebar-item>
|
||||||
|
</wx-view>
|
||||||
|
</van-sidebar>
|
||||||
|
</wx-scroll-view>
|
||||||
|
<wx-scroll-view
|
||||||
|
class="van-tree-select__content"
|
||||||
|
scrollY="{{true}}"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis content-item-class van-tree-select__item "
|
||||||
|
data-item="{{
|
||||||
|
Object {
|
||||||
|
"id": 1,
|
||||||
|
"text": "杭州",
|
||||||
|
}
|
||||||
|
}}"
|
||||||
|
bind:tap="onSelectItem"
|
||||||
|
>
|
||||||
|
|
||||||
|
杭州
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis content-item-class van-tree-select__item "
|
||||||
|
data-item="{{
|
||||||
|
Object {
|
||||||
|
"id": 2,
|
||||||
|
"text": "温州",
|
||||||
|
}
|
||||||
|
}}"
|
||||||
|
bind:tap="onSelectItem"
|
||||||
|
>
|
||||||
|
|
||||||
|
温州
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis content-item-class van-tree-select__item van-tree-select__item--disabled content-disabled-class"
|
||||||
|
data-item="{{
|
||||||
|
Object {
|
||||||
|
"disabled": true,
|
||||||
|
"id": 3,
|
||||||
|
"text": "宁波",
|
||||||
|
}
|
||||||
|
}}"
|
||||||
|
bind:tap="onSelectItem"
|
||||||
|
>
|
||||||
|
|
||||||
|
宁波
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis content-item-class van-tree-select__item "
|
||||||
|
data-item="{{
|
||||||
|
Object {
|
||||||
|
"id": 4,
|
||||||
|
"text": "义乌",
|
||||||
|
}
|
||||||
|
}}"
|
||||||
|
bind:tap="onSelectItem"
|
||||||
|
>
|
||||||
|
|
||||||
|
义乌
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
</wx-scroll-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-tree-select>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class demo-block van-clearfix "
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
自定义内容
|
||||||
|
</wx-view>
|
||||||
|
<van-tree-select
|
||||||
|
bind:click-item="onClickItem"
|
||||||
|
bind:click-nav="onClickNav"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-tree-select"
|
||||||
|
style="height: 55vw"
|
||||||
|
>
|
||||||
|
<wx-scroll-view
|
||||||
|
class="van-tree-select__nav"
|
||||||
|
scrollY="{{true}}"
|
||||||
|
>
|
||||||
|
<van-sidebar
|
||||||
|
customClass="van-tree-select__nav__inner"
|
||||||
|
bind:change="onClickNav"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-sidebar custom-class"
|
||||||
|
>
|
||||||
|
<van-sidebar-item
|
||||||
|
activeClass="main-active-class"
|
||||||
|
customClass="main-item-class"
|
||||||
|
disabledClass="main-disabled-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-sidebar-item van-sidebar-item--selected active-class custom-class"
|
||||||
|
hoverClass="van-sidebar-item--hover"
|
||||||
|
hoverStayTime="70"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-sidebar-item__text"
|
||||||
|
>
|
||||||
|
<van-info />
|
||||||
|
<wx-view>
|
||||||
|
分组 1
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-sidebar-item>
|
||||||
|
<van-sidebar-item
|
||||||
|
activeClass="main-active-class"
|
||||||
|
customClass="main-item-class"
|
||||||
|
disabledClass="main-disabled-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-sidebar-item custom-class"
|
||||||
|
hoverClass="van-sidebar-item--hover"
|
||||||
|
hoverStayTime="70"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-sidebar-item__text"
|
||||||
|
>
|
||||||
|
<van-info />
|
||||||
|
<wx-view>
|
||||||
|
分组 2
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-sidebar-item>
|
||||||
|
</wx-view>
|
||||||
|
</van-sidebar>
|
||||||
|
</wx-scroll-view>
|
||||||
|
<wx-scroll-view
|
||||||
|
class="van-tree-select__content"
|
||||||
|
scrollY="{{true}}"
|
||||||
|
>
|
||||||
|
<van-image
|
||||||
|
slot="content"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-image"
|
||||||
|
style="width:100%;height:100%"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-image
|
||||||
|
class="image-class van-image__img"
|
||||||
|
lazyLoad="{{false}}"
|
||||||
|
mode="scaleToFill"
|
||||||
|
showMenuByLongpress="{{false}}"
|
||||||
|
src="https://img.yzcdn.cn/vant/apple-1.jpg"
|
||||||
|
bind:error="onError"
|
||||||
|
bind:load="onLoad"
|
||||||
|
/>
|
||||||
|
<wx-view
|
||||||
|
class="loading-class van-image__loading"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
customClass="van-image__loading-icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-photo"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-image>
|
||||||
|
</wx-scroll-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-tree-select>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class demo-block van-clearfix "
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
徽标提示
|
||||||
|
</wx-view>
|
||||||
|
<van-tree-select
|
||||||
|
bind:click-item="onClickItem"
|
||||||
|
bind:click-nav="onClickNav"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-tree-select"
|
||||||
|
style="height: 300px"
|
||||||
|
>
|
||||||
|
<wx-scroll-view
|
||||||
|
class="van-tree-select__nav"
|
||||||
|
scrollY="{{true}}"
|
||||||
|
>
|
||||||
|
<van-sidebar
|
||||||
|
customClass="van-tree-select__nav__inner"
|
||||||
|
bind:change="onClickNav"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-sidebar custom-class"
|
||||||
|
>
|
||||||
|
<van-sidebar-item
|
||||||
|
activeClass="main-active-class"
|
||||||
|
customClass="main-item-class"
|
||||||
|
disabledClass="main-disabled-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-sidebar-item van-sidebar-item--selected active-class custom-class"
|
||||||
|
hoverClass="van-sidebar-item--hover"
|
||||||
|
hoverStayTime="70"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-sidebar-item__text"
|
||||||
|
>
|
||||||
|
<van-info>
|
||||||
|
<wx-view
|
||||||
|
class="van-info van-info van-info--dot custom-class"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
</van-info>
|
||||||
|
<wx-view>
|
||||||
|
浙江
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-sidebar-item>
|
||||||
|
<van-sidebar-item
|
||||||
|
activeClass="main-active-class"
|
||||||
|
customClass="main-item-class"
|
||||||
|
disabledClass="main-disabled-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-sidebar-item custom-class"
|
||||||
|
hoverClass="van-sidebar-item--hover"
|
||||||
|
hoverStayTime="70"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-sidebar-item__text"
|
||||||
|
>
|
||||||
|
<van-info>
|
||||||
|
<wx-view
|
||||||
|
class="van-info van-info custom-class"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
5
|
||||||
|
</wx-view>
|
||||||
|
</van-info>
|
||||||
|
<wx-view>
|
||||||
|
江苏
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-sidebar-item>
|
||||||
|
</wx-view>
|
||||||
|
</van-sidebar>
|
||||||
|
</wx-scroll-view>
|
||||||
|
<wx-scroll-view
|
||||||
|
class="van-tree-select__content"
|
||||||
|
scrollY="{{true}}"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis content-item-class van-tree-select__item "
|
||||||
|
data-item="{{
|
||||||
|
Object {
|
||||||
|
"id": 1,
|
||||||
|
"text": "杭州",
|
||||||
|
}
|
||||||
|
}}"
|
||||||
|
bind:tap="onSelectItem"
|
||||||
|
>
|
||||||
|
|
||||||
|
杭州
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis content-item-class van-tree-select__item "
|
||||||
|
data-item="{{
|
||||||
|
Object {
|
||||||
|
"id": 2,
|
||||||
|
"text": "温州",
|
||||||
|
}
|
||||||
|
}}"
|
||||||
|
bind:tap="onSelectItem"
|
||||||
|
>
|
||||||
|
|
||||||
|
温州
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis content-item-class van-tree-select__item van-tree-select__item--disabled content-disabled-class"
|
||||||
|
data-item="{{
|
||||||
|
Object {
|
||||||
|
"disabled": true,
|
||||||
|
"id": 3,
|
||||||
|
"text": "宁波",
|
||||||
|
}
|
||||||
|
}}"
|
||||||
|
bind:tap="onSelectItem"
|
||||||
|
>
|
||||||
|
|
||||||
|
宁波
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis content-item-class van-tree-select__item "
|
||||||
|
data-item="{{
|
||||||
|
Object {
|
||||||
|
"id": 4,
|
||||||
|
"text": "义乌",
|
||||||
|
}
|
||||||
|
}}"
|
||||||
|
bind:tap="onSelectItem"
|
||||||
|
>
|
||||||
|
|
||||||
|
义乌
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
</wx-scroll-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-tree-select>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
</main>
|
||||||
|
`;
|
||||||
15
packages/tree-select/test/demo.spec.ts
Normal file
15
packages/tree-select/test/demo.spec.ts
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import path from 'path';
|
||||||
|
import simulate from 'miniprogram-simulate';
|
||||||
|
|
||||||
|
test('should render demo and match snapshot', () => {
|
||||||
|
try {
|
||||||
|
const id = simulate.load(path.resolve(__dirname, '../demo/index'), {
|
||||||
|
rootPath: path.resolve(__dirname, '../../'),
|
||||||
|
});
|
||||||
|
const comp = simulate.render(id);
|
||||||
|
comp.attach(document.createElement('parent-wrapper'));
|
||||||
|
expect(comp.toJSON()).toMatchSnapshot();
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
}
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user