模仿vant开发单选框组件

单选框逻辑

<template>
    <div>
        
        <div>
            <div v-for="item in poprandio" :key="item.value" :style="direction ? radiostyle : ''">
                <input class="radio_type"
                :class="{
                    radio_typedisabled: item.isdisabled
                 }"
                type="radio" name="type" 
                :id="item.id"
                :value="item.value"
                v-model="radiovalue"
                :disabled="item.isdisabled"/>
                <label :for="item.id">{
    { item.value }}label>
            div>
        div>
    div>
template>

<script>
export default {
      
    name: 'CompRandio',
    data () {
      
        return {
      
            radiovalue: '',
            radiostyle: 'display: inline-block'
        };
    },
    props: {
      
        poprandio: {
      
            type: Array,
            required: true
        },
        direction: {
      
            type: Boolean,
            default: false
        }
    },
    created () {
      
        this.radiovalue = this.poprandio[0].value
    },
    watch: {
      
        // 监听
        radiovalue () {
      
            this.$emit('input', this.radiovalue)
        }
    }
}
script>

<style lang="less" scoped>
label{
      
    line-height: 20px;
    display: inline-block;
    margin-left: 5px;
    margin-right:15px;
    color: #777;
    vertical-align: middle;
}
.radio_typedisabled::before {
      
    background-color: #ccc;
}
.radio_type{
      
    width: 20px;
    height: 20px;
    appearance: none;
    position: relative;
}
.radio_type:before{
      
    content: '';
    width: 20px;
    height: 20px;
    border: 1px solid #7d7d7d;
    display: inline-block;
    border-radius: 50%;
    vertical-align: middle;
}
.radio_type:checked:before{
      
    content: '';
    width: 20px;
    height: 20px;
    border: 1px solid #c59c5a;
    background:#c59c5a;
    display: inline-block;
    border-radius: 50%;
    vertical-align: middle;
}
.radio_type:checked:after{
      
    content: '';
    width: 10px;
    height:5px;
    border: 2px solid white;
    border-top: transparent;
    border-right: transparent; 
    text-align: center;
    display: block;
    position: absolute;
    top: 14px;
    left:5px;
    vertical-align: middle;
    transform: rotate(-45deg);
}
.radio_type:checked+label{
      
    color: #c59c5a;
}
style>

引用组件

通过custcomponents数组添加到里面，循环在vue全局注册组件

// 组件的注册
const custcom = {
     
    install (Vue) {
     
        let custcomponents = [custstepper, checkbox]
        // 循环注册
        custcomponents.forEach(item => {
     
            Vue.component(item.name, item)
        })
    }
}

在页面引用组件

单选按钮默认一行显示一个 :direction="true"可以让一行多个单选按钮

<comp-randio :poprandio="formrandio" v-model="radiovalue" :direction="true">comp-randio>

data () {
     
    return {
     
        // 需要有几个单选按钮，其中isdisabled是单选按钮是否禁用
        // 第一个就是单选按钮的默认选中按钮
        formrandio: [
            {
     value: '1', id: 'radio1'},
            {
     value: '2', id: 'radio2', isdisabled: true},
            {
     value: '3', id: 'radio3'}
        ],
        radiovalue: ''
    };
},