<template> <el-radio-group :id="id" v-model="model" v-bind="$attrs" v-on="$listeners" v-bind:disabled="isDisable"> <slot></slot> </el-radio-group> </template> <script> export default { props: { value: { type: [String, Boolean], default: '' }, disabled: { type: Boolean, default: false }, id: { type: String, default: '' } }, computed: { model: { get () { return this.value }, set (newVal) { this.$emit('input', newVal) } }, mode () { return this.$store.state.Status.mode }, isDisable() { return this.mode === 'display' || this.disabled }, highlight () { return this.$store.state.Status.highlights.indexOf(this.id) !== -1 }, highlightChanges () { return this.$store.state.Status.highlightChanges.indexOf(this.id) !== -1 } } } </script> <style> /* .el-radio-group.highlight { padding: 10px; margin: -10px; border: 1px solid red; } .el-radio-group.change-light { padding: 10px; margin: -10px; border: 1px solid #E6A23C; } */ </style>