vue 单选框自定义

 

完整的代码, 可以复制引用

自定义单选框的组件

<div>
    <div>
        <!-- 按钮用于切换显示和隐藏性别选择 -->
        <button @click="show=!show">show</button>
        <!-- 使用Vue的transition组件实现动画效果 -->
        <transition name="v">
            <div>
                <!-- 女性选择部分 -->
                <div class="female">
                    <!-- 输入元素用于选择女性 -->
                    <input type="radio" id="female" name="sex" class="input"/>
                    <!-- 标签元素显示女性文字 -->
                    <label for="female" class="label">女</label>
                </div>
                <!-- 男性选择部分 -->
                <div class="male">
                    <!-- 输入元素用于选择男性 -->
                    <input type="radio" id="male" name="sex" class="input"/>
                    <!-- 标签元素显示男性文字 -->
                    <label for="male" class="label">男</label>
                </div>
            </div>
        </transition>
    </div>
</div>

<style>
    /* 隐藏单选按钮 */
    .input {
        display: none;
    }

    /* 默认单选按钮样式 */
    .label:before {
        content: "\a0"; /* 使用不换行空格 */
        display: inline-block;
        vertical-align: middle;
        font-size: 18px;
        width: 1em;
        height: 1em;
        margin-right: .4em;
        border-radius: 50%; /* 圆形样式 */
        border: 1px solid #01cd78; /* 绿色边框 */
        text-indent: .15em;
        line-height: 1;
    }

    /* 当单选按钮被选中时的样式 */
    .input:checked + .label:before {
        background-color: #01cd78; /* 绿色背景 */
        background-clip: content-box;
        padding: .1rem; /* 内边距 */
    }
</style>