fix: radio功能不全 dropmenu样式校准 (#207)

jd-ftf · Sep 25, 2020 · e396b6d · e396b6d
1 parent 4e1a834
commit e396b6d
Show file tree

Hide file tree

Showing 9 changed files with 49 additions and 26 deletions.
diff --git a/examples/demo/pages/button.vue b/examples/demo/pages/button.vue
@@ -107,10 +107,5 @@ export default {}
   .wd-button {
     margin: 0 10px 10px 0;
   }
-  .page-button-suck {
-    .wd-button {
-      margin-right: 0;
-    }
-  }
 }
 </style>
diff --git a/examples/demo/pages/dropMenu.vue b/examples/demo/pages/dropMenu.vue
@@ -13,7 +13,9 @@
           <div>
             <wd-cell title="标题文字" value="内容" />
             <wd-cell title="标题文字" label="描述信息" value="内容" />
-            <wd-button block size="large" suck @click="confirm">主要按钮</wd-button>
+            <div style="padding: 0 10px 20px; box-sizing: border-box;">
+              <wd-button block size="large" @click="confirm">主要按钮</wd-button>
+            </div>
           </div>
         </wd-drop-menu-item>
       </wd-drop-menu>

diff --git a/examples/demo/pages/radio.vue b/examples/demo/pages/radio.vue
@@ -13,7 +13,7 @@
       </wd-radio-group>
     </demo-block>
     <demo-block title="修改形状--dot">
-      <wd-radio-group v-model="value12" shape="dot">
+      <wd-radio-group v-model="value12" shape="dot" size="large" inline>
         <wd-radio value="1">京麦</wd-radio>
         <wd-radio value="2">商家后台</wd-radio>
       </wd-radio-group>

diff --git a/examples/docs/docs/customTheme.md b/examples/docs/docs/customTheme.md
@@ -90,7 +90,7 @@ Wot Design 使用 BEM 格式进行 CSS 类名的定义，大部分的样式只
   <p>#2bb3ed</p>
 </div>
 
-### 中性色
+#### 中性色
 
 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
 

diff --git a/examples/docs/docs/dropMenu.md b/examples/docs/docs/dropMenu.md
@@ -74,7 +74,9 @@ export default {
     <div>
       <wd-cell title="标题文字" value="内容" />
       <wd-cell title="标题文字" label="描述信息" value="内容" />
-      <wd-button block size="large" suck @click="confirm">主要按钮</wd-button>
+      <div style="padding: 0 10px 20px; box-sizing: border-box;">
+        <wd-button block size="large" @click="confirm">主要按钮</wd-button>
+      </div>
     </div>
   </wd-drop-menu-item>
 </wd-drop-menu>

diff --git a/examples/docs/docs/radio.md b/examples/docs/docs/radio.md
@@ -143,7 +143,7 @@ export default {
 | 参数      | 说明                                 | 类型      | 可选值       | 默认值   |
 |---------- |------------------------------------ |---------- |------------- |-------- |
 | value | 单选框选中时的值 | string / number / boolean | - | - |
-| shape | 单选框形状 | string | 'dot', 'button' | 'dot' |
+| shape | 单选框形状 | string | 'dot', 'button', 'check' | 'check' |
 | checked-color | 选中的颜色 | string | - | '#4d80f0' |
 | disabled | 禁用 | boolean | - | false |
 | max-width | 文字位置最大宽度 | string | - | '' |
diff --git a/packages/radio/src/main.vue b/packages/radio/src/main.vue
@@ -25,11 +25,13 @@ export default {
     },
     inline () {
       return this.radioGroup.inline
+    },
+    size () {
+      return this.radioGroup.size || ''
     }
   },
   methods: {
     handleChange () {
-      console.log('修改')
       this.radioGroup.changeValue(this.value)
     }
   },
@@ -42,6 +44,7 @@ export default {
       finalDisabled,
       finalCheckedColor,
       maxWidth,
+      size,
       inline
     } = this
 
@@ -74,27 +77,26 @@ export default {
       </span>
     )
     // 单选框
+    const classList = {
+      'wd-radio': true,
+      'is-checked': isChecked,
+      'is-large': size && (size === 'large'),
+      'is-button': finalShape === 'button',
+      'is-dot': finalShape === 'dot',
+      'is-disabled': finalDisabled,
+      'is-inline': inline
+    }
     const radio = inline ? (
       <label
         class={{
-          'wd-radio': true,
-          'is-checked': isChecked,
-          'is-button': finalShape === 'button',
-          'is-dot': finalShape === 'dot',
-          'is-disabled': finalDisabled,
+          ...classList,
           'is-inline': inline
         }}>
         {shape}{label}
       </label>
     ) : (
       <label
-        class={{
-          'wd-radio': true,
-          'is-checked': isChecked,
-          'is-button': finalShape === 'button',
-          'is-dot': finalShape === 'dot',
-          'is-disabled': finalDisabled
-        }}>
+        class={{ ...classList }}>
         {label}{shape}
       </label>
     )

diff --git a/src/style/abstracts/_variable.scss b/src/style/abstracts/_variable.scss
@@ -562,6 +562,7 @@ $-radio-button-border: $-checkbox-button-border !default; // 按钮边框颜色
 $-radio-button-disabled-border: $-checkbox-button-disabled-border !default; // 按钮禁用边框颜色
 
 $-radio-dot-size: 8px !default; // 单选dot模式圆点尺寸
+$-radio-dot-large-size: 10px !default; // 单选dot模式大尺寸圆点尺寸
 $-radio-dot-checked-bg: $-color-theme !default; // 单选dot模式选中背景色
 $-radio-dot-checked-border-color: $-color-theme !default; // 单选dot模式选中边框色
 $-radio-dot-border-color: #dcdcdc !default; // 单选dot模式边框色

diff --git a/src/style/radio.scss b/src/style/radio.scss
@@ -117,6 +117,7 @@
       }
     }
   }
+
   @include when(inline) {
     display: inline-block;
     margin-right: $-radio-margin;
@@ -143,9 +144,9 @@
       .wd-radio__check {
         color: $-radio-disabled-label-color;
       }
-      // .wd-radio__label {
-      //   color: $-radio-disabled-label-color;
-      // }
+      .wd-radio__label {
+        color: $-radio-disabled-label-color;
+      }
     }
 
     @include when(button) {
@@ -172,4 +173,24 @@
       }
     }
   }
+
+  @include when(large) {
+    .wd-radio__shape {
+      width: $-radio-large-size;
+      height: $-radio-large-size;
+      font-size: $-radio-large-size;
+    }
+    .wd-radio__label {
+      font-size: $-radio-large-label-fs;
+    }
+
+    @include when(dot) {
+      .wd-radio__shape {
+        &::before {
+          width: $-radio-dot-large-size;
+          height: $-radio-dot-large-size;
+        }
+      }
+    }
+  }
 }