vue组件封装－radiogroup

先上图

CSS部分 样式还可以自己调整哈

.ui-radio{
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid #4693fe;
    display: inline-block;
    position: relative;
}
.ui-radio.disabled{
    border-color: #ccc;
}
.ui-radio::after{
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -5px 0 0 -5px;
    background-color: #4693fe;
    transition: all .5s ease;
    opacity: 0;
    transform: scale(0);
}
.ui-radio.disabled::after{
    background-color: #ccc;
}
.ui-radio.checked::after {
    opacity: 1;
    transform: scale(1);
}
.ui-radio input[type=radio]{
    opacity: 0;
    margin: 0;
}

js部分

use([], function() {
    Vue.component('vueRadiogroupWidget', {
        pageName: "common",
        template: "public/widget/vueRadiogroup/vueRadiogroup.html",
        data:function() {
            return {
                radioModel:'',
                selectRadio:''
            }

        },
        props:{
            options: {
                type: [Array, Object]
            },
            selectOption:'',
        },
        created: function() {},
        mounted: function() {
            this.selectRadio = this.selectOption;

        },
        destroyed: function() {},
        methods: {
            radioChange:function ($event) {
                this.selectRadio = $event.target.value
                console.log($event.target.value);
                this.$emit('radioChange',$event.target.value);

            }
        }
    });
});

html部分

<div>
    <div v-for="option in options" style="display: inline-block">
        <label class="ui-radio" :class="{ 'checked' : selectRadio == option.value}">
            <input type="radio" v-model="radioModel" :value="option.value" @change="radioChange($event)" />
        </label>
        {{ option.name }}
    </div>
</div>

用的时候

html

<vue-radiogroup-widget :options="testArray" :selectOption="testselect" v-on:radioChange="setRadioValue"></vue-radiogroup-widget>

js部分－－主要看看初始化

use([
    "public/pages/testpage/store.js",
    "public/pages/testpage/testpageService.js",
    "public/widget/vueRadiogroup/vueRadiogroup.js"
], function() {
    function init(storage, store) {
        var app = new VueRoot({
            template: 'public/pages/testpage/testpage.html',
            data: {
                testArray:[{
                    name:"简体中文",
                    value:1
                },{
                    name:"繁體中文",
                    value:2
                },{
                    name:"English",
                    value:3
                }],
                testselect:1,
            },
            store: store,
            created: function() {},
            mounted: function() {

            },
            methods: {
                setRadioValue:function (value) {
                    console.log("setRadioValue",value);

            }

            }
        });
        return app;
    }
    module.exports = init;
    if(typeof window != "undefined") {
        var mainComponent = init(storage, store);
        mainComponent.$mount("#app");
    }
});