From abda9aad39cf0c3c0eb5421a2fb15326a1a3495b Mon Sep 17 00:00:00 2001
From: ElsaOOo <yjjjng0901@126.com>
Date: Wed, 11 Aug 2021 17:53:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0rate=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 devui/rate/index.ts            |  24 +++----
 sites/components/rate/index.md | 112 +++++++++++++++++++++++++++++++++
 2 files changed, 124 insertions(+), 12 deletions(-)
 create mode 100644 sites/components/rate/index.md

diff --git a/devui/rate/index.ts b/devui/rate/index.ts
index 172f6b02..1c62125e 100644
--- a/devui/rate/index.ts
+++ b/devui/rate/index.ts
@@ -1,16 +1,16 @@
-import type { App } from 'vue'
-import Rate from './src/rate'
+import type { App } from "vue";
+import Rate from "./src/rate";
 
-Rate.install = function(app: App) {
-  app.component(Rate.name, Rate)
-}
+Rate.install = function (app: App) {
+  app.component(Rate.name, Rate);
+};
 
-export { Rate }
+export { Rate };
 
 export default {
-  title: 'Rate 评分',
-  category: '数据录入',
-  install(app: App): void {    
-		app.use(Rate as any)
-  }
-}
+  title: "Rate 评分",
+  category: "数据录入",
+  install(app: App): void {
+    app.use(Rate as any);
+  },
+};
diff --git a/sites/components/rate/index.md b/sites/components/rate/index.md
new file mode 100644
index 00000000..38de55f7
--- /dev/null
+++ b/sites/components/rate/index.md
@@ -0,0 +1,112 @@
+# Rate 等级评估
+
+等级评估。
+
+何时使用  
+用户对一个产品进行评分时可以使用。
+
+## Demo
+
+<section>
+  <h3>只读模式</h3>
+  <br />
+  <d-rate :read=true :value=value1 />
+</section>
+
+```html
+<d-rate read="{true}" :value="value1" />
+```
+
+<section>
+  <h3>动态模式</h3>
+  <br />
+  <d-rate :value=value2 @onUpdate:value="onUpdateValue2" />
+</section>
+
+```html
+<d-rate :value="2" @onUpdate:value="onUpdateValue2" />
+```
+
+<section>
+  <h3>动态模式-自定义</h3>
+  <br />
+  <d-rate character="A" color="#ffa500"  :value=value3 
+    :count=6 @onUpdate:value="onUpdateValue3"  />
+</section>
+
+```html
+<d-rate
+  character="A"
+  color="#ffa500"
+  :value="value3"
+  count="6"
+  @onUpdate:value="onUpdateValue3"
+/>
+```
+
+<section>
+  <h3>使用type参数</h3>
+  <br />
+  <div>
+    <d-rate :value=value1 :read=true type="success" :count=5 />
+  </div>
+  <div>
+    <d-rate :value=value2 :read=true type="warning" :count=5 />
+  </div>
+  <div>
+    <d-rate :value=value3 :read=true type="error" :count=5 />
+  </div>
+</section>
+
+## 如何使用
+
+### 只读模式
+
+在 module 中引入：
+
+```ts
+import { DRate } from "vue-devui";
+```
+
+在页面中使用：
+
+```html
+<d-rate :value="{3}" count="{5}"></d-rate>
+```
+
+# Rate
+
+## d-rate 参数
+
+|   参数    |              类型               | 默认值 | 描述                                                     |
+| :-------: | :-----------------------------: | :----: | :------------------------------------------------------- |
+|   read    |            `boolean`            | false  | 可选，设置是否为只读模式，只读模式无法交互               |
+|   count   |            `number`             |   5    | 可选，设置总等级数                                       |
+|   type    | `'success'\|'warning'\|'error'` |   --   | 可选，设置当前评分的类型，不同类型对应不同颜色           |
+|   color   |            `string`             |   --   | 可选，星星颜色                                           |
+|   icon    |            `string`             |   --   | 可选，评分图标的样式，只支持 devUI 图标库中所有图标      |
+| character |            `string`             |   --   | 可选，评分图标的样式，icon 与 character 只能设置其中一个 |
+
+<script lang="ts">
+  import { defineComponent, ref, h } from 'vue'
+  export default defineComponent({
+    setup() {
+      const value1 = ref(3.5)
+      const value2 = ref(2)
+      const value3 = ref(3)
+      const onUpdateValue2 = (newVal: number) => {
+        value2.value = newVal;
+      };
+      const onUpdateValue3 = (newVal: number) => {
+      value3.value = newVal;
+    };
+      return {
+        value1,
+        value2,
+        onUpdateValue2,
+        value3,
+        onUpdateValue3
+      }
+    }
+  })
+</script>
-- 
Gitee