mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 19:41:45 +08:00
test(Popup): add demo test
This commit is contained in:
nemo-shen
neverland
parent
bd9ce42f8d
commit
88529e642f
@ -103,6 +103,7 @@
|
|||||||
"van-panel": "./dist/panel/index",
|
"van-panel": "./dist/panel/index",
|
||||||
"van-panel-demo": "./dist/panel/demo/index",
|
"van-panel-demo": "./dist/panel/demo/index",
|
||||||
"van-popup": "./dist/popup/index",
|
"van-popup": "./dist/popup/index",
|
||||||
|
"van-popup-demo": "./dist/popup/demo/index",
|
||||||
"van-progress": "./dist/progress/index",
|
"van-progress": "./dist/progress/index",
|
||||||
"van-radio": "./dist/radio/index",
|
"van-radio": "./dist/radio/index",
|
||||||
"van-radio-demo": "./dist/radio/demo/index",
|
"van-radio-demo": "./dist/radio/demo/index",
|
||||||
|
|||||||
@ -1,95 +1,3 @@
|
|||||||
import Page from '../../common/page';
|
import Page from '../../common/page';
|
||||||
|
|
||||||
Page({
|
Page();
|
||||||
data: {
|
|
||||||
show: {
|
|
||||||
basic: false,
|
|
||||||
top: false,
|
|
||||||
bottom: false,
|
|
||||||
left: false,
|
|
||||||
right: false,
|
|
||||||
round: false,
|
|
||||||
closeIcon: false,
|
|
||||||
customCloseIcon: false,
|
|
||||||
customIconPosition: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
toggle(type, show) {
|
|
||||||
this.setData({
|
|
||||||
[`show.${type}`]: show
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
showBasic() {
|
|
||||||
this.toggle('basic', true);
|
|
||||||
},
|
|
||||||
|
|
||||||
hideBasic() {
|
|
||||||
this.toggle('basic', false);
|
|
||||||
},
|
|
||||||
|
|
||||||
showTop() {
|
|
||||||
this.toggle('top', true);
|
|
||||||
},
|
|
||||||
|
|
||||||
hideTop() {
|
|
||||||
this.toggle('top', false);
|
|
||||||
},
|
|
||||||
|
|
||||||
showLeft() {
|
|
||||||
this.toggle('left', true);
|
|
||||||
},
|
|
||||||
|
|
||||||
hideLeft() {
|
|
||||||
this.toggle('left', false);
|
|
||||||
},
|
|
||||||
|
|
||||||
showRight() {
|
|
||||||
this.toggle('right', true);
|
|
||||||
},
|
|
||||||
|
|
||||||
hideRight() {
|
|
||||||
this.toggle('right', false);
|
|
||||||
},
|
|
||||||
|
|
||||||
showBottom() {
|
|
||||||
this.toggle('bottom', true);
|
|
||||||
},
|
|
||||||
|
|
||||||
hideBottom() {
|
|
||||||
this.toggle('bottom', false);
|
|
||||||
},
|
|
||||||
|
|
||||||
showRound() {
|
|
||||||
this.toggle('round', true);
|
|
||||||
},
|
|
||||||
|
|
||||||
hideRound() {
|
|
||||||
this.toggle('round', false);
|
|
||||||
},
|
|
||||||
|
|
||||||
showCloseIcon() {
|
|
||||||
this.toggle('closeIcon', true);
|
|
||||||
},
|
|
||||||
|
|
||||||
hideCloseIcon() {
|
|
||||||
this.toggle('closeIcon', false);
|
|
||||||
},
|
|
||||||
|
|
||||||
showCustomCloseIcon() {
|
|
||||||
this.toggle('customCloseIcon', true);
|
|
||||||
},
|
|
||||||
|
|
||||||
hideCustomCloseIcon() {
|
|
||||||
this.toggle('customCloseIcon', false);
|
|
||||||
},
|
|
||||||
|
|
||||||
showCustomIconPosition() {
|
|
||||||
this.toggle('customIconPosition', true);
|
|
||||||
},
|
|
||||||
|
|
||||||
hideCustomIconPosition() {
|
|
||||||
this.toggle('customIconPosition', false);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|||||||
@ -1,86 +1 @@
|
|||||||
<demo-block title="基础用法">
|
<van-popup-demo />
|
||||||
<van-cell title="展示弹出层" is-link bind:click="showBasic" />
|
|
||||||
<van-popup
|
|
||||||
show="{{ show.basic }}"
|
|
||||||
custom-style="padding: 30px 50px"
|
|
||||||
bind:close="hideBasic"
|
|
||||||
>
|
|
||||||
内容
|
|
||||||
</van-popup>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="弹出位置">
|
|
||||||
<van-cell title="顶部弹出" is-link bind:click="showTop" />
|
|
||||||
<van-cell title="底部弹出" is-link bind:click="showBottom" />
|
|
||||||
<van-cell title="左侧弹出" is-link bind:click="showLeft" />
|
|
||||||
<van-cell title="右侧弹出" is-link bind:click="showRight" />
|
|
||||||
|
|
||||||
<van-popup
|
|
||||||
show="{{ show.top }}"
|
|
||||||
position="top"
|
|
||||||
custom-style="height: 20%"
|
|
||||||
bind:close="hideTop"
|
|
||||||
/>
|
|
||||||
<van-popup
|
|
||||||
show="{{ show.bottom }}"
|
|
||||||
position="bottom"
|
|
||||||
custom-style="height: 20%"
|
|
||||||
bind:close="hideBottom"
|
|
||||||
/>
|
|
||||||
<van-popup
|
|
||||||
show="{{ show.left }}"
|
|
||||||
position="left"
|
|
||||||
custom-style="width: 20%; height: 100%"
|
|
||||||
bind:close="hideLeft"
|
|
||||||
/>
|
|
||||||
<van-popup
|
|
||||||
show="{{ show.right }}"
|
|
||||||
position="right"
|
|
||||||
custom-style="width: 20%; height: 100%"
|
|
||||||
bind:close="hideRight"
|
|
||||||
/>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="关闭图标">
|
|
||||||
<van-cell title="关闭图标" is-link bind:click="showCloseIcon" />
|
|
||||||
<van-cell title="自定义图标" is-link bind:click="showCustomCloseIcon" />
|
|
||||||
<van-cell title="图标位置" is-link bind:click="showCustomIconPosition" />
|
|
||||||
|
|
||||||
<van-popup
|
|
||||||
show="{{ show.closeIcon }}"
|
|
||||||
closeable
|
|
||||||
position="bottom"
|
|
||||||
custom-style="height: 20%"
|
|
||||||
bind:close="hideCloseIcon"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<van-popup
|
|
||||||
show="{{ show.customCloseIcon }}"
|
|
||||||
closeable
|
|
||||||
close-icon="close"
|
|
||||||
position="bottom"
|
|
||||||
custom-style="height: 20%"
|
|
||||||
bind:close="hideCustomCloseIcon"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<van-popup
|
|
||||||
show="{{ show.customIconPosition }}"
|
|
||||||
closeable
|
|
||||||
close-icon-position="top-left"
|
|
||||||
position="bottom"
|
|
||||||
custom-style="height: 20%"
|
|
||||||
bind:close="hideCustomIconPosition"
|
|
||||||
/>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="圆角弹窗">
|
|
||||||
<van-cell title="圆角弹窗" is-link bind:click="showRound" />
|
|
||||||
|
|
||||||
<van-popup
|
|
||||||
show="{{ show.round }}"
|
|
||||||
round
|
|
||||||
position="bottom"
|
|
||||||
custom-style="height: 20%"
|
|
||||||
bind:close="hideRound"
|
|
||||||
/>
|
|
||||||
</demo-block>
|
|
||||||
|
|||||||
8
packages/popup/demo/index.json
Normal file
8
packages/popup/demo/index.json
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"component": true,
|
||||||
|
"usingComponents": {
|
||||||
|
"van-cell": "../../cell/index",
|
||||||
|
"van-popup": "../../popup/index",
|
||||||
|
"demo-block": "../../../example/components/demo-block/index"
|
||||||
|
}
|
||||||
|
}
|
||||||
97
packages/popup/demo/index.ts
Normal file
97
packages/popup/demo/index.ts
Normal file
@ -0,0 +1,97 @@
|
|||||||
|
import { VantComponent } from '../../common/component';
|
||||||
|
|
||||||
|
VantComponent({
|
||||||
|
data: {
|
||||||
|
show: {
|
||||||
|
basic: false,
|
||||||
|
top: false,
|
||||||
|
bottom: false,
|
||||||
|
left: false,
|
||||||
|
right: false,
|
||||||
|
round: false,
|
||||||
|
closeIcon: false,
|
||||||
|
customCloseIcon: false,
|
||||||
|
customIconPosition: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
toggle(type, show) {
|
||||||
|
this.setData({
|
||||||
|
[`show.${type}`]: show,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
showBasic() {
|
||||||
|
this.toggle('basic', true);
|
||||||
|
},
|
||||||
|
|
||||||
|
hideBasic() {
|
||||||
|
this.toggle('basic', false);
|
||||||
|
},
|
||||||
|
|
||||||
|
showTop() {
|
||||||
|
this.toggle('top', true);
|
||||||
|
},
|
||||||
|
|
||||||
|
hideTop() {
|
||||||
|
this.toggle('top', false);
|
||||||
|
},
|
||||||
|
|
||||||
|
showLeft() {
|
||||||
|
this.toggle('left', true);
|
||||||
|
},
|
||||||
|
|
||||||
|
hideLeft() {
|
||||||
|
this.toggle('left', false);
|
||||||
|
},
|
||||||
|
|
||||||
|
showRight() {
|
||||||
|
this.toggle('right', true);
|
||||||
|
},
|
||||||
|
|
||||||
|
hideRight() {
|
||||||
|
this.toggle('right', false);
|
||||||
|
},
|
||||||
|
|
||||||
|
showBottom() {
|
||||||
|
this.toggle('bottom', true);
|
||||||
|
},
|
||||||
|
|
||||||
|
hideBottom() {
|
||||||
|
this.toggle('bottom', false);
|
||||||
|
},
|
||||||
|
|
||||||
|
showRound() {
|
||||||
|
this.toggle('round', true);
|
||||||
|
},
|
||||||
|
|
||||||
|
hideRound() {
|
||||||
|
this.toggle('round', false);
|
||||||
|
},
|
||||||
|
|
||||||
|
showCloseIcon() {
|
||||||
|
this.toggle('closeIcon', true);
|
||||||
|
},
|
||||||
|
|
||||||
|
hideCloseIcon() {
|
||||||
|
this.toggle('closeIcon', false);
|
||||||
|
},
|
||||||
|
|
||||||
|
showCustomCloseIcon() {
|
||||||
|
this.toggle('customCloseIcon', true);
|
||||||
|
},
|
||||||
|
|
||||||
|
hideCustomCloseIcon() {
|
||||||
|
this.toggle('customCloseIcon', false);
|
||||||
|
},
|
||||||
|
|
||||||
|
showCustomIconPosition() {
|
||||||
|
this.toggle('customIconPosition', true);
|
||||||
|
},
|
||||||
|
|
||||||
|
hideCustomIconPosition() {
|
||||||
|
this.toggle('customIconPosition', false);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
86
packages/popup/demo/index.wxml
Normal file
86
packages/popup/demo/index.wxml
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
<demo-block title="基础用法">
|
||||||
|
<van-cell title="展示弹出层" is-link bind:click="showBasic" />
|
||||||
|
<van-popup
|
||||||
|
show="{{ show.basic }}"
|
||||||
|
custom-style="padding: 30px 50px"
|
||||||
|
bind:close="hideBasic"
|
||||||
|
>
|
||||||
|
内容
|
||||||
|
</van-popup>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="弹出位置">
|
||||||
|
<van-cell title="顶部弹出" is-link bind:click="showTop" />
|
||||||
|
<van-cell title="底部弹出" is-link bind:click="showBottom" />
|
||||||
|
<van-cell title="左侧弹出" is-link bind:click="showLeft" />
|
||||||
|
<van-cell title="右侧弹出" is-link bind:click="showRight" />
|
||||||
|
|
||||||
|
<van-popup
|
||||||
|
show="{{ show.top }}"
|
||||||
|
position="top"
|
||||||
|
custom-style="height: 20%"
|
||||||
|
bind:close="hideTop"
|
||||||
|
/>
|
||||||
|
<van-popup
|
||||||
|
show="{{ show.bottom }}"
|
||||||
|
position="bottom"
|
||||||
|
custom-style="height: 20%"
|
||||||
|
bind:close="hideBottom"
|
||||||
|
/>
|
||||||
|
<van-popup
|
||||||
|
show="{{ show.left }}"
|
||||||
|
position="left"
|
||||||
|
custom-style="width: 20%; height: 100%"
|
||||||
|
bind:close="hideLeft"
|
||||||
|
/>
|
||||||
|
<van-popup
|
||||||
|
show="{{ show.right }}"
|
||||||
|
position="right"
|
||||||
|
custom-style="width: 20%; height: 100%"
|
||||||
|
bind:close="hideRight"
|
||||||
|
/>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="关闭图标">
|
||||||
|
<van-cell title="关闭图标" is-link bind:click="showCloseIcon" />
|
||||||
|
<van-cell title="自定义图标" is-link bind:click="showCustomCloseIcon" />
|
||||||
|
<van-cell title="图标位置" is-link bind:click="showCustomIconPosition" />
|
||||||
|
|
||||||
|
<van-popup
|
||||||
|
show="{{ show.closeIcon }}"
|
||||||
|
closeable
|
||||||
|
position="bottom"
|
||||||
|
custom-style="height: 20%"
|
||||||
|
bind:close="hideCloseIcon"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<van-popup
|
||||||
|
show="{{ show.customCloseIcon }}"
|
||||||
|
closeable
|
||||||
|
close-icon="close"
|
||||||
|
position="bottom"
|
||||||
|
custom-style="height: 20%"
|
||||||
|
bind:close="hideCustomCloseIcon"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<van-popup
|
||||||
|
show="{{ show.customIconPosition }}"
|
||||||
|
closeable
|
||||||
|
close-icon-position="top-left"
|
||||||
|
position="bottom"
|
||||||
|
custom-style="height: 20%"
|
||||||
|
bind:close="hideCustomIconPosition"
|
||||||
|
/>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="圆角弹窗">
|
||||||
|
<van-cell title="圆角弹窗" is-link bind:click="showRound" />
|
||||||
|
|
||||||
|
<van-popup
|
||||||
|
show="{{ show.round }}"
|
||||||
|
round
|
||||||
|
position="bottom"
|
||||||
|
custom-style="height: 20%"
|
||||||
|
bind:close="hideRound"
|
||||||
|
/>
|
||||||
|
</demo-block>
|
||||||
446
packages/popup/test/__snapshots__/demo.spec.ts.snap
Normal file
446
packages/popup/test/__snapshots__/demo.spec.ts.snap
Normal file
@ -0,0 +1,446 @@
|
|||||||
|
// 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-cell
|
||||||
|
bind:click="showBasic"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-cell van-cell--clickable"
|
||||||
|
hoverClass="van-cell--hover hover-class"
|
||||||
|
hoverStayTime="70"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-cell__title title-class"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
展示弹出层
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-cell__value value-class"
|
||||||
|
/>
|
||||||
|
<van-icon
|
||||||
|
class="van-cell__right-icon-wrap right-icon-class"
|
||||||
|
customClass="van-cell__right-icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-arrow"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
</van-cell>
|
||||||
|
<van-popup
|
||||||
|
bind:close="hideBasic"
|
||||||
|
>
|
||||||
|
<van-overlay
|
||||||
|
bind:click="onClickOverlay"
|
||||||
|
>
|
||||||
|
<van-transition
|
||||||
|
customClass="van-overlay"
|
||||||
|
bind:tap="onClick"
|
||||||
|
catch:touchmove="noop"
|
||||||
|
/>
|
||||||
|
</van-overlay>
|
||||||
|
</van-popup>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class demo-block van-clearfix "
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
弹出位置
|
||||||
|
</wx-view>
|
||||||
|
<van-cell
|
||||||
|
bind:click="showTop"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-cell van-cell--clickable"
|
||||||
|
hoverClass="van-cell--hover hover-class"
|
||||||
|
hoverStayTime="70"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-cell__title title-class"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
顶部弹出
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-cell__value value-class"
|
||||||
|
/>
|
||||||
|
<van-icon
|
||||||
|
class="van-cell__right-icon-wrap right-icon-class"
|
||||||
|
customClass="van-cell__right-icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-arrow"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
</van-cell>
|
||||||
|
<van-cell
|
||||||
|
bind:click="showBottom"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-cell van-cell--clickable"
|
||||||
|
hoverClass="van-cell--hover hover-class"
|
||||||
|
hoverStayTime="70"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-cell__title title-class"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
底部弹出
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-cell__value value-class"
|
||||||
|
/>
|
||||||
|
<van-icon
|
||||||
|
class="van-cell__right-icon-wrap right-icon-class"
|
||||||
|
customClass="van-cell__right-icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-arrow"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
</van-cell>
|
||||||
|
<van-cell
|
||||||
|
bind:click="showLeft"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-cell van-cell--clickable"
|
||||||
|
hoverClass="van-cell--hover hover-class"
|
||||||
|
hoverStayTime="70"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-cell__title title-class"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
左侧弹出
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-cell__value value-class"
|
||||||
|
/>
|
||||||
|
<van-icon
|
||||||
|
class="van-cell__right-icon-wrap right-icon-class"
|
||||||
|
customClass="van-cell__right-icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-arrow"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
</van-cell>
|
||||||
|
<van-cell
|
||||||
|
bind:click="showRight"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-cell van-cell--clickable"
|
||||||
|
hoverClass="van-cell--hover hover-class"
|
||||||
|
hoverStayTime="70"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-cell__title title-class"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
右侧弹出
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-cell__value value-class"
|
||||||
|
/>
|
||||||
|
<van-icon
|
||||||
|
class="van-cell__right-icon-wrap right-icon-class"
|
||||||
|
customClass="van-cell__right-icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-arrow"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
</van-cell>
|
||||||
|
<van-popup
|
||||||
|
bind:close="hideTop"
|
||||||
|
>
|
||||||
|
<van-overlay
|
||||||
|
bind:click="onClickOverlay"
|
||||||
|
>
|
||||||
|
<van-transition
|
||||||
|
customClass="van-overlay"
|
||||||
|
bind:tap="onClick"
|
||||||
|
catch:touchmove="noop"
|
||||||
|
/>
|
||||||
|
</van-overlay>
|
||||||
|
</van-popup>
|
||||||
|
<van-popup
|
||||||
|
bind:close="hideBottom"
|
||||||
|
>
|
||||||
|
<van-overlay
|
||||||
|
bind:click="onClickOverlay"
|
||||||
|
>
|
||||||
|
<van-transition
|
||||||
|
customClass="van-overlay"
|
||||||
|
bind:tap="onClick"
|
||||||
|
catch:touchmove="noop"
|
||||||
|
/>
|
||||||
|
</van-overlay>
|
||||||
|
</van-popup>
|
||||||
|
<van-popup
|
||||||
|
bind:close="hideLeft"
|
||||||
|
>
|
||||||
|
<van-overlay
|
||||||
|
bind:click="onClickOverlay"
|
||||||
|
>
|
||||||
|
<van-transition
|
||||||
|
customClass="van-overlay"
|
||||||
|
bind:tap="onClick"
|
||||||
|
catch:touchmove="noop"
|
||||||
|
/>
|
||||||
|
</van-overlay>
|
||||||
|
</van-popup>
|
||||||
|
<van-popup
|
||||||
|
bind:close="hideRight"
|
||||||
|
>
|
||||||
|
<van-overlay
|
||||||
|
bind:click="onClickOverlay"
|
||||||
|
>
|
||||||
|
<van-transition
|
||||||
|
customClass="van-overlay"
|
||||||
|
bind:tap="onClick"
|
||||||
|
catch:touchmove="noop"
|
||||||
|
/>
|
||||||
|
</van-overlay>
|
||||||
|
</van-popup>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class demo-block van-clearfix "
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
关闭图标
|
||||||
|
</wx-view>
|
||||||
|
<van-cell
|
||||||
|
bind:click="showCloseIcon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-cell van-cell--clickable"
|
||||||
|
hoverClass="van-cell--hover hover-class"
|
||||||
|
hoverStayTime="70"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-cell__title title-class"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
关闭图标
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-cell__value value-class"
|
||||||
|
/>
|
||||||
|
<van-icon
|
||||||
|
class="van-cell__right-icon-wrap right-icon-class"
|
||||||
|
customClass="van-cell__right-icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-arrow"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
</van-cell>
|
||||||
|
<van-cell
|
||||||
|
bind:click="showCustomCloseIcon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-cell van-cell--clickable"
|
||||||
|
hoverClass="van-cell--hover hover-class"
|
||||||
|
hoverStayTime="70"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-cell__title title-class"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
自定义图标
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-cell__value value-class"
|
||||||
|
/>
|
||||||
|
<van-icon
|
||||||
|
class="van-cell__right-icon-wrap right-icon-class"
|
||||||
|
customClass="van-cell__right-icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-arrow"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
</van-cell>
|
||||||
|
<van-cell
|
||||||
|
bind:click="showCustomIconPosition"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-cell van-cell--clickable"
|
||||||
|
hoverClass="van-cell--hover hover-class"
|
||||||
|
hoverStayTime="70"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-cell__title title-class"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
图标位置
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-cell__value value-class"
|
||||||
|
/>
|
||||||
|
<van-icon
|
||||||
|
class="van-cell__right-icon-wrap right-icon-class"
|
||||||
|
customClass="van-cell__right-icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-arrow"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
</van-cell>
|
||||||
|
<van-popup
|
||||||
|
bind:close="hideCloseIcon"
|
||||||
|
>
|
||||||
|
<van-overlay
|
||||||
|
bind:click="onClickOverlay"
|
||||||
|
>
|
||||||
|
<van-transition
|
||||||
|
customClass="van-overlay"
|
||||||
|
bind:tap="onClick"
|
||||||
|
catch:touchmove="noop"
|
||||||
|
/>
|
||||||
|
</van-overlay>
|
||||||
|
</van-popup>
|
||||||
|
<van-popup
|
||||||
|
bind:close="hideCustomCloseIcon"
|
||||||
|
>
|
||||||
|
<van-overlay
|
||||||
|
bind:click="onClickOverlay"
|
||||||
|
>
|
||||||
|
<van-transition
|
||||||
|
customClass="van-overlay"
|
||||||
|
bind:tap="onClick"
|
||||||
|
catch:touchmove="noop"
|
||||||
|
/>
|
||||||
|
</van-overlay>
|
||||||
|
</van-popup>
|
||||||
|
<van-popup
|
||||||
|
bind:close="hideCustomIconPosition"
|
||||||
|
>
|
||||||
|
<van-overlay
|
||||||
|
bind:click="onClickOverlay"
|
||||||
|
>
|
||||||
|
<van-transition
|
||||||
|
customClass="van-overlay"
|
||||||
|
bind:tap="onClick"
|
||||||
|
catch:touchmove="noop"
|
||||||
|
/>
|
||||||
|
</van-overlay>
|
||||||
|
</van-popup>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class demo-block van-clearfix "
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
圆角弹窗
|
||||||
|
</wx-view>
|
||||||
|
<van-cell
|
||||||
|
bind:click="showRound"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-cell van-cell--clickable"
|
||||||
|
hoverClass="van-cell--hover hover-class"
|
||||||
|
hoverStayTime="70"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-cell__title title-class"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
圆角弹窗
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-cell__value value-class"
|
||||||
|
/>
|
||||||
|
<van-icon
|
||||||
|
class="van-cell__right-icon-wrap right-icon-class"
|
||||||
|
customClass="van-cell__right-icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-arrow"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
</van-cell>
|
||||||
|
<van-popup
|
||||||
|
bind:close="hideRound"
|
||||||
|
>
|
||||||
|
<van-overlay
|
||||||
|
bind:click="onClickOverlay"
|
||||||
|
>
|
||||||
|
<van-transition
|
||||||
|
customClass="van-overlay"
|
||||||
|
bind:tap="onClick"
|
||||||
|
catch:touchmove="noop"
|
||||||
|
/>
|
||||||
|
</van-overlay>
|
||||||
|
</van-popup>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
</main>
|
||||||
|
`;
|
||||||
11
packages/popup/test/demo.spec.ts
Normal file
11
packages/popup/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