[JavaScript知识库]VUE封装radio组件

1、radio子组件

<template>
    <div class="radio-group">
        <div v-for="(item, index) in options" :key="index" class="radio-link">
            <div class="radio-list">
                <div class="radio-area">
                    <label>
                        <span>
                            <input type="radio"
                                    :value="typeof item == 'string' ? item : item.value"
                                    class="radio-input"
                                    v-model="selectedValue"
                                    :disabled="typeof item == 'string' ? false : item.disabled == true ? true :false">
                            <span class="radio-select"
                                    :class="typeof item == 'string' ? '' : item.disabled == true ? 'radio-select-disabled' : '' "></span>
                        </span>
                        <span class="selectListItem">{{typeof item == 'string' ? item : item.label}}</span>
                    </label>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "radio",
    data () {
        return {
            selectedValue: ''
        }
    },
    props: {
        value: {
            type: String,
            default: ''
        },
        options: {
            type: Array,
            default: []
        }
    },
    created () {
        if (typeof (this.options) == 'string') {
            this.options = eval("(" + this.options + ")");
        }
        console.log(this.selectedValue,'aaa')
    },
    mounted() {
        this.selectedValue = this.value;
    },
    watch: {
        selectedValue () {
            this.$emit('input', this.selectedValue)
        }
    }
}
</script>
<style lang="less" scoped>
.radio-group{
    display: flex;
    .radio-link {
        box-sizing: border-box;
        color: inherit;
        min-height: 40px;
        display: block;
        overflow: hidden;
        position: relative;
        text-decoration: none;
    }
    .radio-list {
        height: 0.96rem;
        line-height: 0.96rem;
        width: 100%;
        padding: 0rem 0.2rem;
        box-sizing: border-box;
    }
    .radio-area,
    .radio-area label {
        height: 0.96rem;
        width: 100%;
        display: block;
    }
    .radio-input {
        display: none;
    }
    .radio-select {
        box-sizing: border-box;
        display: inline-block;
        background-color: #fff;
        border-radius: 100%;
        border: 1px solid #ccc;
        position: relative;
        width: 20px;
        height: 20px;
        vertical-align: middle;
    }
    .radio-select-disabled {
        background-color: #d9d9d9;
        border-color: #ccc;
    }
    .radio-input:checked + .radio-select {
        background-color: #26a2ff;
        border-color: #26a2ff;
    }
    .radio-input:checked + .radio-select::after {
        background-color: #fff;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    .radio-select::after {
        content: ' ';
        border-radius: 100%;
        top: 5px;
        left: 5px;
        position: absolute;
        width: 8px;
        height: 8px;
        -webkit-transition: -webkit-transform 0.2s;
        transition: -webkit-transform 0.2s;
        transition: transform 0.2s;
        transition: transform 0.2s, -webkit-transform 0.2s;
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    .selectListItem {
        font-size: 0.3rem;
        vertical-align: middle;
        margin-left: 6px;
    }
}

</style>

2、父组件引用

<Radio :value="productTypeVal"  v-model="productTypeVal" :options="productTypeList" ></Radio>

data数据

productTypeList: [
       {
            label: '不限',
            value: '1',
       }, {
            label: '理财',
            value: '2',
       }
 ],
productTypeVal: '1',