perf: 更新 radio 组件配置项

FightingDesign · Mar 21, 2023 · 36b7180 · 36b7180
1 parent b187c35
commit 36b7180
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 46 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,9 @@
 
 - `f-image` 组件 `no-select` 配置项改为 `select`
 - 优化 `f-image` 和 `f-avatar` 组件
+- `f-radio` 组件废除 `border` 配置项
+- `f-radio` 组件新增 `background` 配置项
+- `f-radio` 组件样式重构
 
 ## 0.27.2 (2023-03-13)
 

diff --git a/packages/fighting-design/radio-group/src/props.ts b/packages/fighting-design/radio-group/src/props.ts
@@ -23,8 +23,8 @@ export const Props = {
   columnGap: setStringNumberProp(),
   /** 纵向排列的间距 */
   rowGap: setStringNumberProp(),
-  /** 是否显示边框 */
-  border: setBooleanProp(),
+  /** 背景状态 */
+  background: setBooleanProp(),
   /**
    * 尺寸
    *

diff --git a/packages/fighting-design/radio-group/src/radio-group.vue b/packages/fighting-design/radio-group/src/radio-group.vue
@@ -26,7 +26,7 @@
   }
 
   /** 类名列表 */
-  const classList = classes(['vertical', 'border', 'size'], 'f-radio-group')
+  const classList = classes(['vertical', 'background', 'size'], 'f-radio-group')
 
   /** 样式列表 */
   const styleList = styles(['columnGap', 'rowGap'])

diff --git a/packages/fighting-design/radio/src/radio.vue b/packages/fighting-design/radio/src/radio.vue
@@ -73,7 +73,7 @@
       :name="name"
     />
     <!-- 小圆圈 -->
-    <span v-if="!parentInject?.border" class="f-radio__circle" />
+    <span v-if="!parentInject?.background" class="f-radio__circle" />
 
     <!-- 展示的文字内容 -->
     <span class="f-radio__text">

diff --git a/packages/fighting-theme/src/radio-group.scss b/packages/fighting-theme/src/radio-group.scss
@@ -9,7 +9,7 @@
   vertical-align: top;
   column-gap: var(--radio-group-column-gap, 0);
 
-  &:not([class~='f-radio-group__border']) {
+  &:not([class~='f-radio-group__background']) {
     column-gap: var(--radio-group-column-gap, 30px);
 
     &.f-radio-group__vertical {
@@ -24,7 +24,7 @@
   }
 
   // 边框状态
-  &.f-radio-group__border {
+  &.f-radio-group__background {
     background: #f8f9fb;
     flex-wrap: nowrap;
 

diff --git a/start/src/App.vue b/start/src/App.vue
@@ -1,42 +1,5 @@
-<script lang="ts" setup>
-  import { ref } from 'vue'
+<script lang="ts" setup></script>
 
-  const radio4 = ref('1')
-</script>
+<template></template>
 
-<template>
-  <f-radio-group v-model="radio4" size="large" vertical>
-    <f-radio label="1">备选项1</f-radio>
-    <f-radio label="2">备选项2</f-radio>
-    <f-radio label="3">备选项3</f-radio>
-  </f-radio-group>
-
-  <f-radio-group v-model="radio4" border size="middle">
-    <f-radio label="1">备选项1</f-radio>
-    <f-radio label="2">备选项2</f-radio>
-    <f-radio label="3">备选项3</f-radio>
-  </f-radio-group>
-
-  <f-radio-group v-model="radio4" border size="small">
-    <f-radio label="1">备选项1</f-radio>
-    <f-radio label="2">备选项2</f-radio>
-    <f-radio label="3">备选项3</f-radio>
-  </f-radio-group>
-
-  <f-radio-group v-model="radio4" border size="mini">
-    <f-radio label="1">备选项1</f-radio>
-    <f-radio label="2">备选项2</f-radio>
-    <f-radio label="3">备选项3</f-radio>
-  </f-radio-group>
-</template>
-
-<style>
-  .f-radio-group {
-    margin-bottom: 20px;
-  }
-
-  * {
-    margin: 0;
-    padding: 0;
-  }
-</style>
+<style lang="scss" scoped></style>