<template>
<zk-theme type="page" :padding="30" showBack navbarTitle=" 单选框 ">
<!-- 基础用法 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="基础用法" align="center" />
<view class="demo-content">
<zk-radio v-model="radio1" :name="1" label="单选项" />
</view>
</zk-theme>
<!-- 禁用状态 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="禁用状态" align="center" />
<view class="demo-content">
<zk-radio-group v-model="radio2" direction="row">
<zk-radio :name="1" label="禁用未选中" disabled />
<zk-radio :name="2" label="禁用已选中" disabled />
</zk-radio-group>
</view>
</zk-theme>
<!-- 选择形状 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="选择形状" align="center" />
<view class="demo-content">
<zk-radio-group v-model="radio1" direction="row">
<zk-radio :name="1" label="圆形" shape="circle" color="#165DFF" />
<zk-radio :name="2" label="方形" shape="square" color="#00B42A" />
<zk-radio :name="3" label="圆角方形" shape="round" color="#722ED1" />
</zk-radio-group>
</view>
<zk-text type="secondary" :size="28" weight="bold" margin="30rpx 0 20rpx 0" text="禁用状态" align="center" />
<view class="demo-content">
<zk-radio-group v-model="radio2" direction="row">
<zk-radio :name="1" label="圆形禁用" shape="circle" disabled />
<zk-radio :name="2" label="方形禁用" shape="square" disabled />
<zk-radio :name="3" label="圆角禁用" shape="round" disabled />
</zk-radio-group>
</view>
</zk-theme>
<!-- 自定义颜色 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义颜色" align="center" />
<view class="demo-content">
<zk-radio-group v-model="radio3" direction="row">
<zk-radio :name="1" label="红色" color="#F53F3F" />
<zk-radio :name="2" label="绿色" color="#00B42A" />
<zk-radio :name="3" label="蓝色" color="#165DFF" />
</zk-radio-group>
</view>
</zk-theme>
<!-- 自定义大小 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义大小" align="center" />
<view class="demo-content">
<zk-radio-group v-model="radio4" direction="row">
<zk-radio :name="1" label="大号" :size="44" :labelSize="32" />
<zk-radio :name="2" label="正常" :size="36" :labelSize="28" />
<zk-radio :name="3" label="小号" :size="28" :labelSize="24" />
</zk-radio-group>
</view>
</zk-theme>
<!-- 自定义文字颜色 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义文字颜色" align="center" />
<view class="demo-content">
<zk-radio-group v-model="radio5" direction="row">
<zk-radio :name="1" label="默认颜色" />
<zk-radio :name="2" label="自定义颜色" textColor="#722ED1" />
<zk-radio :name="3" label="选中变色" textColor="#86909C" activeTextColor="#165DFF" />
</zk-radio-group>
</view>
</zk-theme>
<!-- 主题文字颜色 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="主题文字颜色" align="center" />
<view class="demo-content">
<zk-radio-group v-model="radio6" direction="row">
<zk-radio :name="1" label="蓝色主题" color="#165DFF" activeTextColor="#165DFF" />
<zk-radio :name="2" label="绿色主题" color="#00B42A" activeTextColor="#00B42A" />
<zk-radio :name="3" label="紫色主题" color="#722ED1" activeTextColor="#722ED1" />
</zk-radio-group>
</view>
</zk-theme>
<!-- 单选组 - 竖向排列 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="单选组 - 竖向排列" align="center" />
<view class="demo-content">
<zk-radio-group v-model="radio7" @change="onChange">
<zk-radio :name="1" label="选项1" />
<zk-radio :name="2" label="选项2" />
<zk-radio :name="3" label="选项3（禁用）" disabled />
</zk-radio-group>
</view>
</zk-theme>
<!-- 横向自动换行 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="横向自动换行" align="center" />
<view class="demo-content">
<zk-radio-group v-model="radio9" direction="row">
<zk-radio :name="1" label="选项1" />
<zk-radio :name="2" label="选项2" />
<zk-radio :name="3" label="选项3" />
<zk-radio :name="4" label="选项4" />
<zk-radio :name="5" label="选项5" />
<zk-radio :name="6" label="选项6" />
<zk-radio :name="7" label="选项7" />
<zk-radio :name="8" label="选项8" />
</zk-radio-group>
</view>
</zk-theme>
</zk-theme>
</template>
<script>
export default {
data() {
return {
radio1: 1,
radio2: 2,
radio3: 1,
radio4: 2,
radio5: 1,
radio6: 1,
radio7: 1,
radio8: 1,
radio9: 1
}
},
methods: {
onChange(value) {
console.log('选中值：', value)
}
}
}
</script>
<style lang="scss">
.demo-content {
flex-direction: column;
}
/* #ifdef APP-NVUE */
.demo-content {
width: 662rpx;
}
.zk-radio-group {
&--row {
.zk-radio {
margin-right: 20rpx;
margin-bottom: 16rpx;
width: auto;
flex-direction: row;
}
}
&__wrap {
flex-direction: row;
flex-wrap: wrap;
}
}
.zk-radio {
flex-direction: row;
align-items: center;
&__label {
flex: 1;
flex-wrap: wrap;
}
&__text {
flex-wrap: wrap;
lines: 1;
}
}
/* #endif */
/* #ifdef H5 */
.zk-radio-group {
&--row {
.zk-radio {
margin-right: 20rpx;
margin-bottom: 16rpx;
&:last-child {
margin-right: 0;
}
}
}
}
/* #endif */
/* #ifdef MP-WEIXIN */
.zk-radio-group {
&--row {
.zk-radio {
margin-right: 20rpx;
margin-bottom: 16rpx;
float: left;
&:last-child {
margin-right: 0;
}
}
}
}
/* #endif */
</style>