mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
136 lines
2.3 KiB
Markdown
136 lines
2.3 KiB
Markdown
<style>
|
|
@component-namespace demo {
|
|
@b radio {
|
|
.zan-radios {
|
|
padding: 0 20px;
|
|
|
|
.zan-radio {
|
|
margin: 10px 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
radio1: '1',
|
|
radio2: '2',
|
|
radio3: '1',
|
|
radio4: '1'
|
|
};
|
|
}
|
|
};
|
|
</script>
|
|
|
|
## Radio组件
|
|
|
|
### 基础用法
|
|
|
|
:::demo 基础用法
|
|
```html
|
|
<div class="zan-radios">
|
|
<zan-radio name="1" v-model="radio1">单选框1</zan-radio>
|
|
<zan-radio name="2" v-model="radio1">单选框2</zan-radio>
|
|
</div>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
radio1: '1'
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
```
|
|
:::
|
|
|
|
### 禁用状态
|
|
|
|
:::demo 禁用状态
|
|
```html
|
|
<div class="zan-radios">
|
|
<zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
|
|
<zan-radio name="2" v-model="radio2" disabled>选中且禁用</zan-radio>
|
|
</div>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
radio2: '2'
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
```
|
|
:::
|
|
|
|
### radio组
|
|
|
|
:::demo radio组
|
|
```html
|
|
<div class="zan-radios">
|
|
<zan-radio-group v-model="radio3">
|
|
<zan-radio name="1">单选框1</zan-radio>
|
|
<zan-radio name="2">单选框2</zan-radio>
|
|
</zan-radio-group>
|
|
</div>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
radio3: '1'
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
```
|
|
:::
|
|
|
|
### 与Cell组件一起使用
|
|
|
|
:::demo 与Cell组件一起使用
|
|
```html
|
|
<zan-radio-group v-model="radio4">
|
|
<zan-cell-group>
|
|
<zan-cell><zan-radio name="1">单选框1</zan-radio></zan-cell>
|
|
<zan-cell><zan-radio name="2">单选框2</zan-radio></zan-cell>
|
|
</zan-cell-group>
|
|
</zan-radio-group>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
radio4: '1'
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
```
|
|
:::
|
|
|
|
### Radio API
|
|
|
|
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
|
|-----------|-----------|-----------|-------------|-------------|
|
|
| disabled | 是否禁用单选框 | Boolean | false | |
|
|
| name | 根据这个来判断radio是否选中 | Boolean | false | |
|
|
|
|
### RadioGroup API
|
|
|
|
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
|
|-----------|-----------|-----------|-------------|-------------|
|
|
| disabled | 是否禁用单选框 | Boolean | false | |
|
|
|
|
### RadioGroup Event
|
|
|
|
| 事件名称 | 说明 | 回调参数 |
|
|
|-----------|-----------|-----------|
|
|
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
|