support radio button custom style

examples/docs/en-US/radio.md

@@ -137,5 +137,7 @@ change | triggers when the bound value changes | the label value of the chosen r
 ---- | ---- | ---- | ---- | ----
 label | the value of radio | string/number | — | —
 disabled | whether radio is disabled | boolean | — | false
+fill  | border and background color when button is active | string   | — | #20a0ff   |
+text-color | font color when button is active | string   | — | #ffffff   |
 
 

examples/docs/zh-CN/radio.md

@@ -138,3 +138,5 @@
 |---------- |-------- |---------- |-------------  |-------- |
 | label     | Radio 的 value  | string,number  |        —       |     —    |
 | disabled  | 是否禁用    | boolean   | — | false   |
+| fill  | 按钮激活时的填充色和边框色    | string   | — | #20a0ff   |
+| text-color  | 按钮激活时的文本颜色    | string   | — | #ffffff   |

packages/radio/src/radio-button.vue

@@ -23,6 +23,13 @@
         set(newValue) {
           this.$parent.$emit('input', newValue);
         }
+      },
+      activeStyle() {
+        return {
+          backgroundColor: this.$parent.fill,
+          borderColor: this.$parent.fill,
+          color: this.$parent.textColor
+        };
       }
     }
   };
@@ -43,7 +50,7 @@
       v-model="value"
       :name="name"
       :disabled="disabled">
-    <span class="el-radio-button__inner">
+    <span class="el-radio-button__inner" :style="value === label ? activeStyle : null">
       <slot></slot>
       <template v-if="!$slots.default">{{label}}</template>
     </span>

packages/radio/src/radio-group.vue

@@ -10,7 +10,15 @@
 
     props: {
       value: [String, Number],
-      size: String
+      size: String,
+      fill: {
+        type: String,
+        default: '#20a0ff'
+      },
+      textColor: {
+        type: String,
+        default: '#fff'
+      }
     },
     watch: {
       value(value) {

packages/theme-default/src/radio.css

@@ -160,15 +160,6 @@
       z-index: -1;
       left: -999px;
 
-      &:checked {
-        & + .el-radio-button__inner {
-          z-index: 1;
-          background-color: var(--color-primary);
-          border-color: @background-color;
-          color: #fff;
-        }
-      }
-
       &:disabled {
         & + .el-radio-button__inner {
           color: var(--button-disabled-color);

test/unit/specs/radio.spec.js

@@ -76,28 +76,52 @@ describe('Radio', () => {
       });
     }, 50);
   });
-  it('radio button', done => {
-    vm = createVue({
-      template: `
-        <el-radio-group v-model="radio">
-          <el-radio-button :label="3" ref="radio1">备选项</el-radio-button>
-          <el-radio-button :label="6" ref="radio2">备选项</el-radio-button>
-          <el-radio-button :label="9">备选项</el-radio-button>
-        </el-radio-group>
-      `,
-      data() {
-        return {
-          radio: 3
-        };
-      }
-    }, true);
-    expect(vm.$refs.radio1.$el.classList.contains('is-active')).to.be.true;
-    let radio = vm.$refs.radio2;
-    radio.$el.click();
-    vm.$nextTick(_ => {
-      expect(radio.$el.classList.contains('is-active')).to.be.true;
-      expect(vm.radio === 6).to.be.true;
-      done();
+  describe('Radio', () => {
+    it('create', done => {
+      vm = createVue({
+        template: `
+          <el-radio-group v-model="radio">
+            <el-radio-button :label="3" ref="radio1">备选项</el-radio-button>
+            <el-radio-button :label="6" ref="radio2">备选项</el-radio-button>
+            <el-radio-button :label="9">备选项</el-radio-button>
+          </el-radio-group>
+        `,
+        data() {
+          return {
+            radio: 3
+          };
+        }
+      }, true);
+      expect(vm.$refs.radio1.$el.classList.contains('is-active')).to.be.true;
+      let radio = vm.$refs.radio2;
+      radio.$el.click();
+      vm.$nextTick(_ => {
+        expect(radio.$el.classList.contains('is-active')).to.be.true;
+        expect(vm.radio === 6).to.be.true;
+        done();
+      });
+    });
+    it('custom color', done => {
+      vm = createVue({
+        template: `
+          <el-radio-group v-model="radio" fill="#000" text-color="#ff0">
+            <el-radio-button :label="3" ref="radio1">备选项</el-radio-button>
+            <el-radio-button :label="6" ref="radio2">备选项</el-radio-button>
+            <el-radio-button :label="9">备选项</el-radio-button>
+          </el-radio-group>
+        `,
+        data() {
+          return {
+            radio: 3
+          };
+        }
+      }, true);
+      vm.$nextTick(_ => {
+        expect(vm.$refs.radio1.activeStyle.backgroundColor).to.equal('#000');
+        expect(vm.$refs.radio1.activeStyle.borderColor).to.equal('#000');
+        expect(vm.$refs.radio1.activeStyle.color).to.equal('#ff0');
+        done();
+      });
     });
   });
 });