From 4a64a7e93f9ecf58f470c2a1bccb34cec06da189 Mon Sep 17 00:00:00 2001
From: kanghuiyi <1193185379@qq.com>
Date: Tue, 6 Apr 2021 17:35:12 +0800
Subject: [PATCH] feat(varlet-ui): write rate to form

---
 packages/varlet-cli/site/mobile/App.vue       |   7 +-
 packages/varlet-cli/site/pc/App.vue           |  42 +++++--
 packages/varlet-ui/src/app-bar/AppBar.vue     |  22 ++--
 .../varlet-ui/src/app-bar/example/index.vue   |   7 +-
 packages/varlet-ui/src/chip/Chip.vue          |  32 ++---
 packages/varlet-ui/src/chip/props.ts          |  37 +++---
 packages/varlet-ui/src/form/docs/en-US.md     |   2 +
 packages/varlet-ui/src/form/docs/zh-CN.md     |   2 +
 packages/varlet-ui/src/form/example/index.vue |   6 +-
 .../src/form/example/locale/en-US.ts          |   1 +
 .../src/form/example/locale/zh-CN.ts          |   1 +
 packages/varlet-ui/src/rate/Rate.vue          | 115 ++++++++++++------
 packages/varlet-ui/src/rate/docs/en-US.md     |  23 ++++
 packages/varlet-ui/src/rate/docs/zh-CN.md     |  49 +++++---
 packages/varlet-ui/src/rate/example/index.vue |   5 +
 .../src/rate/example/locale/en-US.ts          |   2 +
 .../src/rate/example/locale/zh-CN.ts          |   2 +
 packages/varlet-ui/src/rate/props.ts          |  21 +++-
 packages/varlet-ui/src/rate/provide.ts        |   3 +
 packages/varlet-ui/src/rate/rate.less         |  18 ++-
 20 files changed, 267 insertions(+), 130 deletions(-)
 create mode 100644 packages/varlet-ui/src/rate/provide.ts

