完善评分组件

example/docs/zh-CN/components/rate.md

@@ -24,13 +24,13 @@ export default {
 
 :::
 
-::: title 响应结果
+::: title 显示文字
 :::
 
 ::: demo
 
 <template>
-  <lay-rate v-model="all"></lay-rate> {{all}}
+  <lay-rate v-model="all" :text="true"></lay-rate>
 </template>
 
 <script>
@@ -50,6 +50,78 @@ export default {
 
 :::
 
+::: title 半星效果
+:::
+
+::: demo
+
+<template>
+    <lay-rate v-model="half1" :half="true" :is-block="true"></lay-rate>
+    <lay-rate v-model="half2" :half="true" :text="true" :is-block="true"></lay-rate>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+
+     const half1 = ref(0.5)
+     const half2 = ref(0)
+
+
+    return {
+      half1,
+      half2
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 自定义内容
+:::
+
+::: demo
+
+<template>
+  <lay-rate v-model="val" :text="true" :is-block="true">
+    <template v-slot:default="{value}">{{customText(value)}}</template>
+  </lay-rate>
+  <lay-rate v-model="val2" :text="true" :is-block="true">
+    <template v-slot:default="{value}">{{value}}</template>
+  </lay-rate>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+
+    const val = ref(1)
+    const val2 = ref(1)
+    const arrs = {
+        '1': '极差',
+        '2': '差',
+        '3': '中等',
+        '4': '好',
+        '5': '极好'
+    };
+    const customText = function(val){
+      return arrs[val];
+    }
+    return {
+      val,
+      val2
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title 指定长度
 :::
 
@@ -78,6 +150,36 @@ export default {
 
 :::
 
+::: title 触发事件
+:::
+
+::: demo
+
+<template>
+  <lay-rate v-model="val" @select="selectRate"></lay-rate>
+  <div>F12 打开调试工具 -> console 控制面板进行查看</div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+
+    const val = ref(0);
+    const selectRate = function(value){
+      console.log('selectRate - value:', value)
+    }
+
+    return {
+      val
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title 只读模式
 :::
 
@@ -139,10 +241,36 @@ export default {
 
 ::: table
 
-| 属性     | 描述     | 默认值 |
-| -------- | -------- | ------ |
-| v-model  | 评分值   | --     |
-| length   | 评分长度 | --     |
-| readonly | 只读模式 | --     |
+| 属性     | 描述      | 类型 | 默认值 |
+| -------- | -------- | ------ | ------ |
+| v-model  | 评分值   | number | 0     |
+| length   | 评分长度 | number | 5     |
+| readonly | 只读模式 | boolean | false     |
+| theme | 只读模式 | string | #ffb800     |
+| half     | 设定组件是否可以选择半星 |boolean | false     |
+| text | 是否显示评分对应的内容 | boolean | false     |
+| is-block | 评分是否显示为快元素 | boolean | false     |
+
+:::
+
+::: title 插槽
+:::
+
+::: table
+
+| 属性     | 描述      | 参数 |
+| -------- | -------- | ------ |
+| --  | 默认插槽，自定义内容时可以使用为    | { value } |
+
+:::
+
+::: title 事件
+:::
+
+::: table
+
+| 属性     | 描述      | 回调参数 |
+| -------- | -------- | ------ |
+| select  | 选中之后触发事件   | (value: number) |
 
 :::