blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

docs(Radio): use composition api

Browse Source
This commit is contained in:
chenjiahan 2020-12-09 10:43:43 +08:00
parent a2dbf043a1
commit 8d7dacdda7
3 changed files with 54 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/radio/README.md
View File

@ -18,18 +18,19 @@ app.use(RadioGroup);
Use `v-model` to bind the name of checked radio. Use `v-model` to bind the name of checked radio.
```html ```html
<van-radio-group v-model="radio"> <van-radio-group v-model="checked">
<van-radio name="1">Radio 1</van-radio> <van-radio name="1">Radio 1</van-radio>
<van-radio name="2">Radio 2</van-radio> <van-radio name="2">Radio 2</van-radio>
</van-radio-group> </van-radio-group>
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { setup() {
return { const checked = ref('1');
radio: '1', return { checked };
};
}, },
}; };
``` ```
@ -37,7 +38,7 @@ export default {
### Horizontal ### Horizontal
```html ```html
<van-radio-group v-model="radio" direction="horizontal"> <van-radio-group v-model="checked" direction="horizontal">
<van-radio name="1">Radio 1</van-radio> <van-radio name="1">Radio 1</van-radio>
<van-radio name="2">Radio 2</van-radio> <van-radio name="2">Radio 2</van-radio>
</van-radio-group> </van-radio-group>
@ -46,7 +47,7 @@ export default {
### Disabled ### Disabled
```html ```html
<van-radio-group v-model="radio" disabled> <van-radio-group v-model="checked" disabled>
<van-radio name="1">Radio 1</van-radio> <van-radio name="1">Radio 1</van-radio>
<van-radio name="2">Radio 2</van-radio> <van-radio name="2">Radio 2</van-radio>
</van-radio-group> </van-radio-group>
@ -55,7 +56,7 @@ export default {
### Custom Shape ### Custom Shape
```html ```html
<van-radio-group v-model="radio"> <van-radio-group v-model="checked">
<van-radio name="1" shape="square">Radio 1</van-radio> <van-radio name="1" shape="square">Radio 1</van-radio>
<van-radio name="2" shape="square">Radio 2</van-radio> <van-radio name="2" shape="square">Radio 2</van-radio>
</van-radio-group> </van-radio-group>
@ -64,7 +65,7 @@ export default {
### Custom Color ### Custom Color
```html ```html
<van-radio-group v-model="radio"> <van-radio-group v-model="checked">
<van-radio name="1" checked-color="#ee0a24">Radio 1</van-radio> <van-radio name="1" checked-color="#ee0a24">Radio 1</van-radio>
<van-radio name="2" checked-color="#ee0a24">Radio 2</van-radio> <van-radio name="2" checked-color="#ee0a24">Radio 2</van-radio>
</van-radio-group> </van-radio-group>
@ -73,7 +74,7 @@ export default {
### Custom Icon Size ### Custom Icon Size
```html ```html
<van-radio-group v-model="radio"> <van-radio-group v-model="checked">
<van-radio name="1" icon-size="24px">Radio 1</van-radio> <van-radio name="1" icon-size="24px">Radio 1</van-radio>
<van-radio name="2" icon-size="24px">Radio 2</van-radio> <van-radio name="2" icon-size="24px">Radio 2</van-radio>
</van-radio-group> </van-radio-group>
@ -84,7 +85,7 @@ export default {
Use icon slot to custom icon Use icon slot to custom icon
```html ```html
<van-radio-group v-model="radio"> <van-radio-group v-model="checked">
<van-radio name="1"> <van-radio name="1">
Radio 1 Radio 1
<template #icon="props"> <template #icon="props">
@ -107,10 +108,13 @@ Use icon slot to custom icon
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { setup() {
const checked = ref('1');
return { return {
radio: '1', checked,
activeIcon: 'https://img.yzcdn.cn/vant/user-active.png', activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png', inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png',
}; };
@ -121,7 +125,7 @@ export default {
### Disable Label Click ### Disable Label Click
```html ```html
<van-radio-group v-model="radio"> <van-radio-group v-model="checked">
<van-radio name="1" label-disabled>Radio 1</van-radio> <van-radio name="1" label-disabled>Radio 1</van-radio>
<van-radio name="2" label-disabled>Radio 2</van-radio> <van-radio name="2" label-disabled>Radio 2</van-radio>
</van-radio-group> </van-radio-group>
@ -130,14 +134,14 @@ export default {
### Inside a Cell ### Inside a Cell
```html ```html
<van-radio-group v-model="radio"> <van-radio-group v-model="checked">
<van-cell-group> <van-cell-group>
<van-cell title="Radio 1" clickable @click="radio = '1'"> <van-cell title="Radio 1" clickable @click="checked = '1'">
<template #right-icon> <template #right-icon>
<van-radio name="1" /> <van-radio name="1" />
</template> </template>
</van-cell> </van-cell>
<van-cell title="Radio 2" clickable @click="radio = '2'"> <van-cell title="Radio 2" clickable @click="checked = '2'">
<template #right-icon> <template #right-icon>
<van-radio name="2" /> <van-radio name="2" />
</template> </template>

38
src/radio/README.zh-CN.md
View File

@ -22,18 +22,19 @@ app.use(RadioGroup);
通过 `v-model` 绑定值当前选中项的 name。 通过 `v-model` 绑定值当前选中项的 name。
```html ```html
<van-radio-group v-model="radio"> <van-radio-group v-model="checked">
<van-radio name="1">单选框 1</van-radio> <van-radio name="1">单选框 1</van-radio>
<van-radio name="2">单选框 2</van-radio> <van-radio name="2">单选框 2</van-radio>
</van-radio-group> </van-radio-group>
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { setup() {
return { const checked = ref('1');
radio: '1', return { checked };
};
}, },
}; };
``` ```
@ -43,7 +44,7 @@ export default {
将 `direction` 属性设置为 `horizontal` 后，单选框组会变成水平排列。 将 `direction` 属性设置为 `horizontal` 后，单选框组会变成水平排列。
```html ```html
<van-radio-group v-model="radio" direction="horizontal"> <van-radio-group v-model="checked" direction="horizontal">
<van-radio name="1">单选框 1</van-radio> <van-radio name="1">单选框 1</van-radio>
<van-radio name="2">单选框 2</van-radio> <van-radio name="2">单选框 2</van-radio>
</van-radio-group> </van-radio-group>
@ -54,7 +55,7 @@ export default {
通过 `disabled` 属性禁止选项切换，在 `Radio` 上设置 `disabled` 可以禁用单个选项。 通过 `disabled` 属性禁止选项切换，在 `Radio` 上设置 `disabled` 可以禁用单个选项。
```html ```html
<van-radio-group v-model="radio" disabled> <van-radio-group v-model="checked" disabled>
<van-radio name="1">单选框 1</van-radio> <van-radio name="1">单选框 1</van-radio>
<van-radio name="2">单选框 2</van-radio> <van-radio name="2">单选框 2</van-radio>
</van-radio-group> </van-radio-group>
@ -65,7 +66,7 @@ export default {
将 `shape` 属性设置为 `square`，单选框的形状会变成方形。 将 `shape` 属性设置为 `square`，单选框的形状会变成方形。
```html ```html
<van-radio-group v-model="radio"> <van-radio-group v-model="checked">
<van-radio name="1" shape="square">单选框 1</van-radio> <van-radio name="1" shape="square">单选框 1</van-radio>
<van-radio name="2" shape="square">单选框 2</van-radio> <van-radio name="2" shape="square">单选框 2</van-radio>
</van-radio-group> </van-radio-group>
@ -76,7 +77,7 @@ export default {
通过 `checked-color` 属性设置选中状态的图标颜色。 通过 `checked-color` 属性设置选中状态的图标颜色。
```html ```html
<van-radio-group v-model="radio"> <van-radio-group v-model="checked">
<van-radio name="1" checked-color="#ee0a24">单选框 1</van-radio> <van-radio name="1" checked-color="#ee0a24">单选框 1</van-radio>
<van-radio name="2" checked-color="#ee0a24">单选框 2</van-radio> <van-radio name="2" checked-color="#ee0a24">单选框 2</van-radio>
</van-radio-group> </van-radio-group>
@ -87,7 +88,7 @@ export default {
通过 `icon-size` 属性可以自定义图标的大小。 通过 `icon-size` 属性可以自定义图标的大小。
```html ```html
<van-radio-group v-model="radio"> <van-radio-group v-model="checked">
<van-radio name="1" icon-size="24px">单选框 1</van-radio> <van-radio name="1" icon-size="24px">单选框 1</van-radio>
<van-radio name="2" icon-size="24px">单选框 2</van-radio> <van-radio name="2" icon-size="24px">单选框 2</van-radio>
</van-radio-group> </van-radio-group>
@ -98,7 +99,7 @@ export default {
通过 `icon` 插槽自定义图标，并通过 `slotProps` 判断是否为选中状态。 通过 `icon` 插槽自定义图标，并通过 `slotProps` 判断是否为选中状态。
```html ```html
<van-radio-group v-model="radio"> <van-radio-group v-model="checked">
<van-radio name="1"> <van-radio name="1">
单选框 1 单选框 1
<template #icon="props"> <template #icon="props">
@ -121,10 +122,13 @@ export default {
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { setup() {
const checked = ref('1');
return { return {
radio: '1', checked,
activeIcon: 'https://img.yzcdn.cn/vant/user-active.png', activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png', inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png',
}; };
@ -137,7 +141,7 @@ export default {
设置 `label-disabled` 属性后，点击图标以外的内容不会触发单选框切换。 设置 `label-disabled` 属性后，点击图标以外的内容不会触发单选框切换。
```html ```html
<van-radio-group v-model="radio"> <van-radio-group v-model="checked">
<van-radio name="1" label-disabled>单选框 1</van-radio> <van-radio name="1" label-disabled>单选框 1</van-radio>
<van-radio name="2" label-disabled>单选框 2</van-radio> <van-radio name="2" label-disabled>单选框 2</van-radio>
</van-radio-group> </van-radio-group>
@ -148,14 +152,14 @@ export default {
此时你需要再引入 `Cell` 和 `CellGroup` 组件。 此时你需要再引入 `Cell` 和 `CellGroup` 组件。
```html ```html
<van-radio-group v-model="radio"> <van-radio-group v-model="checked">
<van-cell-group> <van-cell-group>
<van-cell title="单选框 1" clickable @click="radio = '1'"> <van-cell title="单选框 1" clickable @click="checked = '1'">
<template #right-icon> <template #right-icon>
<van-radio name="1" /> <van-radio name="1" />
</template> </template>
</van-cell> </van-cell>
<van-cell title="单选框 2" clickable @click="radio = '2'"> <van-cell title="单选框 2" clickable @click="checked = '2'">
<template #right-icon> <template #right-icon>
<van-radio name="2" /> <van-radio name="2" />
</template> </template>

20
src/radio/demo/index.vue
View File

@ -54,13 +54,13 @@
<van-radio name="1"> <van-radio name="1">
{{ t('radio') }} 1 {{ t('radio') }} 1
<template #icon="{ checked }"> <template #icon="{ checked }">
<img :src="checked ? icon.active : icon.inactive" /> <img :src="checked ? activeIcon : inactiveIcon" />
</template> </template>
</van-radio> </van-radio>
<van-radio name="2"> <van-radio name="2">
{{ t('radio') }} 2 {{ t('radio') }} 2
<template #icon="{ checked }"> <template #icon="{ checked }">
<img :src="checked ? icon.active : icon.inactive" /> <img :src="checked ? activeIcon : inactiveIcon" />
</template> </template>
</van-radio> </van-radio>
</van-radio-group> </van-radio-group>
@ -92,6 +92,8 @@
</template> </template>
<script> <script>
import { reactive, toRefs } from 'vue';
export default { export default {
i18n: { i18n: {
'zh-CN': { 'zh-CN': {
@ -120,8 +122,8 @@ export default {
}, },
}, },
data() { setup() {
return { const state = reactive({
radio1: '1', radio1: '1',
radio2: '2', radio2: '2',
radio3: '1', radio3: '1',
@ -131,10 +133,12 @@ export default {
radioShape: '1', radioShape: '1',
radioIconSize: '1', radioIconSize: '1',
radioHorizontal: '1', radioHorizontal: '1',
icon: { });
active: 'https://img.yzcdn.cn/vant/user-active.png',
inactive: 'https://img.yzcdn.cn/vant/user-inactive.png', return {
}, ...toRefs(state),
activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png',
}; };
}, },
}; };