diff --git a/packages/varlet-cli/site/mobile/App.vue b/packages/varlet-cli/site/mobile/App.vue
index 29dc19ae2a9..67d8465e7c1 100644
--- a/packages/varlet-cli/site/mobile/App.vue
+++ b/packages/varlet-cli/site/mobile/App.vue
@@ -67,14 +67,9 @@ export default defineComponent({
 <style lang="less">
 @import '~@varlet/ui/es/styles/var';
 
-html {
-  background: #f7f8fa;
-}
-
 body {
   margin: 0;
   padding: 0;
-  background: #f7f8fa;
   min-height: 100%;
   font-family: 'Roboto', 'Noto Sans SC', sans-serif;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -94,7 +89,7 @@ header {
 }
 
 .router-view__block {
-  padding: 50px 12px 10px;
+  padding: 50px 12px 15px;
 }
 
 * {
diff --git a/packages/varlet-cli/site/pc/App.vue b/packages/varlet-cli/site/pc/App.vue
index af84940c8cd..cd7c963ed1f 100644
--- a/packages/varlet-cli/site/pc/App.vue
+++ b/packages/varlet-cli/site/pc/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="varlet-site">
+  <div class="varlet-site" v-if="!isLoading">
     <div class="varlet-site-header var-elevation--1">
       <span class="varlet-site-header__logo">
         <img :src="header.logo" alt="" />
@@ -61,6 +61,7 @@
       </div>
     </div>
   </div>
+  <var-loading class="varlet-pc__loading" style="color: #2979ff" v-else />
 </template>
 
 <script lang="ts">
@@ -70,11 +71,13 @@ import Ripple from '@varlet/ui/es/ripple'
 import Cell from '@varlet/ui/es/cell'
 import Icon from '@varlet/ui/es/icon'
 import Menu from '@varlet/ui/es/menu'
+import Loading from '@varlet/ui/es/loading'
 import '@varlet/ui/es/ripple/style'
 import '@varlet/ui/es/cell/style'
 import '@varlet/ui/es/icon/style'
 import '@varlet/ui/es/menu/style'
-import { defineComponent, ref, Ref, watch, onMounted } from 'vue'
+import '@varlet/ui/es/loading/style'
+import { defineComponent, ref, Ref, watch, onMounted, nextTick } from 'vue'
 import { useRoute } from 'vue-router'
 
 type Menu = {
@@ -98,6 +101,7 @@ export default defineComponent({
     [Cell.name]: Cell,
     [Icon.name]: Icon,
     [Menu.name]: Menu,
+    [Loading.name]: Loading,
   },
   setup() {
     const menu: Ref<Menu[]> = ref([])
@@ -116,6 +120,7 @@ export default defineComponent({
     const path: Ref<string | null> = ref(null)
     const isBack: Ref<boolean> = ref(false)
     const isPhone: Ref<boolean> = ref(false)
+    const isLoading: Ref<boolean> = ref(true)
 
     isPhone.value = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)
     languageList.value = config.pc.header.language
@@ -127,6 +132,8 @@ export default defineComponent({
     const judgmentType = (type) => {
       let [, languageValue, componentValue] = window.location.hash.split('/')
 
+      isLoading.value = false
+
       if (type) {
         path.value = componentValue
 
@@ -137,15 +144,17 @@ export default defineComponent({
         }
       }
 
-      let childrenElement = refs.getElementsByClassName('var-cell')
-      let index = menu.value.findIndex((item) => item.doc === componentValue)
+      nextTick(() => {
+        let childrenElement = refs.getElementsByClassName('var-cell')
+        let index = menu.value.findIndex((item) => item.doc === componentValue)
 
-      if (index !== -1) {
-        childrenElement[index].scrollIntoView({
-          block: 'center',
-          inline: 'start',
-        })
-      }
+        if (index !== -1) {
+          childrenElement[index].scrollIntoView({
+            block: 'center',
+            inline: 'start',
+          })
+        }
+      })
     }
 
     menu.value = configMenu
@@ -174,8 +183,9 @@ export default defineComponent({
     watch(
       () => route.path,
       (to: string) => {
-        let [, languageValue = '', name = ''] = to.split('/')
+        let [, languageValue, name] = to.split('/')
         currentMenuName.value = name
+        language.value = languageValue
 
         isBack.value ? judgmentType('') : (isBack.value = true)
 
@@ -185,7 +195,6 @@ export default defineComponent({
         }
 
         const currentNonComponent = menu.value.find((c) => c.doc === currentMenuName.value)?.nonComponent ?? false
-        language.value = languageValue
         componentName.value = currentNonComponent ? 'home' : currentMenuName.value
       },
       { immediate: true }
@@ -201,6 +210,7 @@ export default defineComponent({
       isHideVersion,
       languageList,
       isOpenMenu,
+      isLoading,
       path,
       nav,
       changeRoute,
@@ -229,6 +239,14 @@ iframe {
 }
 
 .varlet {
+  &-pc__loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
   &-site {
     &-mobile {
       flex: 0 0 432px;
diff --git a/packages/varlet-ui/src/app-bar/AppBar.vue b/packages/varlet-ui/src/app-bar/AppBar.vue
index a68d9aaf049..b95a479d885 100644
--- a/packages/varlet-ui/src/app-bar/AppBar.vue
+++ b/packages/varlet-ui/src/app-bar/AppBar.vue
@@ -1,5 +1,12 @@
 <template>
-  <div class="var-app-bar" :class="{ 'var-elevation--3': isShadow }" :style="appBarStyle()">
+  <div
+    class="var-app-bar"
+    :class="{ 'var-elevation--3': isShadow }"
+    :style="{
+      background: color,
+      color: textColor,
+    }"
+  >
     <div class="var-app-bar__left" v-if="$slots.left">
       <slot name="left"></slot>
     </div>
@@ -32,18 +39,7 @@ export default defineComponent({
     [Icon.name]: Icon,
   },
   props,
-  setup(props) {
-    const appBarStyle = () => {
-      return {
-        background: props.color,
-        color: props.textColor,
-      }
-    }
-
-    return {
-      appBarStyle,
-    }
-  },
+  setup() {},
 })
 </script>
 
diff --git a/packages/varlet-ui/src/app-bar/example/index.vue b/packages/varlet-ui/src/app-bar/example/index.vue
index 042b4473507..2fd721c9627 100644
--- a/packages/varlet-ui/src/app-bar/example/index.vue
+++ b/packages/varlet-ui/src/app-bar/example/index.vue
@@ -97,10 +97,15 @@ export default {
         { label: pack.value.options1, value: 'menu1' },
         { label: pack.value.options2, value: 'menu2' },
       ]
+
       offsetY.value = true
     }
 
-    watchLang(use)
+    watchLang((lang) => {
+      use(lang)
+
+      offsetY.value = false
+    })
 
     return {
       offsetY,
diff --git a/packages/varlet-ui/src/chip/Chip.vue b/packages/varlet-ui/src/chip/Chip.vue
index 75a0a98d952..8ed2fc76855 100644
--- a/packages/varlet-ui/src/chip/Chip.vue
+++ b/packages/varlet-ui/src/chip/Chip.vue
@@ -1,17 +1,6 @@
 <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="plain ? { color: textColor || color, borderColor: color } : { color: textColor, background: color }"
-    >
+    <span v-bind="$attrs" v-ripple="{ disabled }" class="var-chip var--box" :class="contentClass" :style="controlStyle">
       <slot name="left"></slot>
 
       <span :class="[`var-chip--text-${size}`]">
@@ -29,7 +18,7 @@
 
 <script lang="ts">
 import Ripple from '../ripple'
-import { defineComponent } from 'vue'
+import { defineComponent, computed, ComputedRef } from 'vue'
 import { props } from './props'
 import Icon from '../icon'
 
@@ -42,7 +31,7 @@ export default defineComponent({
   inheritAttrs: false,
   props,
   setup(props) {
-    const controlStyle = () => {
+    const controlStyle = computed(() => {
       if (props.plain) {
         return {
           color: props.textColor || props.color,
@@ -54,9 +43,22 @@ export default defineComponent({
         color: props.textColor,
         background: props.color,
       }
-    }
+    })
+
+    const contentClass: ComputedRef<Array<string | false | undefined>> = computed(() => {
+      const { size, block, type, plain, round } = props
+
+      const blockClass = block ? 'var--flex' : 'var--inline-flex'
+      const plainTypeClass = plain ? `var-chip--plain-${type}` : `var-chip--${type}`
+      const plainClass = plain && `var-chip--plain`
+      const roundClass = round && `var-chip--round`
+
+      return [`var-chip--${size}`, blockClass, plainTypeClass, plainClass, roundClass]
+    })
+
     return {
       controlStyle,
+      contentClass,
     }
   },
 })
diff --git a/packages/varlet-ui/src/chip/props.ts b/packages/varlet-ui/src/chip/props.ts
index d9e8541c4ff..4ae20b11a3d 100644
--- a/packages/varlet-ui/src/chip/props.ts
+++ b/packages/varlet-ui/src/chip/props.ts
@@ -10,73 +10,64 @@ function sizeValidator(size: string): boolean {
 }
 
 export const props = {
-//  标签类型
+  //  标签类型
   type: {
     type: String,
     default: 'default',
-    validator: typeValidator
+    validator: typeValidator,
   },
   //  标签尺寸
   size: {
     type: String,
     default: 'normal',
-    validator: sizeValidator
+    validator: sizeValidator,
   },
   //  是否使用水波纹
   disabled: {
     type: Boolean,
-    default: true
+    default: true,
   },
   //  是否空心
   plain: {
     type: Boolean,
-    default: false
+    default: false,
   },
   //  标签文字颜色
   color: {
-    type: String
+    type: String,
   },
   //  是否使用圆形标签
   round: {
     type: Boolean,
-    default: true
+    default: true,
   },
   //  是否是块级元素
   block: {
     type: Boolean,
-    default: false
+    default: false,
   },
   //  背景颜色
   background: {
-    type: String
+    type: String,
   },
   //  是否使用图标
   icon: {
     type: Boolean,
-    default: false
+    default: false,
   },
   //  是否可关闭
   closable: {
     type: Boolean,
-    default: false
+    default: false,
   },
   //  字体颜色
   textColor: {
-    type: String
+    type: String,
   },
   //  图标样式
   iconName: pickProps(iconProps, 'name'),
-  //  图标样式
-  //   iconType:pickProps(iconProps,'type'),
-  //  图标大小
-  //   iconSize:pickProps(iconProps,'size'),
-  //   closeIcon: {
-  //     type: String,
-  //     default: false
-  //   },
   //  取消回调
   onClose: {
-    type: Function
-  }
+    type: Function,
+  },
 }
-
diff --git a/packages/varlet-ui/src/form/docs/en-US.md b/packages/varlet-ui/src/form/docs/en-US.md
index 8db4cd17471..0c0d11acba4 100644
--- a/packages/varlet-ui/src/form/docs/en-US.md
+++ b/packages/varlet-ui/src/form/docs/en-US.md
@@ -29,6 +29,7 @@ export default {
       range: 10,
       count: 0,
       group: [],
+      score:0,
       like: [],
       files: [],
     })
@@ -94,6 +95,7 @@ export default {
     <var-checkbox :checked-value="2">Sleep</var-checkbox>
     <var-checkbox :checked-value="3">Play game</var-checkbox>
   </var-checkbox-group>
+  <var-rate :rules="[(v) => v >= 3 || pack.rateMessage]" v-model='formData.score' />
   <div>
     <var-switch
       :rules="[v => !!v || 'You must turn on']"
diff --git a/packages/varlet-ui/src/form/docs/zh-CN.md b/packages/varlet-ui/src/form/docs/zh-CN.md
index 84042f1353b..7bd63212ca9 100644
--- a/packages/varlet-ui/src/form/docs/zh-CN.md
+++ b/packages/varlet-ui/src/form/docs/zh-CN.md
@@ -29,6 +29,7 @@ export default {
       range: 10,
       count: 0,
       group: [],
+      score:0,
       like: [],
       files: [],
     })
@@ -94,6 +95,7 @@ export default {
     <var-checkbox :checked-value="2">睡觉</var-checkbox>
     <var-checkbox :checked-value="3">打游戏</var-checkbox>
   </var-checkbox-group>
+  <var-rate :rules="[(v) => v >= 3 || pack.rateMessage]" v-model='formData.score' />
   <div>
     <var-switch
       :rules="[v => !!v || '您必须开启']"
diff --git a/packages/varlet-ui/src/form/example/index.vue b/packages/varlet-ui/src/form/example/index.vue
index 9af5d6f5204..d264b088858 100644
--- a/packages/varlet-ui/src/form/example/index.vue
+++ b/packages/varlet-ui/src/form/example/index.vue
@@ -44,6 +44,7 @@
       <var-checkbox :checked-value="2">{{ pack.sleep }}</var-checkbox>
       <var-checkbox :checked-value="3">{{ pack.play }}</var-checkbox>
     </var-checkbox-group>
+    <var-rate :rules="[(v) => v >= 3 || pack.rateMessage]" v-model="formData.score" />
     <div class="row mb">
       <var-switch :rules="[(v) => !!v || pack.licenseMessage]" v-model="formData.license" />
     </div>
@@ -78,6 +79,7 @@ import Switch from '../../switch'
 import Slider from '../../slider'
 import Uploader from '../../uploader'
 import Counter from '../../counter'
+import Rate from '../../rate'
 import AppType from '@varlet/cli/site/mobile/components/AppType.vue'
 import { reactive, ref } from 'vue'
 import { watchLang } from '../../utils/components'
@@ -99,6 +101,7 @@ export default {
     [Button.name]: Button,
     [Uploader.name]: Uploader,
     [Counter.name]: Counter,
+    [Rate.name]: Rate,
     AppType,
   },
   setup() {
@@ -108,9 +111,10 @@ export default {
       department: '',
       gender: undefined,
       license: false,
-      range: 10,
+      range: 0,
       count: 0,
       group: [],
+      score: 0,
       like: [],
       files: [],
     })
diff --git a/packages/varlet-ui/src/form/example/locale/en-US.ts b/packages/varlet-ui/src/form/example/locale/en-US.ts
index 87312e6e62e..0cf44624dcd 100644
--- a/packages/varlet-ui/src/form/example/locale/en-US.ts
+++ b/packages/varlet-ui/src/form/example/locale/en-US.ts
@@ -16,6 +16,7 @@ export default {
   genderMessage: 'The gender cannot be empty',
   male: 'Male',
   female: 'Female',
+  rateMessage: 'It has to be greater than 2',
   likeMessage: 'The select cannot be empty',
   licenseMessage: 'You must turn on',
   countMessage: 'It has to be greater than 10',
diff --git a/packages/varlet-ui/src/form/example/locale/zh-CN.ts b/packages/varlet-ui/src/form/example/locale/zh-CN.ts
index 2e073a427a4..01c109ecf91 100644
--- a/packages/varlet-ui/src/form/example/locale/zh-CN.ts
+++ b/packages/varlet-ui/src/form/example/locale/zh-CN.ts
@@ -16,6 +16,7 @@ export default {
   genderMessage: '必须选择一个性别',
   male: '男',
   female: '女',
+  rateMessage: '必须大于2',
   likeMessage: '至少选择一个爱好',
   licenseMessage: '您必须开启',
   countMessage: '必须大于10',
diff --git a/packages/varlet-ui/src/rate/Rate.vue b/packages/varlet-ui/src/rate/Rate.vue
index 59ae0f1394a..430812f1e45 100644
--- a/packages/varlet-ui/src/rate/Rate.vue
+++ b/packages/varlet-ui/src/rate/Rate.vue
@@ -1,54 +1,76 @@
 <template>
-  <div class="var-rate" ref="rate">
-    <div
-      class="var-rate--content"
-      v-for="val in count"
-      :key="val"
-      v-ripple="{ disabled: readonly || disabled ? true : !ripple }"
-      :style="{
-        color: transformValue(val).color,
-        cursor: readonly ? 'default' : disabled ? 'not-allowed' : 'pointer',
-        marginRight: val !== count ? marginRight : 0,
-        width: fontSize,
-        height: fontSize,
-        borderRadius: '50%',
-      }"
-    >
-      <var-icon
-        :transition="1"
-        :name="`${
-          transformValue(val).type === 'full' ? icon : transformValue(val).type === 'half' ? halfIcon : emptyIcon
-        }`"
-        :style="{ fontSize }"
-        @click="handleClick(val, $event)"
-      />
+  <div class="var-rate__warp">
+    <div class="var-rate" ref="rate">
+      <div
+        class="var-rate__content"
+        v-for="val in toNumber(count)"
+        :key="val"
+        v-ripple="{ disabled: formReadonly || formDisabled || readonly || disabled || !ripple }"
+        :style="{
+          color: transformValue(val).color,
+          marginRight: val !== toNumber(count) ? toSizeUnit(marginRight) : 0,
+          width: toSizeUnit(size),
+          height: toSizeUnit(size),
+          borderRadius: '50%',
+        }"
+        :class="{ 'var-rate--disabled': formDisabled, 'var-rate--error': errorMessage }"
+      >
+        <var-icon
+          :transition="0"
+          :name="`${
+            transformValue(val).type === 'full' ? icon : transformValue(val).type === 'half' ? halfIcon : emptyIcon
+          }`"
+          :style="{ fontSize: toSizeUnit(size) }"
+          @click="handleClick(val, $event)"
+        />
+      </div>
     </div>
+    <var-form-details :error-message="errorMessage" />
   </div>
 </template>
 
 <script lang="ts">
 import Ripple from '../ripple'
-import { defineComponent, ref, Ref } from 'vue'
-import { props } from './props'
+import { defineComponent, nextTick } from 'vue'
+import { props, ValidateTriggers } from './props'
+import { useValidation } from '../utils/components'
+import { useForm } from '../form/provide'
+import { RateProvider } from './provide'
 import Icon from '../icon'
+import FormDetails from '../form-details/FormDetails.vue'
+import { toSizeUnit } from '../utils/elements'
+import { toNumber } from '../utils/shared'
 
 export default defineComponent({
   name: 'VarRate',
   components: {
     [Icon.name]: Icon,
+    [FormDetails.name]: FormDetails,
   },
   directives: { Ripple },
   inheritAttrs: false,
   props,
   setup(props) {
+    const { form, bindForm } = useForm()
+    const { errorMessage, validateWithTrigger: vt, validate: v, resetValidation } = useValidation()
+
     const transformValue = (index: number) => {
-      if (index <= props.modelValue) {
-        return { type: 'full', score: index, color: props.disabled ? props.disabledColor : props.color }
+      const { modelValue, disabled, disabledColor, color, half, emptyColor } = props
+
+      if (index <= toNumber(modelValue)) {
+        return { type: 'full', score: index, color: disabled ? disabledColor : color }
       }
-      if (props.half && index <= props.modelValue + 0.5) {
-        return { type: 'half', score: index, color: props.disabled ? props.disabledColor : props.color }
+      if (half && index <= toNumber(modelValue) + 0.5) {
+        return { type: 'half', score: index, color: disabled ? disabledColor : color }
       }
-      return { type: 'empty', score: index, color: props.disabled ? props.disabledColor : props.emptyColor }
+      return { type: 'empty', score: index, color: disabled ? disabledColor : emptyColor }
+    }
+
+    const validateWithTrigger = (trigger: ValidateTriggers) => {
+      nextTick(() => {
+        const { validateTrigger, rules, modelValue } = props
+        vt(validateTrigger, trigger, rules, toNumber(modelValue))
+      })
     }
 
     const changeValue = (score: number, event: MouseEvent) => {
@@ -58,28 +80,45 @@ export default defineComponent({
           score -= 0.5
         }
       }
+
       props['onUpdate:modelValue']?.(score)
     }
 
     const handleClick = (score: number, event: MouseEvent) => {
-      if (props.readonly || props.disabled) {
+      const { readonly, disabled, onChange } = props
+
+      if (readonly || disabled) {
         return
       }
+
       changeValue(score, event)
-      props.onChange?.(score)
+      onChange?.(score)
+      validateWithTrigger('onChange')
+    }
+
+    const reset = () => {
+      props['onUpdate:modelValue']?.(0)
+      resetValidation()
     }
 
-    const fontSize: Ref<number | string> = ref(0)
-    fontSize.value = !isNaN(Number(props.size)) ? `${props.size}px` : props.size
+    const validate = () => v(props.rules, toNumber(props.modelValue))
+
+    const rateProvider: RateProvider = {
+      reset,
+      validate,
+      resetValidation,
+    }
 
-    const marginRight: Ref<number | string> = ref(0)
-    marginRight.value = !isNaN(Number(props.marginRight)) ? `${props.marginRight}px` : props.marginRight
+    bindForm?.(rateProvider)
 
     return {
+      formDisabled: form?.disabled,
+      formReadonly: form?.readonly,
+      toSizeUnit,
+      toNumber,
+      errorMessage,
       transformValue,
       handleClick,
-      fontSize,
-      marginRight,
     }
   },
 })
diff --git a/packages/varlet-ui/src/rate/docs/en-US.md b/packages/varlet-ui/src/rate/docs/en-US.md
index a88be9d3361..138afb9a5e7 100644
--- a/packages/varlet-ui/src/rate/docs/en-US.md
+++ b/packages/varlet-ui/src/rate/docs/en-US.md
@@ -152,6 +152,17 @@ export default {
 }
 ```
 
+### Validate
+
+```html
+The values are validated by passing in an array of validators，If the validator returns true, the validation passes。
+Other values are converted to text as a user prompt。
+```
+
+```html
+<var-rate :rules="[(v) => v >= 3 || 'It has to be greater than 2']" v-model='score' />
+```
+
 ## API
 
 ### props
@@ -172,9 +183,21 @@ export default {
 | `disabled-color` | The color of the icon when disabling grading is only effective when `disabled` is `true` and has higher priority than `color` and `empty-color` | _string_ | `#bdbdbd`|
 | `readonly` | Whether to use rating read-only | _boolean_ | `false`|
 | `ripple` | Whether to use water ripple | _boolean_ | `false`|
+| `rules` | The validation rules，Returns `true` to indicate that the validation passed，The remaining values are converted to text as user prompts | _Array<(v: string | number) => any>_ | `-` |
 
 ### Events
 
 | Event | Description | Arguments |
 | --- | --- | --- |
 | `change` | Triggered when the rating changes | The rating of the current click |
+
+### Theme Variables
+#### The following LESS variables can be overridden at build time to modify the theme style
+
+### Rate Variables
+
+| Variable | Default |
+| --- | --- |
+| `@rate-disabled-color` | `#aaa` |
+| `@rate-error-color` | `@color-danger` |
+| `@rate-action-padding` | `4px` |
\ No newline at end of file
diff --git a/packages/varlet-ui/src/rate/docs/zh-CN.md b/packages/varlet-ui/src/rate/docs/zh-CN.md
index 9cdecff6454..f34d8cd0634 100644
--- a/packages/varlet-ui/src/rate/docs/zh-CN.md
+++ b/packages/varlet-ui/src/rate/docs/zh-CN.md
@@ -152,26 +152,38 @@ export default {
 }
 ```
 
+### 字段校验
+
+```html
+通过传入一个校验器数组可以对值进行校验，校验器返回true则为校验通过。
+以外的值将转换为文本作为用户提示。
+```
+
+```html
+<var-rate :rules="[(v) => v >= 3 || '必须大于2']" v-model='score' />
+```
+
 ## API
 
 ### 属性
 
 |参数 | 说明 | 类型 | 默认值 |
 | ---- | ---- | ---- | ---- |
-| v-model | 当前分数 | _number_ | _ |
-| count | 评分总数 | _number_ | `5` |
-| color | 选中时图标的颜色 | _string_ | `#ff9800`|
-| icon | 选中整个图标时的图标样式 | _string_ | `star`|
-| empty-color | 未选中时图标的颜色 | _string_ | `#bdbdbd`|
-| empty-icon | 未选中时图标的样式 | _string_ | `star-outline`|
-| size | 图标大小，默认单位为`px` | _number_,_string_ | `20`|
-| margin-right | 图标间隔，默认单位为`px` | _number_,_string_ | `4`|
-| half | 是否允许半选 | _boolean_ | `false`|
-| half-icon | 半选时图标的样式，只有在`half`为`true`时才有效| _string_ | `star-half-full`|
-| disabled | 是否禁止评分 | _boolean_ | `false`|
-| disabled-color | 禁止评分时图标的颜色，只有在`disabled`为`true`时才有效，优先级高于`color`、`empty-color`| _string_ | `#bdbdbd`|
-| readonly | 是否使用评分只读 | _boolean_ | `false`|
-| ripple | 是否使用水波纹 | _boolean_ | `false`|
+| `v-model` | 当前分数 | _number_ | _ |
+| `count` | 评分总数 | _number_ | `5` |
+| `color` | 选中时图标的颜色 | _string_ | `#ff9800`|
+| `icon` | 选中整个图标时的图标样式 | _string_ | `star`|
+| `empty-color` | 未选中时图标的颜色 | _string_ | `#bdbdbd`|
+| `empty-icon` | 未选中时图标的样式 | _string_ | `star-outline`|
+| `size` | 图标大小，默认单位为`px` | _number_,_string_ | `20`|
+| `margin-right` | 图标间隔，默认单位为`px` | _number_,_string_ | `4`|
+| `half` | 是否允许半选 | _boolean_ | `false`|
+| `half-icon` | 半选时图标的样式，只有在`half`为`true`时才有效| _string_ | `star-half-full`|
+| `disabled` | 是否禁止评分 | _boolean_ | `false`|
+| `disabled-color` | 禁止评分时图标的颜色，只有在`disabled`为`true`时才有效，优先级高于`color`、`empty-color`| _string_ | `#bdbdbd`|
+| `readonly` | 是否使用评分只读 | _boolean_ | `false`|
+| `ripple` | 是否使用水波纹 | _boolean_ | `false`|
+| `rules` | 验证规则，返回`true`表示验证通过，其余的值则转换为文本作为用户提示 | _Array<(v: string | number) => any>_ | `-` |
 
 ### 事件
 
@@ -179,5 +191,14 @@ export default {
 | ---- | ---- | ---- |
 | change | 评分改变时触发| 当前所点击所对应的分数 |
 
+### 主题变量
+#### 以下less变量可通过构建时进行变量覆盖从而修改主题样式
+
+### Rate Variables
 
+| 变量名 | 默认值 |
+| --- | --- |
+| `@rate-disabled-color` | `#aaa` |
+| `@rate-error-color` | `@color-danger` |
+| `@rate-action-padding` | `4px` |
 
diff --git a/packages/varlet-ui/src/rate/example/index.vue b/packages/varlet-ui/src/rate/example/index.vue
index d23510e8c51..f07d0f33182 100644
--- a/packages/varlet-ui/src/rate/example/index.vue
+++ b/packages/varlet-ui/src/rate/example/index.vue
@@ -49,6 +49,9 @@
 
   <app-type>{{ pack.listeningForClickEvents }}</app-type>
   <var-rate v-model="score10" @change="handleChange" />
+
+  <app-type>{{ pack.validate }}</app-type>
+  <var-rate :rules="[(v) => v >= 3 || pack.rateMessage]" v-model="score11" />
 </template>
 
 <script>
@@ -78,6 +81,7 @@ export default {
     const score8 = ref(3)
     const score9 = ref(3)
     const score10 = ref(3)
+    const score11 = ref(3)
 
     const handleChange = (score) => {
       Snackbar({
@@ -102,6 +106,7 @@ export default {
       score8,
       score9,
       score10,
+      score11,
     }
   },
 }
diff --git a/packages/varlet-ui/src/rate/example/locale/en-US.ts b/packages/varlet-ui/src/rate/example/locale/en-US.ts
index ea014463d43..836e329e193 100644
--- a/packages/varlet-ui/src/rate/example/locale/en-US.ts
+++ b/packages/varlet-ui/src/rate/example/locale/en-US.ts
@@ -10,4 +10,6 @@ export default {
   readonlyRating: 'Readonly Rating',
   useWaterRipples: 'Use Water Ripples',
   listeningForClickEvents: 'Listening For Click Events',
+  validate: 'Validate',
+  rateMessage: 'It has to be greater than 2',
 }
diff --git a/packages/varlet-ui/src/rate/example/locale/zh-CN.ts b/packages/varlet-ui/src/rate/example/locale/zh-CN.ts
index 913bc11611b..c82a29d059a 100644
--- a/packages/varlet-ui/src/rate/example/locale/zh-CN.ts
+++ b/packages/varlet-ui/src/rate/example/locale/zh-CN.ts
@@ -10,4 +10,6 @@ export default {
   readonlyRating: '只读评分',
   useWaterRipples: '使用水波纹',
   listeningForClickEvents: '监听点击事件',
+  validate: '字段校验',
+  rateMessage: '必须大于2',
 }
diff --git a/packages/varlet-ui/src/rate/props.ts b/packages/varlet-ui/src/rate/props.ts
index 6950d78beb0..c2f0a08e957 100644
--- a/packages/varlet-ui/src/rate/props.ts
+++ b/packages/varlet-ui/src/rate/props.ts
@@ -1,15 +1,19 @@
+import { PropType } from 'vue'
+
+export type ValidateTriggers = 'onChange'
+
 export const props = {
   //  当前分数
   modelValue: {
-    type: Number,
-    default: 3,
+    type: [String, Number],
+    default: 0,
   },
   'onUpdate:modelValue': {
     type: Function,
   },
   // 图标总数
   count: {
-    type: Number,
+    type: [String, Number],
     default: 5,
   },
   //  选中时的颜色
@@ -25,7 +29,7 @@ export const props = {
   //  未选中的图标的颜色
   emptyColor: {
     type: String,
-    default: '#bdbdbd',
+    default: '#555555',
   },
   //  未选中时图标样式
   emptyIcon: {
@@ -73,8 +77,15 @@ export const props = {
     type: Boolean,
     default: false,
   },
+  validateTrigger: {
+    type: Array as PropType<Array<ValidateTriggers>>,
+    default: ['onChange'],
+  },
+  rules: {
+    type: Array as PropType<Array<(value: any) => any>>,
+  },
   //  点击回调
   onChange: {
-    type: Function,
+    type: Function as PropType<(value: any) => void>,
   },
 }
diff --git a/packages/varlet-ui/src/rate/provide.ts b/packages/varlet-ui/src/rate/provide.ts
new file mode 100644
index 00000000000..97dd4edca37
--- /dev/null
+++ b/packages/varlet-ui/src/rate/provide.ts
@@ -0,0 +1,3 @@
+import { Validation } from '../form/provide'
+
+export type RateProvider = Validation
diff --git a/packages/varlet-ui/src/rate/rate.less b/packages/varlet-ui/src/rate/rate.less
index 39e564c1658..7b4cfe7d758 100644
--- a/packages/varlet-ui/src/rate/rate.less
+++ b/packages/varlet-ui/src/rate/rate.less
@@ -1,10 +1,24 @@
 @import '../styles/var';
 
+@rate-disabled-color: #aaa;
+@rate-error-color: @color-danger;
+@rate-action-padding: 4px;
+
 .var-rate {
   display: flex;
+  transform: translateX(-@rate-action-padding);
 
-  &--content {
-    padding: 2px;
+  &__content {
+    padding: @rate-action-padding;
     box-sizing: unset;
+    cursor: pointer;
+  }
+
+  &--disabled {
+    color: @rate-disabled-color !important;
+  }
+
+  &--error {
+    color: @rate-error-color !important;
   }
 }