feat: add rate

packages/varlet-ui/src/badge/Badge.vue

@@ -7,22 +7,22 @@
           'var-badge__content',
           `var-badge--${type}`,
           position ? `var-badge--${position} var-badge--position` : null,
-          dotPosition,
+          dotPosition(),
           { 'var-badge--dot' : dot },
         ]"
         :style="{background : color}"
         v-bind="$attrs"
       >
         <var-icon v-if="icon" :name="icon"></var-icon>
-        <span v-else>{{ values }}</span>
+        <span v-else>{{ values() }}</span>
       </span>
     </transition>
     <slot></slot>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, Ref, ref, computed, ComputedRef } from 'vue'
+import { defineComponent} from 'vue'
 import { props } from './props'
 import Icon from '../icon'
 
@@ -34,21 +34,20 @@ export default defineComponent({
   inheritAttrs: false,
   props,
   setup(props) {
-    const values: ComputedRef<number | string | null> = computed(() => {
+    const values = () => {
       if (props.dot) {
         return null
       }
-      if (typeof props.value === 'number' && typeof props.maxValue === 'number') {
+      if (typeof props.value === 'number' && props.maxValue) {
         return (props.value > props.maxValue ? `${props.maxValue}+` : props.value)
       }
       return props.value
-    })
-    const dotPosition: ComputedRef<string | null> = computed(() => {
+    }
+    const dotPosition = () => {
       if (props.position && props.dot) {
         return props.position.indexOf('right') !== -1 ? 'var-badge--dot-right' : props.position.indexOf('left') !== -1 ? 'var-badge--dot-left' : null
       }
-      return null
-    })
+    }
     return {
       values,
       dotPosition

packages/varlet-ui/src/badge/docs/zh_CN.md

@@ -8,16 +8,18 @@
 import { Badge } from '@varlet/ui'
 
 export default defineComponent({
-  components: {
-    [Badge.name]: Badge
-  }
+	components: {
+		[Badge.name]: Badge
+	}
 })
 ```
+
 ### 主题色徽标
- 
- 通过设置`type`属性控制徽标的颜色
- 
+
+通过设置`type`属性控制徽标的颜色
+
  ```html
+
 <var-badge type="primary"></var-badge>
 <var-badge type="info"></var-badge>
 <var-badge type="success"></var-badge>
@@ -27,84 +29,113 @@ export default defineComponent({
 ```
 
 ### 圆点徽标
+
 通过设置`dot` 属性把徽标设置成圆点
+
 ```html
+
 <var-badge type="danger" dot></var-badge>
 ```
 
 ### 自定义内容徽标
+
 通过设置`value`的值定义徽标的内容
+
 ```html
+
 <var-badge type="danger" value="badge"></var-badge>
 <var-badge type="danger" value="hot"></var-badge>
 <var-badge type="danger" :value="66"></var-badge>
 ```
 
 ### 最大值
+
 通过设置`value`,`max-value`控制徽标显示内容的样式（当`value`与`max-value`都为数字时生效）
+
 ```html
+
 <var-badge type="danger" :value="value" :max-value="maxValue"></var-badge>
 <var-badge type="danger" :value="value1" :max-value="maxValue"></var-badge>
 ```
+
 ```js
-import {defineComponent,Ref,ref} from 'vue'
+import { defineComponent, Ref, ref } from 'vue'
+
 export default defineComponent({
-  setup(){
-    const value: Ref<number> = ref(88);
-    const value1: Ref<number> = ref(188);
-    const maxValue: Ref<number> = ref(99);
-    return {value,value1,maxValue};
-  }
+	setup() {
+		const value: Ref<number> = ref(88);
+		const value1: Ref<number> = ref(188);
+		const maxValue: Ref<number> = ref(99);
+		return { value, value1, maxValue };
+	}
 })
 ```
+
 ### 不同徽标定位
+
 通过设置`position`的值定义徽标的位置
+
 ```html
+
 <var-badge type="danger" position="right-top">
-  <var-chip plain :round="false" color="#009688">右上</var-chip>
+	<var-chip plain :round="false" color="#009688">右上</var-chip>
 </var-badge>
 <var-badge type="danger" position="right-bottom">
-  <var-chip plain :round="false" color="#009688">右下</var-chip>
+	<var-chip plain :round="false" color="#009688">右下</var-chip>
 </var-badge>
 <var-badge type="danger" position="left-top">
-  <var-chip plain :round="false" color="#009688">左上</var-chip>
+	<var-chip plain :round="false" color="#009688">左上</var-chip>
 </var-badge>
 <var-badge type="danger" position="left-bottom">
-  <var-chip plain :round="false" color="#009688">左下</var-chip>
+	<var-chip plain :round="false" color="#009688">左下</var-chip>
 </var-badge>
 ```
+
 ### 是否显示徽标
+
 通过设置`hidden`的值定义徽标是否显示
+
 ```html
+
 <var-button @click="handleChange">点击改变状态</var-button>
 <var-badge type="danger" position="right-top" :hidden="hidden">
-  <var-chip plain :round="false" color="#009688">徽标</var-chip>
+	<var-chip plain :round="false" color="#009688">徽标</var-chip>
 </var-badge>
 ```
+
 ```js
-import {defineComponent,Ref,ref} from 'vue'
+import { defineComponent, Ref, ref } from 'vue'
+
 export default defineComponent({
-  setup(){
-    const hidden: Ref<boolean> = ref(false);
-    const handleChange = () => {hidden.value = !hidden.value}
-    return {hidden,handleChange};
-  }
+	setup() {
+		const hidden: Ref<boolean> = ref(false);
+		const handleChange = () => {
+			hidden.value = !hidden.value
+		}
+		return { hidden, handleChange };
+	}
 })
 ```
 
 ### 自定义徽标颜色
+
 通过设置`color`的值自定义徽标颜色
+
 ```html
+
 <var-badge color="#6200ea" position="right-top">
-  <var-chip plain :round="false" color="#009688">徽标</var-chip>
+	<var-chip plain :round="false" color="#009688">徽标</var-chip>
 </var-badge>
 ```
 
 ### 自定义徽标图标
+
 通过设置`icon`的值设置徽标图标
+
 ```html
+
 <var-badge color="#6200ea" position="right-top" icon="account-circle">
-  <var-chip plain :round="false" color="#009688">徽标</var-chip>
+	<var-chip plain :round="false" color="#009688">徽标</var-chip>
 </var-badge>
 ```
 
@@ -123,6 +154,7 @@ export default defineComponent({
 | icon | 自定义徽标中图标的内容（优先级高于`value`） | _string_ | _ |
 
 ### 插槽
+
 | 名称 | 说明 | 参数 |
 | ---- | ---- | ----|
 | default | 默认插槽 | _ |

packages/varlet-ui/src/chip/Chip.vue

@@ -1,21 +1,21 @@
 <template>
   <transition name="var-fade">
     <span
-      v-bind="$attrs"
       v-ripple="{ disabled }"
+      class="var-chip var--box"
       :class="[
 				`var-chip--${size}`,
 				block ? 'var--flex' : 'var--inline-flex',
 				plain ? `var-chip--plain-${type}` : `var-chip--${type}`,
 				{ 'var-chip--round' : round,
 				  'var-chip--plain' : plain }
 			]"
-      :style="controlStyle()"
-      class="var-chip var--box"
+      :style='controlStyle()'
+      v-bind="$attrs"
     >
       <slot name="left"></slot>
 			<span :class="[`var-chip--text-${size}`]">
-        <slot />
+        <slot/>
       </span>
       <slot name="right"></slot>
 			<span v-if="closable " class="var-chip--close" @click="$props.onClose">
@@ -27,7 +27,7 @@
 
 <script lang="ts">
 import Ripple from '../ripple'
-import { defineComponent, computed, ComputedRef } from 'vue'
+import { defineComponent} from 'vue'
 import { props } from './props'
 import Icon from '../icon'
 
@@ -40,15 +40,15 @@ export default defineComponent({
   inheritAttrs: false,
   props,
   setup(props) {
-    const controlStyle = () => ({
-      color: props.plain
-        ? props.textColor || props.color || null
-        : props.color
-          ? props.textColor || '#fff'
-          : props.textColor || null,
-      background: !props.plain ? props.color || null : null,
-      borderColor: props.plain ? props.color || null : null
-    })
+    const controlStyle = () => {
+      return {
+        color: props.textColor ? props.textColor
+          : props.plain ? props.color || null
+            : props.color ? '#fff' : null,
+        background: !props.plain ? props.color || null : null,
+        borderColor: props.plain ? props.color || null : null
+      }
+    }
     return {
       controlStyle
     }

packages/varlet-ui/src/chip/chip.less

@@ -1,12 +1,14 @@
 @import "../styles/var";
 
 @chip-border-radius: 2px;
-@chip-padding: 0px 4px;
-@chip-line-height: 32px;
-@chip-normal-padding: 8px 10px;
-@chip-large-padding: 11px 17px;
-@chip-small-padding: 5px 6px;
-@chip-mini-padding: 1px 4px;
+@chip-normal-height: 32px;
+@chip-large-height: 40px;
+@chip-small-height: 24px;
+@chip-mini-height: 16px;
+@chip-normal-padding: 0px 10px;
+@chip-large-padding: 0px 17px;
+@chip-small-padding: 0px 6px;
+@chip-mini-padding: 0px 4px;
 
 .var {
   &-fade-leave-to {
@@ -103,21 +105,28 @@
   &--normal {
     font-size: @font-size-md;
     padding: @chip-normal-padding;
+    height: @chip-normal-height;
   }
 
   &--large {
     padding: @chip-large-padding;
     font-size: @font-size-lg;
+    height: @chip-large-height;
+
   }
 
   &--small {
     padding: @chip-small-padding;
     font-size: @font-size-sm;
+    height: @chip-small-height;
+
   }
 
   &--mini {
     padding: @chip-mini-padding;
     font-size: @font-size-xs;
+    height: @chip-mini-height;
+
   }
 
   &--close {