fix(rate): fix wrong style in form component

varletjs · Sep 18, 2022 · 4cae7e0 · 4cae7e0
1 parent 3439993
commit 4cae7e0
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 11 deletions.
diff --git a/packages/varlet-ui/src/rate/Rate.vue b/packages/varlet-ui/src/rate/Rate.vue
@@ -50,13 +50,11 @@ export default defineComponent({
     const { errorMessage, validateWithTrigger: vt, validate: v, resetValidation } = useValidation()
 
     const getStyle = (val: number) => {
-      const { count, size, gap } = props
+      const { count, gap } = props
 
       return {
         color: getCurrentState(val).color,
         marginRight: val !== toNumber(count) ? toSizeUnit(gap) : 0,
-        width: toSizeUnit(size),
-        height: toSizeUnit(size),
       }
     }
 

diff --git a/packages/varlet-ui/src/rate/docs/en-US.md b/packages/varlet-ui/src/rate/docs/en-US.md
@@ -98,8 +98,8 @@ const score = ref(3)
 </script>
 
 <template>
-  <var-rate v-model="score" :gap="1"/>
   <var-rate v-model="score"/>
+  <var-rate v-model="score" :gap="2"/>
   <var-rate v-model="score" :gap="4"/>
   <var-rate v-model="score" :gap="8"/>
 </template>

diff --git a/packages/varlet-ui/src/rate/docs/zh-CN.md b/packages/varlet-ui/src/rate/docs/zh-CN.md
@@ -98,8 +98,8 @@ const score = ref(3)
 </script>
 
 <template>
-  <var-rate v-model="score" :gap="1"/>
-  <var-rate v-model="score"/>
+  <var-rate v-model="score" />
+  <var-rate v-model="score" :gap="2"/>
   <var-rate v-model="score" :gap="4"/>
   <var-rate v-model="score" :gap="8"/>
 </template>

diff --git a/packages/varlet-ui/src/rate/example/index.vue b/packages/varlet-ui/src/rate/example/index.vue
@@ -71,6 +71,7 @@ watchDarkMode(dark)
     empty-icon="heart-outline"
     color="red"
     half
+    style="margin-top: 4px"
   />
 
   <app-type>{{ pack.disableTheRating }}</app-type>

diff --git a/packages/varlet-ui/src/rate/rate.less b/packages/varlet-ui/src/rate/rate.less
@@ -20,12 +20,7 @@
 
   &__content {
     padding: var(--rate-action-padding);
-    box-sizing: unset;
     cursor: pointer;
-    display: flex;
-    width: 24px;
-    height: 24px;
-    margin-right: 2px;
     border-radius: 50%;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);