uniapp radio单选设置选中为圆

最新推荐文章于 2024-01-12 14:07:00 发布

橙緒媛

最新推荐文章于 2024-01-12 14:07:00 发布

阅读量451

点赞数

文章标签： vue css Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_61945023/article/details/129623283

版权

uView radio选中为对勾，不能满足开发需求

以下是设置 radio选中为圆形

<template>
    <view class="radio-content" @click="radio = !radio">
        <view class="radio" :class="radio ? 'radio-default' : ''">
            <view :class="radio ? 'radio-active' : ''"></view>
        </view>
        <text>已阅读并同意</text>
    </view>
</template>

<script>
export default {
    data() {
        return {
            radio: true
        };
    },
    methods: {}
};
</script>

<style>
.radio-content {
    height: 40rpx;
    display: flex;
    align-items: center;
}
.radio {
    width: 24rpx;
    height: 24rpx;
    border-radius: 50%;
    border: 2rpx solid #cccccc;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0rpx 26rpx 0rpx 15rpx;
}
.radio-active {
    width: 16rpx;
    height: 16rpx;
    border-radius: 50%;
    background-color: #43d70d;
}
.radio-default {
    border: 2rpx solid #43d70d;
}
</style>

效果