mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
test(Picker): add demo test
This commit is contained in:
nemo-shen
neverland
parent
459bd1652f
commit
460607c2c4
@ -153,6 +153,7 @@
|
|||||||
"van-collapse-demo": "./dist/collapse/demo/index",
|
"van-collapse-demo": "./dist/collapse/demo/index",
|
||||||
"van-collapse-item": "./dist/collapse-item/index",
|
"van-collapse-item": "./dist/collapse-item/index",
|
||||||
"van-picker": "./dist/picker/index",
|
"van-picker": "./dist/picker/index",
|
||||||
|
"van-picker-demo": "./dist/picker/demo/index",
|
||||||
"van-overlay": "./dist/overlay/index",
|
"van-overlay": "./dist/overlay/index",
|
||||||
"van-overlay-demo": "./dist/overlay/demo/index",
|
"van-overlay-demo": "./dist/overlay/demo/index",
|
||||||
"van-circle": "./dist/circle/index",
|
"van-circle": "./dist/circle/index",
|
||||||
|
|||||||
@ -1,48 +1,3 @@
|
|||||||
import Page from '../../common/page';
|
import Page from '../../common/page';
|
||||||
import Toast from '../../dist/toast/toast';
|
|
||||||
|
|
||||||
Page({
|
Page();
|
||||||
data: {
|
|
||||||
column1: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
|
|
||||||
column2: [
|
|
||||||
{ text: '杭州', disabled: true },
|
|
||||||
{ text: '宁波' },
|
|
||||||
{ text: '温州' }
|
|
||||||
],
|
|
||||||
column3: {
|
|
||||||
浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
|
|
||||||
福建: ['福州', '厦门', '莆田', '三明', '泉州']
|
|
||||||
},
|
|
||||||
column4: [
|
|
||||||
{
|
|
||||||
values: ['浙江', '福建'],
|
|
||||||
className: 'column1'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
values: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
|
|
||||||
className: 'column2',
|
|
||||||
defaultIndex: 2
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
|
|
||||||
onChange1(event) {
|
|
||||||
const { value, index } = event.detail;
|
|
||||||
Toast(`Value: ${value}, Index：${index}`);
|
|
||||||
},
|
|
||||||
|
|
||||||
onConfirm(event) {
|
|
||||||
const { value, index } = event.detail;
|
|
||||||
Toast(`Value: ${value}, Index：${index}`);
|
|
||||||
},
|
|
||||||
|
|
||||||
onCancel() {
|
|
||||||
Toast('取消');
|
|
||||||
},
|
|
||||||
|
|
||||||
onChange2(event) {
|
|
||||||
const { picker, value } = event.detail;
|
|
||||||
picker.setColumnValues(1, this.data.column3[value[0]]);
|
|
||||||
getApp().picker = picker;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|||||||
@ -1,45 +1 @@
|
|||||||
<demo-block title="基础用法">
|
<van-picker-demo />
|
||||||
<van-picker
|
|
||||||
columns="{{ column1 }}"
|
|
||||||
bind:change="onChange1"
|
|
||||||
/>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="默认选中项">
|
|
||||||
<van-picker
|
|
||||||
columns="{{ column1 }}"
|
|
||||||
default-index="{{ 2 }}"
|
|
||||||
bind:change="onChange1"
|
|
||||||
/>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="展示顶部栏">
|
|
||||||
<van-picker
|
|
||||||
show-toolbar
|
|
||||||
title="标题"
|
|
||||||
columns="{{ column1 }}"
|
|
||||||
bind:change="onChange1"
|
|
||||||
bind:confirm="onConfirm"
|
|
||||||
bind:cancel="onCancel"
|
|
||||||
/>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="多列联动">
|
|
||||||
<van-picker
|
|
||||||
columns="{{ column4 }}"
|
|
||||||
bind:change="onChange2"
|
|
||||||
/>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="禁用选项">
|
|
||||||
<van-picker columns="{{ column2 }}" />
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="加载状态">
|
|
||||||
<van-picker
|
|
||||||
loading
|
|
||||||
columns="{{ column4 }}"
|
|
||||||
/>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<van-toast id="van-toast" />
|
|
||||||
|
|||||||
8
packages/picker/demo/index.json
Normal file
8
packages/picker/demo/index.json
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"component": true,
|
||||||
|
"usingComponents": {
|
||||||
|
"van-toast": "../../toast/index",
|
||||||
|
"van-picker": "../../picker/index",
|
||||||
|
"demo-block": "../../../example/components/demo-block/index"
|
||||||
|
}
|
||||||
|
}
|
||||||
59
packages/picker/demo/index.ts
Normal file
59
packages/picker/demo/index.ts
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
import { VantComponent } from '../../common/component';
|
||||||
|
import Toast from '../../toast/toast';
|
||||||
|
|
||||||
|
VantComponent({
|
||||||
|
data: {
|
||||||
|
column1: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
|
||||||
|
column2: [
|
||||||
|
{ text: '杭州', disabled: true },
|
||||||
|
{ text: '宁波' },
|
||||||
|
{ text: '温州' },
|
||||||
|
],
|
||||||
|
column3: {
|
||||||
|
浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
|
||||||
|
福建: ['福州', '厦门', '莆田', '三明', '泉州'],
|
||||||
|
},
|
||||||
|
column4: [
|
||||||
|
{
|
||||||
|
values: ['浙江', '福建'],
|
||||||
|
className: 'column1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
values: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
|
||||||
|
className: 'column2',
|
||||||
|
defaultIndex: 2,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
onChange1(event) {
|
||||||
|
const { value, index } = event.detail;
|
||||||
|
Toast({
|
||||||
|
context: this,
|
||||||
|
message: `Value: ${value}, Index：${index}`,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
onConfirm(event) {
|
||||||
|
const { value, index } = event.detail;
|
||||||
|
Toast({
|
||||||
|
context: this,
|
||||||
|
message: `Value: ${value}, Index：${index}`,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
onCancel() {
|
||||||
|
Toast({
|
||||||
|
context: this,
|
||||||
|
message: '取消',
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
onChange2(event) {
|
||||||
|
const { picker, value } = event.detail;
|
||||||
|
picker.setColumnValues(1, this.data.column3[value[0]]);
|
||||||
|
getApp().picker = picker;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
45
packages/picker/demo/index.wxml
Normal file
45
packages/picker/demo/index.wxml
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
<demo-block title="基础用法">
|
||||||
|
<van-picker
|
||||||
|
columns="{{ column1 }}"
|
||||||
|
bind:change="onChange1"
|
||||||
|
/>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="默认选中项">
|
||||||
|
<van-picker
|
||||||
|
columns="{{ column1 }}"
|
||||||
|
default-index="{{ 2 }}"
|
||||||
|
bind:change="onChange1"
|
||||||
|
/>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="展示顶部栏">
|
||||||
|
<van-picker
|
||||||
|
show-toolbar
|
||||||
|
title="标题"
|
||||||
|
columns="{{ column1 }}"
|
||||||
|
bind:change="onChange1"
|
||||||
|
bind:confirm="onConfirm"
|
||||||
|
bind:cancel="onCancel"
|
||||||
|
/>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="多列联动">
|
||||||
|
<van-picker
|
||||||
|
columns="{{ column4 }}"
|
||||||
|
bind:change="onChange2"
|
||||||
|
/>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="禁用选项">
|
||||||
|
<van-picker columns="{{ column2 }}" />
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="加载状态">
|
||||||
|
<van-picker
|
||||||
|
loading
|
||||||
|
columns="{{ column4 }}"
|
||||||
|
/>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<van-toast id="van-toast" />
|
||||||
682
packages/picker/test/__snapshots__/demo.spec.ts.snap
Normal file
682
packages/picker/test/__snapshots__/demo.spec.ts.snap
Normal file
@ -0,0 +1,682 @@
|
|||||||
|
// 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-picker
|
||||||
|
bind:change="onChange1"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-picker custom-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-picker__columns"
|
||||||
|
style="height:264px"
|
||||||
|
catch:touchmove="noop"
|
||||||
|
>
|
||||||
|
<picker-column
|
||||||
|
activeClass="active-class"
|
||||||
|
class="van-picker__column"
|
||||||
|
customClass="column-class"
|
||||||
|
data-index="{{0}}"
|
||||||
|
bind:change="onChange"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-picker-column custom-class"
|
||||||
|
style="height:264px"
|
||||||
|
bind:touchcancel="onTouchEnd"
|
||||||
|
bind:touchend="onTouchEnd"
|
||||||
|
catch:touchmove="onTouchMove"
|
||||||
|
bind:touchstart="onTouchStart"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
style="transition:transform 0ms;line-height:44px;transform:translate3d(0, 110px, 0)"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis van-picker-column__item van-picker-column__item--selected active-class"
|
||||||
|
data-index="{{0}}"
|
||||||
|
style="height: 44px"
|
||||||
|
bind:tap="onClickItem"
|
||||||
|
>
|
||||||
|
杭州
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis van-picker-column__item "
|
||||||
|
data-index="{{1}}"
|
||||||
|
style="height: 44px"
|
||||||
|
bind:tap="onClickItem"
|
||||||
|
>
|
||||||
|
宁波
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis van-picker-column__item "
|
||||||
|
data-index="{{2}}"
|
||||||
|
style="height: 44px"
|
||||||
|
bind:tap="onClickItem"
|
||||||
|
>
|
||||||
|
温州
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis van-picker-column__item "
|
||||||
|
data-index="{{3}}"
|
||||||
|
style="height: 44px"
|
||||||
|
bind:tap="onClickItem"
|
||||||
|
>
|
||||||
|
嘉兴
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis van-picker-column__item "
|
||||||
|
data-index="{{4}}"
|
||||||
|
style="height: 44px"
|
||||||
|
bind:tap="onClickItem"
|
||||||
|
>
|
||||||
|
湖州
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</picker-column>
|
||||||
|
<wx-view
|
||||||
|
class="van-picker__mask"
|
||||||
|
style="background-size:100% 110px"
|
||||||
|
/>
|
||||||
|
<wx-view
|
||||||
|
class="van-picker__frame van-hairline--top-bottom"
|
||||||
|
style="height:44px"
|
||||||
|
/>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-picker>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class demo-block van-clearfix "
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
默认选中项
|
||||||
|
</wx-view>
|
||||||
|
<van-picker
|
||||||
|
bind:change="onChange1"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-picker custom-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-picker__columns"
|
||||||
|
style="height:264px"
|
||||||
|
catch:touchmove="noop"
|
||||||
|
>
|
||||||
|
<picker-column
|
||||||
|
activeClass="active-class"
|
||||||
|
class="van-picker__column"
|
||||||
|
customClass="column-class"
|
||||||
|
data-index="{{0}}"
|
||||||
|
bind:change="onChange"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-picker-column custom-class"
|
||||||
|
style="height:264px"
|
||||||
|
bind:touchcancel="onTouchEnd"
|
||||||
|
bind:touchend="onTouchEnd"
|
||||||
|
catch:touchmove="onTouchMove"
|
||||||
|
bind:touchstart="onTouchStart"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
style="transition:transform 0ms;line-height:44px;transform:translate3d(0, 110px, 0)"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis van-picker-column__item "
|
||||||
|
data-index="{{0}}"
|
||||||
|
style="height: 44px"
|
||||||
|
bind:tap="onClickItem"
|
||||||
|
>
|
||||||
|
杭州
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis van-picker-column__item "
|
||||||
|
data-index="{{1}}"
|
||||||
|
style="height: 44px"
|
||||||
|
bind:tap="onClickItem"
|
||||||
|
>
|
||||||
|
宁波
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis van-picker-column__item van-picker-column__item--selected active-class"
|
||||||
|
data-index="{{2}}"
|
||||||
|
style="height: 44px"
|
||||||
|
bind:tap="onClickItem"
|
||||||
|
>
|
||||||
|
温州
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis van-picker-column__item "
|
||||||
|
data-index="{{3}}"
|
||||||
|
style="height: 44px"
|
||||||
|
bind:tap="onClickItem"
|
||||||
|
>
|
||||||
|
嘉兴
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis van-picker-column__item "
|
||||||
|
data-index="{{4}}"
|
||||||
|
style="height: 44px"
|
||||||
|
bind:tap="onClickItem"
|
||||||
|
>
|
||||||
|
湖州
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</picker-column>
|
||||||
|
<wx-view
|
||||||
|
class="van-picker__mask"
|
||||||
|
style="background-size:100% 110px"
|
||||||
|
/>
|
||||||
|
<wx-view
|
||||||
|
class="van-picker__frame van-hairline--top-bottom"
|
||||||
|
style="height:44px"
|
||||||
|
/>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-picker>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class demo-block van-clearfix "
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
展示顶部栏
|
||||||
|
</wx-view>
|
||||||
|
<van-picker
|
||||||
|
bind:cancel="onCancel"
|
||||||
|
bind:change="onChange1"
|
||||||
|
bind:confirm="onConfirm"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-picker custom-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-picker__toolbar toolbar-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-picker__cancel"
|
||||||
|
data-type="cancel"
|
||||||
|
hoverClass="van-picker__cancel--hover"
|
||||||
|
hoverStayTime="70"
|
||||||
|
bind:tap="emit"
|
||||||
|
>
|
||||||
|
|
||||||
|
取消
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-picker__title van-ellipsis"
|
||||||
|
>
|
||||||
|
标题
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-picker__confirm"
|
||||||
|
data-type="confirm"
|
||||||
|
hoverClass="van-picker__confirm--hover"
|
||||||
|
hoverStayTime="70"
|
||||||
|
bind:tap="emit"
|
||||||
|
>
|
||||||
|
|
||||||
|
确认
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-picker__columns"
|
||||||
|
style="height:264px"
|
||||||
|
catch:touchmove="noop"
|
||||||
|
>
|
||||||
|
<picker-column
|
||||||
|
activeClass="active-class"
|
||||||
|
class="van-picker__column"
|
||||||
|
customClass="column-class"
|
||||||
|
data-index="{{0}}"
|
||||||
|
bind:change="onChange"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-picker-column custom-class"
|
||||||
|
style="height:264px"
|
||||||
|
bind:touchcancel="onTouchEnd"
|
||||||
|
bind:touchend="onTouchEnd"
|
||||||
|
catch:touchmove="onTouchMove"
|
||||||
|
bind:touchstart="onTouchStart"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
style="transition:transform 0ms;line-height:44px;transform:translate3d(0, 110px, 0)"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis van-picker-column__item van-picker-column__item--selected active-class"
|
||||||
|
data-index="{{0}}"
|
||||||
|
style="height: 44px"
|
||||||
|
bind:tap="onClickItem"
|
||||||
|
>
|
||||||
|
杭州
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis van-picker-column__item "
|
||||||
|
data-index="{{1}}"
|
||||||
|
style="height: 44px"
|
||||||
|
bind:tap="onClickItem"
|
||||||
|
>
|
||||||
|
宁波
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis van-picker-column__item "
|
||||||
|
data-index="{{2}}"
|
||||||
|
style="height: 44px"
|
||||||
|
bind:tap="onClickItem"
|
||||||
|
>
|
||||||
|
温州
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis van-picker-column__item "
|
||||||
|
data-index="{{3}}"
|
||||||
|
style="height: 44px"
|
||||||
|
bind:tap="onClickItem"
|
||||||
|
>
|
||||||
|
嘉兴
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis van-picker-column__item "
|
||||||
|
data-index="{{4}}"
|
||||||
|
style="height: 44px"
|
||||||
|
bind:tap="onClickItem"
|
||||||
|
>
|
||||||
|
湖州
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</picker-column>
|
||||||
|
<wx-view
|
||||||
|
class="van-picker__mask"
|
||||||
|
style="background-size:100% 110px"
|
||||||
|
/>
|
||||||
|
<wx-view
|
||||||
|
class="van-picker__frame van-hairline--top-bottom"
|
||||||
|
style="height:44px"
|
||||||
|
/>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-picker>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class demo-block van-clearfix "
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
多列联动
|
||||||
|
</wx-view>
|
||||||
|
<van-picker
|
||||||
|
bind:change="onChange2"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-picker custom-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-picker__columns"
|
||||||
|
style="height:264px"
|
||||||
|
catch:touchmove="noop"
|
||||||
|
>
|
||||||
|
<picker-column
|
||||||
|
activeClass="active-class"
|
||||||
|
class="van-picker__column"
|
||||||
|
customClass="column-class"
|
||||||
|
data-index="{{0}}"
|
||||||
|
bind:change="onChange"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-picker-column custom-class"
|
||||||
|
style="height:264px"
|
||||||
|
bind:touchcancel="onTouchEnd"
|
||||||
|
bind:touchend="onTouchEnd"
|
||||||
|
catch:touchmove="onTouchMove"
|
||||||
|
bind:touchstart="onTouchStart"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
style="transition:transform 0ms;line-height:44px;transform:translate3d(0, 110px, 0)"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis van-picker-column__item van-picker-column__item--selected active-class"
|
||||||
|
data-index="{{0}}"
|
||||||
|
style="height: 44px"
|
||||||
|
bind:tap="onClickItem"
|
||||||
|
>
|
||||||
|
浙江
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis van-picker-column__item "
|
||||||
|
data-index="{{1}}"
|
||||||
|
style="height: 44px"
|
||||||
|
bind:tap="onClickItem"
|
||||||
|
>
|
||||||
|
福建
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</picker-column>
|
||||||
|
<picker-column
|
||||||
|
activeClass="active-class"
|
||||||
|
class="van-picker__column"
|
||||||
|
customClass="column-class"
|
||||||
|
data-index="{{1}}"
|
||||||
|
bind:change="onChange"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-picker-column custom-class"
|
||||||
|
style="height:264px"
|
||||||
|
bind:touchcancel="onTouchEnd"
|
||||||
|
bind:touchend="onTouchEnd"
|
||||||
|
catch:touchmove="onTouchMove"
|
||||||
|
bind:touchstart="onTouchStart"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
style="transition:transform 0ms;line-height:44px;transform:translate3d(0, 110px, 0)"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis van-picker-column__item "
|
||||||
|
data-index="{{0}}"
|
||||||
|
style="height: 44px"
|
||||||
|
bind:tap="onClickItem"
|
||||||
|
>
|
||||||
|
杭州
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis van-picker-column__item "
|
||||||
|
data-index="{{1}}"
|
||||||
|
style="height: 44px"
|
||||||
|
bind:tap="onClickItem"
|
||||||
|
>
|
||||||
|
宁波
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis van-picker-column__item van-picker-column__item--selected active-class"
|
||||||
|
data-index="{{2}}"
|
||||||
|
style="height: 44px"
|
||||||
|
bind:tap="onClickItem"
|
||||||
|
>
|
||||||
|
温州
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis van-picker-column__item "
|
||||||
|
data-index="{{3}}"
|
||||||
|
style="height: 44px"
|
||||||
|
bind:tap="onClickItem"
|
||||||
|
>
|
||||||
|
嘉兴
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis van-picker-column__item "
|
||||||
|
data-index="{{4}}"
|
||||||
|
style="height: 44px"
|
||||||
|
bind:tap="onClickItem"
|
||||||
|
>
|
||||||
|
湖州
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</picker-column>
|
||||||
|
<wx-view
|
||||||
|
class="van-picker__mask"
|
||||||
|
style="background-size:100% 110px"
|
||||||
|
/>
|
||||||
|
<wx-view
|
||||||
|
class="van-picker__frame van-hairline--top-bottom"
|
||||||
|
style="height:44px"
|
||||||
|
/>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-picker>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class demo-block van-clearfix "
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
禁用选项
|
||||||
|
</wx-view>
|
||||||
|
<van-picker>
|
||||||
|
<wx-view
|
||||||
|
class="van-picker custom-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-picker__columns"
|
||||||
|
style="height:264px"
|
||||||
|
catch:touchmove="noop"
|
||||||
|
>
|
||||||
|
<picker-column
|
||||||
|
activeClass="active-class"
|
||||||
|
class="van-picker__column"
|
||||||
|
customClass="column-class"
|
||||||
|
data-index="{{0}}"
|
||||||
|
bind:change="onChange"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-picker-column custom-class"
|
||||||
|
style="height:264px"
|
||||||
|
bind:touchcancel="onTouchEnd"
|
||||||
|
bind:touchend="onTouchEnd"
|
||||||
|
catch:touchmove="onTouchMove"
|
||||||
|
bind:touchstart="onTouchStart"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
style="transition:transform 0ms;line-height:44px;transform:translate3d(0, 110px, 0)"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis van-picker-column__item van-picker-column__item--disabled van-picker-column__item--selected active-class"
|
||||||
|
data-index="{{0}}"
|
||||||
|
style="height: 44px"
|
||||||
|
bind:tap="onClickItem"
|
||||||
|
>
|
||||||
|
杭州
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis van-picker-column__item "
|
||||||
|
data-index="{{1}}"
|
||||||
|
style="height: 44px"
|
||||||
|
bind:tap="onClickItem"
|
||||||
|
>
|
||||||
|
宁波
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis van-picker-column__item "
|
||||||
|
data-index="{{2}}"
|
||||||
|
style="height: 44px"
|
||||||
|
bind:tap="onClickItem"
|
||||||
|
>
|
||||||
|
温州
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</picker-column>
|
||||||
|
<wx-view
|
||||||
|
class="van-picker__mask"
|
||||||
|
style="background-size:100% 110px"
|
||||||
|
/>
|
||||||
|
<wx-view
|
||||||
|
class="van-picker__frame van-hairline--top-bottom"
|
||||||
|
style="height:44px"
|
||||||
|
/>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-picker>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class demo-block van-clearfix "
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
加载状态
|
||||||
|
</wx-view>
|
||||||
|
<van-picker>
|
||||||
|
<wx-view
|
||||||
|
class="van-picker custom-class"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-picker__loading"
|
||||||
|
>
|
||||||
|
<van-loading>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-loading"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-loading__spinner van-loading__spinner--circular"
|
||||||
|
style="color:#1989fa"
|
||||||
|
/>
|
||||||
|
<wx-view
|
||||||
|
class="van-loading__text"
|
||||||
|
style=""
|
||||||
|
/>
|
||||||
|
</wx-view>
|
||||||
|
</van-loading>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-picker__columns"
|
||||||
|
style="height:264px"
|
||||||
|
catch:touchmove="noop"
|
||||||
|
>
|
||||||
|
<picker-column
|
||||||
|
activeClass="active-class"
|
||||||
|
class="van-picker__column"
|
||||||
|
customClass="column-class"
|
||||||
|
data-index="{{0}}"
|
||||||
|
bind:change="onChange"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-picker-column custom-class"
|
||||||
|
style="height:264px"
|
||||||
|
bind:touchcancel="onTouchEnd"
|
||||||
|
bind:touchend="onTouchEnd"
|
||||||
|
catch:touchmove="onTouchMove"
|
||||||
|
bind:touchstart="onTouchStart"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
style="transition:transform 0ms;line-height:44px;transform:translate3d(0, 110px, 0)"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis van-picker-column__item van-picker-column__item--selected active-class"
|
||||||
|
data-index="{{0}}"
|
||||||
|
style="height: 44px"
|
||||||
|
bind:tap="onClickItem"
|
||||||
|
>
|
||||||
|
浙江
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis van-picker-column__item "
|
||||||
|
data-index="{{1}}"
|
||||||
|
style="height: 44px"
|
||||||
|
bind:tap="onClickItem"
|
||||||
|
>
|
||||||
|
福建
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</picker-column>
|
||||||
|
<picker-column
|
||||||
|
activeClass="active-class"
|
||||||
|
class="van-picker__column"
|
||||||
|
customClass="column-class"
|
||||||
|
data-index="{{1}}"
|
||||||
|
bind:change="onChange"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-picker-column custom-class"
|
||||||
|
style="height:264px"
|
||||||
|
bind:touchcancel="onTouchEnd"
|
||||||
|
bind:touchend="onTouchEnd"
|
||||||
|
catch:touchmove="onTouchMove"
|
||||||
|
bind:touchstart="onTouchStart"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
style="transition:transform 0ms;line-height:44px;transform:translate3d(0, 110px, 0)"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis van-picker-column__item "
|
||||||
|
data-index="{{0}}"
|
||||||
|
style="height: 44px"
|
||||||
|
bind:tap="onClickItem"
|
||||||
|
>
|
||||||
|
杭州
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis van-picker-column__item "
|
||||||
|
data-index="{{1}}"
|
||||||
|
style="height: 44px"
|
||||||
|
bind:tap="onClickItem"
|
||||||
|
>
|
||||||
|
宁波
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis van-picker-column__item van-picker-column__item--selected active-class"
|
||||||
|
data-index="{{2}}"
|
||||||
|
style="height: 44px"
|
||||||
|
bind:tap="onClickItem"
|
||||||
|
>
|
||||||
|
温州
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis van-picker-column__item "
|
||||||
|
data-index="{{3}}"
|
||||||
|
style="height: 44px"
|
||||||
|
bind:tap="onClickItem"
|
||||||
|
>
|
||||||
|
嘉兴
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis van-picker-column__item "
|
||||||
|
data-index="{{4}}"
|
||||||
|
style="height: 44px"
|
||||||
|
bind:tap="onClickItem"
|
||||||
|
>
|
||||||
|
湖州
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</picker-column>
|
||||||
|
<wx-view
|
||||||
|
class="van-picker__mask"
|
||||||
|
style="background-size:100% 110px"
|
||||||
|
/>
|
||||||
|
<wx-view
|
||||||
|
class="van-picker__frame van-hairline--top-bottom"
|
||||||
|
style="height:44px"
|
||||||
|
/>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-picker>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
<van-toast
|
||||||
|
id="van-toast"
|
||||||
|
>
|
||||||
|
<van-transition
|
||||||
|
customClass="van-toast__container"
|
||||||
|
/>
|
||||||
|
</van-toast>
|
||||||
|
</main>
|
||||||
|
`;
|
||||||
11
packages/picker/test/demo.spec.ts
Normal file
11
packages/picker/test/demo.spec.ts
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import path from 'path';
|
||||||
|
import simulate from 'miniprogram-simulate';
|
||||||
|
|
||||||
|
test('should render demo and match snapshot', () => {
|
||||||
|
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();
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user