修改el-radio-group样式,自定义单选组件

• 自定义组件 MyRadioGroup.vue

<template><div class="btnsBox"><el-radio-group v-model="activeIndex" @change="handleClick"><el-radio-buttonv-for="(item, index) in list":key="item":label="index">{{ item }}</el-radio-button></el-radio-group></div>
</template><script>
export default {props: {list: {type: Array,default: () => {return ["北京", "上海"];},},},data() {return {activeIndex: 0,};},mounted() {},methods: {handleClick() {this.$emit("click", this.activeIndex);},},
};
</script><style lang="less" scoped>
/deep/.el-radio-button__inner {padding: 8px 18px;background: rgba(0, 255, 244, 0.32);border: 1px solid #00fff4;border-radius: 0;font-size: 19px;font-family: jc500;font-weight: normal;color: #ffffff;text-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.73);opacity: 0.52;
}
/deep/.el-radio-button:last-child .el-radio-button__inner {border-radius: 0;
}
/deep/.el-radio-button:first-child .el-radio-button__inner {border-radius: 0;border-left: 1px solid #00fff4;
}
/deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner {border: 1px solid #00fff4;opacity: 1;background: rgba(0, 255, 244, 0.32);
}
</style>