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