refactor(radio): 修复 eslint 报错、格式化代码统一代码风格 (#299)

* refactor(radio): 修复 eslint 报错 * style(radio): 格式化代码，统一代码风格
DevCloudFE · Mar 19, 2022 · 1a1e619 · 1a1e619
1 parent 02e5131
commit 1a1e619
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 43 deletions.
diff --git a/packages/devui-vue/devui/radio/index.ts b/packages/devui-vue/devui/radio/index.ts
@@ -2,22 +2,14 @@ import type { App } from 'vue';
 import Radio from './src/radio';
 import RadioGroup from './src/radio-group';
 
-Radio.install = function(app: App) {
-  app.component(Radio.name, Radio);
-};
-
-RadioGroup.install = function(app: App) {
-  app.component(RadioGroup.name, RadioGroup);
-};
-
 export { Radio, RadioGroup };
 
 export default {
   title: 'Radio 单选框',
   category: '数据录入',
   status: '100%',
   install(app: App): void {
-    app.use(Radio as any);
-    app.use(RadioGroup as any);
-  }
+    app.component(Radio.name, Radio);
+    app.component(RadioGroup.name, RadioGroup);
+  },
 };
diff --git a/packages/devui-vue/devui/radio/src/radio-group.tsx b/packages/devui-vue/devui/radio/src/radio-group.tsx
@@ -20,7 +20,7 @@ export default defineComponent({
       name: toRef(props, 'name'),
       disabled: toRef(props, 'disabled'),
       beforeChange: props.beforeChange,
-      emitChange
+      emitChange,
     });
   },
   render() {
@@ -54,12 +54,11 @@ export default defineComponent({
           'devui-radio-group',
           {
             'is-row': direction === 'row',
-            'is-column': direction === 'column'
-          }
-        ]}
-      >
+            'is-column': direction === 'column',
+          },
+        ]}>
         {getContent()}
       </div>
     );
-  }
+  },
 });
diff --git a/packages/devui-vue/devui/radio/src/radio.scss b/packages/devui-vue/devui/radio/src/radio.scss
@@ -33,9 +33,7 @@
     .devui-radio-material-inner {
       opacity: 1;
       transform: scale(1);
-      transition:
-        transform 200ms cubic-bezier(0.23, 1, 0.32, 1),
-        opacity 200ms cubic-bezier(0.23, 1, 0.32, 1);
+      transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), opacity 200ms cubic-bezier(0.23, 1, 0.32, 1);
     }
   }
 
@@ -83,9 +81,7 @@
     opacity: 0;
     transform: scale(0);
     transform-origin: 50% 50%;
-    transition:
-      transform 200ms cubic-bezier(0.755, 0.05, 0.855, 0.06),
-      opacity 200ms cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    transition: transform 200ms cubic-bezier(0.755, 0.05, 0.855, 0.06), opacity 200ms cubic-bezier(0.755, 0.05, 0.855, 0.06);
     fill: $devui-icon-fill-active;
   }
 

diff --git a/packages/devui-vue/devui/radio/src/radio.tsx b/packages/devui-vue/devui/radio/src/radio.tsx
@@ -21,7 +21,7 @@ export default defineComponent({
     });
     /** radio 的 name 属性 */
     const radioName = computed(() => {
-      return radioGroupConf ? radioGroupConf.name.value : props.name;
+      return radioGroupConf ? radioGroupConf.name.value : props.name || void 0;
     });
 
     /** 判断是否允许切换 */
@@ -59,45 +59,38 @@ export default defineComponent({
         radioGroupConf?.emitChange(_value); // 触发父组件的change
         emit('update:modelValue', _value);
         emit('change', _value);
-      }
+      },
     };
   },
   render() {
-    const {
-      disabled,
-      radioName,
-      value,
-      isChecked,
-      $slots,
-      handleChange
-    } = this;
+    const { disabled, radioName, value, isChecked, $slots, handleChange } = this;
     const labelCls = [
       'devui-radio',
       {
         active: isChecked,
-        disabled
-      }
+        disabled,
+      },
     ];
 
     return (
       <label class={labelCls}>
         <input
-          type="radio"
+          type='radio'
           name={radioName}
-          class="devui-radio-input"
+          class='devui-radio-input'
           disabled={disabled}
           onChange={handleChange}
           value={value}
           checked={isChecked}
         />
-        <span class="devui-radio-material">
-          <svg height="100%" width="100%" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
-            <circle class="devui-radio-material-outer" cx="512" cy="512" r="486.5" stroke-width="51" />
-            <circle class="devui-radio-material-inner" cx="512" fill-rule="nonzero" cy="512" r="320" />
+        <span class='devui-radio-material'>
+          <svg height='100%' width='100%' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'>
+            <circle class='devui-radio-material-outer' cx='512' cy='512' r='486.5' stroke-width='51' />
+            <circle class='devui-radio-material-inner' cx='512' fill-rule='nonzero' cy='512' r='320' />
           </svg>
         </span>
-        <span class="devui-radio-label">{$slots.default?.()}</span>
+        <span class='devui-radio-label'>{$slots.default?.()}</span>
       </label>
     );
-  }
+  },
 });