mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(Radio): use composition api
This commit is contained in:
chenjiahan
parent
a2dbf043a1
commit
8d7dacdda7
@ -18,18 +18,19 @@ app.use(RadioGroup);
|
||||
Use `v-model` to bind the name of checked radio.
|
||||
|
||||
```html
|
||||
<van-radio-group v-model="radio">
|
||||
<van-radio-group v-model="checked">
|
||||
<van-radio name="1">Radio 1</van-radio>
|
||||
<van-radio name="2">Radio 2</van-radio>
|
||||
</van-radio-group>
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radio: '1',
|
||||
};
|
||||
setup() {
|
||||
const checked = ref('1');
|
||||
return { checked };
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -37,7 +38,7 @@ export default {
|
||||
### Horizontal
|
||||
|
||||
```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="2">Radio 2</van-radio>
|
||||
</van-radio-group>
|
||||
@ -46,7 +47,7 @@ export default {
|
||||
### Disabled
|
||||
|
||||
```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="2">Radio 2</van-radio>
|
||||
</van-radio-group>
|
||||
@ -55,7 +56,7 @@ export default {
|
||||
### Custom Shape
|
||||
|
||||
```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="2" shape="square">Radio 2</van-radio>
|
||||
</van-radio-group>
|
||||
@ -64,7 +65,7 @@ export default {
|
||||
### Custom Color
|
||||
|
||||
```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="2" checked-color="#ee0a24">Radio 2</van-radio>
|
||||
</van-radio-group>
|
||||
@ -73,7 +74,7 @@ export default {
|
||||
### Custom Icon Size
|
||||
|
||||
```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="2" icon-size="24px">Radio 2</van-radio>
|
||||
</van-radio-group>
|
||||
@ -84,7 +85,7 @@ export default {
|
||||
Use icon slot to custom icon
|
||||
|
||||
```html
|
||||
<van-radio-group v-model="radio">
|
||||
<van-radio-group v-model="checked">
|
||||
<van-radio name="1">
|
||||
Radio 1
|
||||
<template #icon="props">
|
||||
@ -107,10 +108,13 @@ Use icon slot to custom icon
|
||||
```
|
||||
|
||||
```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',
|
||||
};
|
||||
@ -121,7 +125,7 @@ export default {
|
||||
### Disable Label Click
|
||||
|
||||
```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="2" label-disabled>Radio 2</van-radio>
|
||||
</van-radio-group>
|
||||
@ -130,14 +134,14 @@ export default {
|
||||
### Inside a Cell
|
||||
|
||||
```html
|
||||
<van-radio-group v-model="radio">
|
||||
<van-radio-group v-model="checked">
|
||||
<van-cell-group>
|
||||
<van-cell title="Radio 1" clickable @click="radio = '1'">
|
||||
<van-cell title="Radio 1" clickable @click="checked = '1'">
|
||||
<template #right-icon>
|
||||
<van-radio name="1" />
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell title="Radio 2" clickable @click="radio = '2'">
|
||||
<van-cell title="Radio 2" clickable @click="checked = '2'">
|
||||
<template #right-icon>
|
||||
<van-radio name="2" />
|
||||
</template>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -54,13 +54,13 @@
|
||||
<van-radio name="1">
|
||||
{{ t('radio') }} 1
|
||||
<template #icon="{ checked }">
|
||||
<img :src="checked ? icon.active : icon.inactive" />
|
||||
<img :src="checked ? activeIcon : inactiveIcon" />
|
||||
</template>
|
||||
</van-radio>
|
||||
<van-radio name="2">
|
||||
{{ t('radio') }} 2
|
||||
<template #icon="{ checked }">
|
||||
<img :src="checked ? icon.active : icon.inactive" />
|
||||
<img :src="checked ? activeIcon : inactiveIcon" />
|
||||
</template>
|
||||
</van-radio>
|
||||
</van-radio-group>
|
||||
@ -92,6 +92,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { reactive, toRefs } from 'vue';
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
@ -120,8 +122,8 @@ export default {
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
radio1: '1',
|
||||
radio2: '2',
|
||||
radio3: '1',
|
||||
@ -131,10 +133,12 @@ export default {
|
||||
radioShape: '1',
|
||||
radioIconSize: '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',
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user