feat: 🎸 [Radio 单选框]增加type

CodeLittlePrince · Feb 7, 2025 · a04b088 · a04b088
1 parent 92b806b
commit a04b088
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 2 deletions.
diff --git a/doc/base/radio.md b/doc/base/radio.md
@@ -38,6 +38,32 @@ export default {
 
 :::
 
+### 勾选形状
+
+通过Attributes`type`设置形状。
+:::demo 通过`v-model`绑定变量
+
+```vue
+<template>
+  <div class="sp-radio-demo">
+    <sp-radio label="apple" v-model="value12" type="check">苹果</sp-radio>
+    <sp-radio label="banana" v-model="value12" type="check" @click="hanldeClick">香蕉</sp-radio>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value12: ""
+    };
+  }
+};
+</script>
+```
+
+:::
+
 ### 禁用状态
 
 :::demo 通过设置`disabled`禁用
@@ -124,6 +150,7 @@ export default {
 | -------- | -------------- | ------------------------- | ------ | ------ |
 | label    | Radio 的 value | string / number / boolean | —      | —      |
 | disabled | 是否禁用       | boolean                   | —      | false  |
+| type | 选中形状       | string                   | check/round      | round  |
 
 ### Radio Events
 
@@ -154,6 +181,7 @@ export default{
       value2: 'apple',
       value3: 'apple',
       value4: 'Europe',
+      value12: ''
     }
   },
   watch: {

diff --git a/sparta/components/base/radio/src/index.vue b/sparta/components/base/radio/src/index.vue
@@ -4,6 +4,7 @@
     :class="[
       { 'is--disabled': disabled },
       { 'is--checked': checked },
+      { 'is--check': isCheck },
     ]"
     @click="handleClick"
   >
@@ -17,7 +18,7 @@
         @change="handleChange"
         @click.stop
       >
-      <span class="sp-radio__inner" />
+      <span class="sp-radio__inner" :class="{'sp-icon-check': checked && isCheck }" />
     </span>
     <span class="sp-radio__text"><slot></slot></span>
   </label>
@@ -38,7 +39,14 @@ export default {
     disabled: {
       type: Boolean,
       default: false
-    }
+    },
+    type: {
+      type: String,
+      default: 'round',
+      validator(val) {
+        return ['check', 'round'].indexOf(val) !== -1
+      }
+    },
   },
   computed: {
     checked() {
@@ -57,6 +65,9 @@ export default {
       }
       return false
     },
+    isCheck() {
+      return this.type === 'check'
+    },
     model: {
       get() {
         return this.isGroup ? this._radioGroup.value : this.value
@@ -119,6 +130,19 @@ export default {
     &:last-child {
       margin-right: 0;
     }
+
+    &.is--check {
+      .sp-radio .sp-radio__inner {
+        padding-top: 3px;
+        padding-left: 2px;
+        color: white;
+        line-height: 8px;
+        font-size: 10px;
+        &::after {
+          opacity: 0;
+        }
+      }
+    }
   }
 
   input {