mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 10:22:44 +08:00
test(Radio): add demo test
This commit is contained in:
nemo-shen
neverland
parent
0893406a63
commit
89d2cdbd2d
@ -103,6 +103,7 @@
|
||||
"van-popup": "./dist/popup/index",
|
||||
"van-progress": "./dist/progress/index",
|
||||
"van-radio": "./dist/radio/index",
|
||||
"van-radio-demo": "./dist/radio/demo/index",
|
||||
"van-radio-group": "./dist/radio-group/index",
|
||||
"van-row": "./dist/row/index",
|
||||
"van-search": "./dist/search/index",
|
||||
|
||||
@ -1,32 +1,3 @@
|
||||
import Page from '../../common/page';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
radio1: '1',
|
||||
radio2: '2',
|
||||
radio3: '1',
|
||||
radio4: '1',
|
||||
radio5: '1',
|
||||
radioSize: '1',
|
||||
radioLabel: '1',
|
||||
radioShape: '1',
|
||||
icon: {
|
||||
normal:
|
||||
'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png',
|
||||
active:
|
||||
'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'
|
||||
}
|
||||
},
|
||||
|
||||
onChange(event) {
|
||||
const { key } = event.currentTarget.dataset;
|
||||
this.setData({ [key]: event.detail });
|
||||
},
|
||||
|
||||
onClick(event) {
|
||||
const { name } = event.currentTarget.dataset;
|
||||
this.setData({
|
||||
radio5: name
|
||||
});
|
||||
}
|
||||
});
|
||||
Page();
|
||||
|
||||
@ -1,126 +1 @@
|
||||
<demo-block title="基本用法" padding>
|
||||
<van-radio-group
|
||||
value="{{ radio1 }}"
|
||||
data-key="radio1"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<van-radio name="1" custom-class="demo-radio">单选框 1</van-radio>
|
||||
<van-radio name="2">单选框 2</van-radio>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="水平排列" padding>
|
||||
<van-radio-group
|
||||
value="{{ radio1 }}"
|
||||
data-key="radio1"
|
||||
bind:change="onChange"
|
||||
direction="horizontal"
|
||||
>
|
||||
<van-radio name="1">单选框 1</van-radio>
|
||||
<van-radio name="2">单选框 2</van-radio>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="禁用状态" padding>
|
||||
<van-radio-group
|
||||
disabled
|
||||
value="{{ radio2 }}"
|
||||
data-key="radio2"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<van-radio name="1" custom-class="demo-radio">单选框 1</van-radio>
|
||||
<van-radio name="2">单选框 2</van-radio>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义形状" padding>
|
||||
<van-radio-group
|
||||
value="{{ radioShape }}"
|
||||
data-key="radioShape"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<van-radio name="1" shape="square" custom-class="demo-radio"
|
||||
>单选框</van-radio
|
||||
>
|
||||
<van-radio name="2" shape="square">单选框</van-radio>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义颜色" padding>
|
||||
<van-radio-group
|
||||
value="{{ radio3 }}"
|
||||
data-key="radio3"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<van-radio name="1" custom-class="demo-radio" checked-color="#07c160"
|
||||
>单选框</van-radio
|
||||
>
|
||||
<van-radio name="2" checked-color="#07c160">单选框</van-radio>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义大小" padding>
|
||||
<van-radio-group
|
||||
value="{{ radioSize }}"
|
||||
data-key="radioSize"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<van-radio name="1" icon-size="24px" custom-class="demo-radio"
|
||||
>单选框</van-radio
|
||||
>
|
||||
<van-radio name="2" icon-size="24px">单选框</van-radio>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义图标" padding>
|
||||
<van-radio-group
|
||||
value="{{ radio4 }}"
|
||||
data-key="radio4"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<van-radio use-icon-slot name="1">
|
||||
自定义图标
|
||||
<image
|
||||
slot="icon"
|
||||
src="{{ radio4 === '1' ? icon.active : icon.normal }}"
|
||||
class="icon"
|
||||
mode="widthFix"
|
||||
></image>
|
||||
</van-radio>
|
||||
<van-radio use-icon-slot name="2">
|
||||
自定义图标
|
||||
<image
|
||||
slot="icon"
|
||||
src="{{ radio4 === '2' ? icon.active : icon.normal }}"
|
||||
class="icon"
|
||||
mode="widthFix"
|
||||
></image>
|
||||
</van-radio>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="禁用文本点击" padding>
|
||||
<van-radio-group
|
||||
value="{{ radioLabel }}"
|
||||
data-key="radioLabel"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<van-radio label-disabled name="1" custom-class="demo-radio"
|
||||
>单选框 1</van-radio
|
||||
>
|
||||
<van-radio label-disabled name="2">单选框 2</van-radio>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="与 Cell 组件一起使用">
|
||||
<van-radio-group value="{{ radio5 }}">
|
||||
<van-cell-group>
|
||||
<van-cell title="单选框 1" clickable data-name="1" bind:click="onClick">
|
||||
<van-radio slot="right-icon" name="1"></van-radio>
|
||||
</van-cell>
|
||||
<van-cell title="单选框 2" clickable data-name="2" bind:click="onClick">
|
||||
<van-radio slot="right-icon" name="2"></van-radio>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
<van-radio-demo />
|
||||
|
||||
10
packages/radio/demo/index.json
Normal file
10
packages/radio/demo/index.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-radio": "../../radio/index",
|
||||
"van-radio-group": "../../radio-group/index",
|
||||
"van-cell": "../../cell/index",
|
||||
"van-cell-group": "../../cell-group/index",
|
||||
"demo-block": "../../../example/components/demo-block/index"
|
||||
}
|
||||
}
|
||||
34
packages/radio/demo/index.ts
Normal file
34
packages/radio/demo/index.ts
Normal file
@ -0,0 +1,34 @@
|
||||
import { VantComponent } from '../../common/component';
|
||||
|
||||
VantComponent({
|
||||
data: {
|
||||
radio1: '1',
|
||||
radio2: '2',
|
||||
radio3: '1',
|
||||
radio4: '1',
|
||||
radio5: '1',
|
||||
radioSize: '1',
|
||||
radioLabel: '1',
|
||||
radioShape: '1',
|
||||
icon: {
|
||||
normal:
|
||||
'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png',
|
||||
active:
|
||||
'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png',
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(event) {
|
||||
const { key } = event.currentTarget.dataset;
|
||||
this.setData({ [key]: event.detail });
|
||||
},
|
||||
|
||||
onClick(event) {
|
||||
const { name } = event.currentTarget.dataset;
|
||||
this.setData({
|
||||
radio5: name,
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
126
packages/radio/demo/index.wxml
Normal file
126
packages/radio/demo/index.wxml
Normal file
@ -0,0 +1,126 @@
|
||||
<demo-block title="基本用法" padding>
|
||||
<van-radio-group
|
||||
value="{{ radio1 }}"
|
||||
data-key="radio1"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<van-radio name="1" custom-class="demo-radio">单选框 1</van-radio>
|
||||
<van-radio name="2">单选框 2</van-radio>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="水平排列" padding>
|
||||
<van-radio-group
|
||||
value="{{ radio1 }}"
|
||||
data-key="radio1"
|
||||
bind:change="onChange"
|
||||
direction="horizontal"
|
||||
>
|
||||
<van-radio name="1">单选框 1</van-radio>
|
||||
<van-radio name="2">单选框 2</van-radio>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="禁用状态" padding>
|
||||
<van-radio-group
|
||||
disabled
|
||||
value="{{ radio2 }}"
|
||||
data-key="radio2"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<van-radio name="1" custom-class="demo-radio">单选框 1</van-radio>
|
||||
<van-radio name="2">单选框 2</van-radio>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义形状" padding>
|
||||
<van-radio-group
|
||||
value="{{ radioShape }}"
|
||||
data-key="radioShape"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<van-radio name="1" shape="square" custom-class="demo-radio"
|
||||
>单选框</van-radio
|
||||
>
|
||||
<van-radio name="2" shape="square">单选框</van-radio>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义颜色" padding>
|
||||
<van-radio-group
|
||||
value="{{ radio3 }}"
|
||||
data-key="radio3"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<van-radio name="1" custom-class="demo-radio" checked-color="#07c160"
|
||||
>单选框</van-radio
|
||||
>
|
||||
<van-radio name="2" checked-color="#07c160">单选框</van-radio>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义大小" padding>
|
||||
<van-radio-group
|
||||
value="{{ radioSize }}"
|
||||
data-key="radioSize"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<van-radio name="1" icon-size="24px" custom-class="demo-radio"
|
||||
>单选框</van-radio
|
||||
>
|
||||
<van-radio name="2" icon-size="24px">单选框</van-radio>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义图标" padding>
|
||||
<van-radio-group
|
||||
value="{{ radio4 }}"
|
||||
data-key="radio4"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<van-radio use-icon-slot name="1">
|
||||
自定义图标
|
||||
<image
|
||||
slot="icon"
|
||||
src="{{ radio4 === '1' ? icon.active : icon.normal }}"
|
||||
class="icon"
|
||||
mode="widthFix"
|
||||
></image>
|
||||
</van-radio>
|
||||
<van-radio use-icon-slot name="2">
|
||||
自定义图标
|
||||
<image
|
||||
slot="icon"
|
||||
src="{{ radio4 === '2' ? icon.active : icon.normal }}"
|
||||
class="icon"
|
||||
mode="widthFix"
|
||||
></image>
|
||||
</van-radio>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="禁用文本点击" padding>
|
||||
<van-radio-group
|
||||
value="{{ radioLabel }}"
|
||||
data-key="radioLabel"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<van-radio label-disabled name="1" custom-class="demo-radio"
|
||||
>单选框 1</van-radio
|
||||
>
|
||||
<van-radio label-disabled name="2">单选框 2</van-radio>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="与 Cell 组件一起使用">
|
||||
<van-radio-group value="{{ radio5 }}">
|
||||
<van-cell-group>
|
||||
<van-cell title="单选框 1" clickable data-name="1" bind:click="onClick">
|
||||
<van-radio slot="right-icon" name="1"></van-radio>
|
||||
</van-cell>
|
||||
<van-cell title="单选框 2" clickable data-name="2" bind:click="onClick">
|
||||
<van-radio slot="right-icon" name="2"></van-radio>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
761
packages/radio/test/__snapshots__/demo.spec.ts.snap
Normal file
761
packages/radio/test/__snapshots__/demo.spec.ts.snap
Normal file
@ -0,0 +1,761 @@
|
||||
// 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 demo-block--padding"
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
基本用法
|
||||
</wx-view>
|
||||
<van-radio-group
|
||||
data-key="radio1"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<wx-view
|
||||
class="van-radio-group"
|
||||
>
|
||||
<van-radio
|
||||
customClass="demo-radio"
|
||||
>
|
||||
<wx-view
|
||||
class="van-radio custom-class"
|
||||
>
|
||||
<wx-view
|
||||
class="van-radio__icon-wrap"
|
||||
style="font-size: 20px"
|
||||
bind:tap="onChange"
|
||||
>
|
||||
<van-icon
|
||||
class="van-radio__icon van-radio__icon--round van-radio__icon--checked"
|
||||
customClass="icon-class"
|
||||
style="font-size:20px"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-success"
|
||||
style=";line-height:20px;font-size:.8em;display:block"
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="label-class van-radio__label van-radio__label--right"
|
||||
bind:tap="onClickLabel"
|
||||
>
|
||||
单选框 1
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-radio>
|
||||
<van-radio>
|
||||
<wx-view
|
||||
class="van-radio custom-class"
|
||||
>
|
||||
<wx-view
|
||||
class="van-radio__icon-wrap"
|
||||
style="font-size: 20px"
|
||||
bind:tap="onChange"
|
||||
>
|
||||
<van-icon
|
||||
class="van-radio__icon van-radio__icon--round"
|
||||
customClass="icon-class"
|
||||
style="font-size:20px"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-success"
|
||||
style=";line-height:20px;font-size:.8em;display:block"
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="label-class van-radio__label van-radio__label--right"
|
||||
bind:tap="onClickLabel"
|
||||
>
|
||||
单选框 2
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-radio>
|
||||
</wx-view>
|
||||
</van-radio-group>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix demo-block--padding"
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
水平排列
|
||||
</wx-view>
|
||||
<van-radio-group
|
||||
data-key="radio1"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<wx-view
|
||||
class="van-radio-group van-radio-group--horizontal"
|
||||
>
|
||||
<van-radio>
|
||||
<wx-view
|
||||
class="van-radio van-radio--horizontal custom-class"
|
||||
>
|
||||
<wx-view
|
||||
class="van-radio__icon-wrap"
|
||||
style="font-size: 20px"
|
||||
bind:tap="onChange"
|
||||
>
|
||||
<van-icon
|
||||
class="van-radio__icon van-radio__icon--round van-radio__icon--checked"
|
||||
customClass="icon-class"
|
||||
style="font-size:20px"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-success"
|
||||
style=";line-height:20px;font-size:.8em;display:block"
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="label-class van-radio__label van-radio__label--right"
|
||||
bind:tap="onClickLabel"
|
||||
>
|
||||
单选框 1
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-radio>
|
||||
<van-radio>
|
||||
<wx-view
|
||||
class="van-radio van-radio--horizontal custom-class"
|
||||
>
|
||||
<wx-view
|
||||
class="van-radio__icon-wrap"
|
||||
style="font-size: 20px"
|
||||
bind:tap="onChange"
|
||||
>
|
||||
<van-icon
|
||||
class="van-radio__icon van-radio__icon--round"
|
||||
customClass="icon-class"
|
||||
style="font-size:20px"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-success"
|
||||
style=";line-height:20px;font-size:.8em;display:block"
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="label-class van-radio__label van-radio__label--right"
|
||||
bind:tap="onClickLabel"
|
||||
>
|
||||
单选框 2
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-radio>
|
||||
</wx-view>
|
||||
</van-radio-group>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix demo-block--padding"
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
禁用状态
|
||||
</wx-view>
|
||||
<van-radio-group
|
||||
data-key="radio2"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<wx-view
|
||||
class="van-radio-group"
|
||||
>
|
||||
<van-radio
|
||||
customClass="demo-radio"
|
||||
>
|
||||
<wx-view
|
||||
class="van-radio custom-class"
|
||||
>
|
||||
<wx-view
|
||||
class="van-radio__icon-wrap"
|
||||
style="font-size: 20px"
|
||||
bind:tap="onChange"
|
||||
>
|
||||
<van-icon
|
||||
class="van-radio__icon van-radio__icon--round van-radio__icon--disabled"
|
||||
customClass="icon-class"
|
||||
style="font-size:20px"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-success"
|
||||
style=";line-height:20px;font-size:.8em;display:block"
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="label-class van-radio__label van-radio__label--right van-radio__label--disabled"
|
||||
bind:tap="onClickLabel"
|
||||
>
|
||||
单选框 1
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-radio>
|
||||
<van-radio>
|
||||
<wx-view
|
||||
class="van-radio custom-class"
|
||||
>
|
||||
<wx-view
|
||||
class="van-radio__icon-wrap"
|
||||
style="font-size: 20px"
|
||||
bind:tap="onChange"
|
||||
>
|
||||
<van-icon
|
||||
class="van-radio__icon van-radio__icon--round van-radio__icon--disabled van-radio__icon--checked"
|
||||
customClass="icon-class"
|
||||
style="font-size:20px"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-success"
|
||||
style=";line-height:20px;font-size:.8em;display:block"
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="label-class van-radio__label van-radio__label--right van-radio__label--disabled"
|
||||
bind:tap="onClickLabel"
|
||||
>
|
||||
单选框 2
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-radio>
|
||||
</wx-view>
|
||||
</van-radio-group>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix demo-block--padding"
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
自定义形状
|
||||
</wx-view>
|
||||
<van-radio-group
|
||||
data-key="radioShape"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<wx-view
|
||||
class="van-radio-group"
|
||||
>
|
||||
<van-radio
|
||||
customClass="demo-radio"
|
||||
>
|
||||
<wx-view
|
||||
class="van-radio custom-class"
|
||||
>
|
||||
<wx-view
|
||||
class="van-radio__icon-wrap"
|
||||
style="font-size: 20px"
|
||||
bind:tap="onChange"
|
||||
>
|
||||
<van-icon
|
||||
class="van-radio__icon van-radio__icon--square van-radio__icon--checked"
|
||||
customClass="icon-class"
|
||||
style="font-size:20px"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-success"
|
||||
style=";line-height:20px;font-size:.8em;display:block"
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="label-class van-radio__label van-radio__label--right"
|
||||
bind:tap="onClickLabel"
|
||||
>
|
||||
单选框
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-radio>
|
||||
<van-radio>
|
||||
<wx-view
|
||||
class="van-radio custom-class"
|
||||
>
|
||||
<wx-view
|
||||
class="van-radio__icon-wrap"
|
||||
style="font-size: 20px"
|
||||
bind:tap="onChange"
|
||||
>
|
||||
<van-icon
|
||||
class="van-radio__icon van-radio__icon--square"
|
||||
customClass="icon-class"
|
||||
style="font-size:20px"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-success"
|
||||
style=";line-height:20px;font-size:.8em;display:block"
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="label-class van-radio__label van-radio__label--right"
|
||||
bind:tap="onClickLabel"
|
||||
>
|
||||
单选框
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-radio>
|
||||
</wx-view>
|
||||
</van-radio-group>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix demo-block--padding"
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
自定义颜色
|
||||
</wx-view>
|
||||
<van-radio-group
|
||||
data-key="radio3"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<wx-view
|
||||
class="van-radio-group"
|
||||
>
|
||||
<van-radio
|
||||
customClass="demo-radio"
|
||||
>
|
||||
<wx-view
|
||||
class="van-radio custom-class"
|
||||
>
|
||||
<wx-view
|
||||
class="van-radio__icon-wrap"
|
||||
style="font-size: 20px"
|
||||
bind:tap="onChange"
|
||||
>
|
||||
<van-icon
|
||||
class="van-radio__icon van-radio__icon--round van-radio__icon--checked"
|
||||
customClass="icon-class"
|
||||
style="font-size:20px;border-color:#07c160;background-color:#07c160"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-success"
|
||||
style=";line-height:20px;font-size:.8em;display:block"
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="label-class van-radio__label van-radio__label--right"
|
||||
bind:tap="onClickLabel"
|
||||
>
|
||||
单选框
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-radio>
|
||||
<van-radio>
|
||||
<wx-view
|
||||
class="van-radio custom-class"
|
||||
>
|
||||
<wx-view
|
||||
class="van-radio__icon-wrap"
|
||||
style="font-size: 20px"
|
||||
bind:tap="onChange"
|
||||
>
|
||||
<van-icon
|
||||
class="van-radio__icon van-radio__icon--round"
|
||||
customClass="icon-class"
|
||||
style="font-size:20px"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-success"
|
||||
style=";line-height:20px;font-size:.8em;display:block"
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="label-class van-radio__label van-radio__label--right"
|
||||
bind:tap="onClickLabel"
|
||||
>
|
||||
单选框
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-radio>
|
||||
</wx-view>
|
||||
</van-radio-group>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix demo-block--padding"
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
自定义大小
|
||||
</wx-view>
|
||||
<van-radio-group
|
||||
data-key="radioSize"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<wx-view
|
||||
class="van-radio-group"
|
||||
>
|
||||
<van-radio
|
||||
customClass="demo-radio"
|
||||
>
|
||||
<wx-view
|
||||
class="van-radio custom-class"
|
||||
>
|
||||
<wx-view
|
||||
class="van-radio__icon-wrap"
|
||||
style="font-size: 24px"
|
||||
bind:tap="onChange"
|
||||
>
|
||||
<van-icon
|
||||
class="van-radio__icon van-radio__icon--round van-radio__icon--checked"
|
||||
customClass="icon-class"
|
||||
style="font-size:24px"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-success"
|
||||
style=";line-height:24px;font-size:.8em;display:block"
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="label-class van-radio__label van-radio__label--right"
|
||||
bind:tap="onClickLabel"
|
||||
>
|
||||
单选框
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-radio>
|
||||
<van-radio>
|
||||
<wx-view
|
||||
class="van-radio custom-class"
|
||||
>
|
||||
<wx-view
|
||||
class="van-radio__icon-wrap"
|
||||
style="font-size: 24px"
|
||||
bind:tap="onChange"
|
||||
>
|
||||
<van-icon
|
||||
class="van-radio__icon van-radio__icon--round"
|
||||
customClass="icon-class"
|
||||
style="font-size:24px"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-success"
|
||||
style=";line-height:24px;font-size:.8em;display:block"
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="label-class van-radio__label van-radio__label--right"
|
||||
bind:tap="onClickLabel"
|
||||
>
|
||||
单选框
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-radio>
|
||||
</wx-view>
|
||||
</van-radio-group>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix demo-block--padding"
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
自定义图标
|
||||
</wx-view>
|
||||
<van-radio-group
|
||||
data-key="radio4"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<wx-view
|
||||
class="van-radio-group"
|
||||
>
|
||||
<van-radio>
|
||||
<wx-view
|
||||
class="van-radio custom-class"
|
||||
>
|
||||
<wx-view
|
||||
class="van-radio__icon-wrap"
|
||||
style="font-size: 20px"
|
||||
bind:tap="onChange"
|
||||
>
|
||||
<wx-image
|
||||
class="icon"
|
||||
mode="widthFix"
|
||||
slot="icon"
|
||||
src="https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png"
|
||||
/>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="label-class van-radio__label van-radio__label--right"
|
||||
bind:tap="onClickLabel"
|
||||
>
|
||||
|
||||
自定义图标
|
||||
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-radio>
|
||||
<van-radio>
|
||||
<wx-view
|
||||
class="van-radio custom-class"
|
||||
>
|
||||
<wx-view
|
||||
class="van-radio__icon-wrap"
|
||||
style="font-size: 20px"
|
||||
bind:tap="onChange"
|
||||
>
|
||||
<wx-image
|
||||
class="icon"
|
||||
mode="widthFix"
|
||||
slot="icon"
|
||||
src="https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png"
|
||||
/>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="label-class van-radio__label van-radio__label--right"
|
||||
bind:tap="onClickLabel"
|
||||
>
|
||||
|
||||
自定义图标
|
||||
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-radio>
|
||||
</wx-view>
|
||||
</van-radio-group>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix demo-block--padding"
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
禁用文本点击
|
||||
</wx-view>
|
||||
<van-radio-group
|
||||
data-key="radioLabel"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<wx-view
|
||||
class="van-radio-group"
|
||||
>
|
||||
<van-radio
|
||||
customClass="demo-radio"
|
||||
>
|
||||
<wx-view
|
||||
class="van-radio custom-class"
|
||||
>
|
||||
<wx-view
|
||||
class="van-radio__icon-wrap"
|
||||
style="font-size: 20px"
|
||||
bind:tap="onChange"
|
||||
>
|
||||
<van-icon
|
||||
class="van-radio__icon van-radio__icon--round van-radio__icon--checked"
|
||||
customClass="icon-class"
|
||||
style="font-size:20px"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-success"
|
||||
style=";line-height:20px;font-size:.8em;display:block"
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="label-class van-radio__label van-radio__label--right"
|
||||
bind:tap="onClickLabel"
|
||||
>
|
||||
单选框 1
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-radio>
|
||||
<van-radio>
|
||||
<wx-view
|
||||
class="van-radio custom-class"
|
||||
>
|
||||
<wx-view
|
||||
class="van-radio__icon-wrap"
|
||||
style="font-size: 20px"
|
||||
bind:tap="onChange"
|
||||
>
|
||||
<van-icon
|
||||
class="van-radio__icon van-radio__icon--round"
|
||||
customClass="icon-class"
|
||||
style="font-size:20px"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-success"
|
||||
style=";line-height:20px;font-size:.8em;display:block"
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="label-class van-radio__label van-radio__label--right"
|
||||
bind:tap="onClickLabel"
|
||||
>
|
||||
单选框 2
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-radio>
|
||||
</wx-view>
|
||||
</van-radio-group>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix "
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
与 Cell 组件一起使用
|
||||
</wx-view>
|
||||
<van-radio-group>
|
||||
<wx-view
|
||||
class="van-radio-group"
|
||||
>
|
||||
<van-cell-group>
|
||||
<wx-view
|
||||
class="custom-class van-cell-group van-hairline--top-bottom"
|
||||
>
|
||||
<van-cell
|
||||
data-name="1"
|
||||
bind:click="onClick"
|
||||
>
|
||||
<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=""
|
||||
>
|
||||
单选框 1
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-cell__value value-class"
|
||||
/>
|
||||
<van-radio
|
||||
slot="right-icon"
|
||||
>
|
||||
<wx-view
|
||||
class="van-radio custom-class"
|
||||
>
|
||||
<wx-view
|
||||
class="van-radio__icon-wrap"
|
||||
style="font-size: 20px"
|
||||
bind:tap="onChange"
|
||||
>
|
||||
<van-icon
|
||||
class="van-radio__icon van-radio__icon--round van-radio__icon--checked"
|
||||
customClass="icon-class"
|
||||
style="font-size:20px"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-success"
|
||||
style=";line-height:20px;font-size:.8em;display:block"
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="label-class van-radio__label van-radio__label--right"
|
||||
bind:tap="onClickLabel"
|
||||
/>
|
||||
</wx-view>
|
||||
</van-radio>
|
||||
</wx-view>
|
||||
</van-cell>
|
||||
<van-cell
|
||||
data-name="2"
|
||||
bind:click="onClick"
|
||||
>
|
||||
<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=""
|
||||
>
|
||||
单选框 2
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-cell__value value-class"
|
||||
/>
|
||||
<van-radio
|
||||
slot="right-icon"
|
||||
>
|
||||
<wx-view
|
||||
class="van-radio custom-class"
|
||||
>
|
||||
<wx-view
|
||||
class="van-radio__icon-wrap"
|
||||
style="font-size: 20px"
|
||||
bind:tap="onChange"
|
||||
>
|
||||
<van-icon
|
||||
class="van-radio__icon van-radio__icon--round"
|
||||
customClass="icon-class"
|
||||
style="font-size:20px"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-success"
|
||||
style=";line-height:20px;font-size:.8em;display:block"
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="label-class van-radio__label van-radio__label--right"
|
||||
bind:tap="onClickLabel"
|
||||
/>
|
||||
</wx-view>
|
||||
</van-radio>
|
||||
</wx-view>
|
||||
</van-cell>
|
||||
</wx-view>
|
||||
</van-cell-group>
|
||||
</wx-view>
|
||||
</van-radio-group>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
</main>
|
||||
`;
|
||||
11
packages/radio/test/demo.spec.ts
Normal file
11
packages/radio/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