From 0826ffa477c43246e8936c2671d2655cf7cd5148 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                |  10 +++
 sites/.vitepress/config/sidebar.ts |  61 ++++++++--------
 sites/components/rate/index.md     | 112 +++++++++++++++++++++++++++++
 3 files changed, 153 insertions(+), 30 deletions(-)
 create mode 100644 devui/rate/index.ts
 create mode 100644 sites/components/rate/index.md

diff --git a/devui/rate/index.ts b/devui/rate/index.ts
new file mode 100644
index 00000000..12668ed4
--- /dev/null
+++ b/devui/rate/index.ts
@@ -0,0 +1,10 @@
+import { App } from 'vue'
+import Rate from './rate'
+
+Rate.install = function(Vue: App) {
+  Vue.component(Rate.name, Rate)
+};
+
+Rate.version = '0.0.1'
+
+export default Rate
diff --git a/sites/.vitepress/config/sidebar.ts b/sites/.vitepress/config/sidebar.ts
index 2d639b4f..57b81cb0 100644
--- a/sites/.vitepress/config/sidebar.ts
+++ b/sites/.vitepress/config/sidebar.ts
@@ -1,45 +1,46 @@
 const sidebar = {
-  '/': [
-    { text: '快速开始', link: '/' },
+  "/": [
+    { text: "快速开始", link: "/" },
     {
-      text: '通用',
+      text: "通用",
       children: [
-        { text: 'Button 按钮', link: '/components/button/' },
-        { text: 'Icon 图标', link: '/components/icon/' },
-        { text: 'Panel 面板', link: '/components/panel/' }
-      ]
+        { text: "Button 按钮", link: "/components/button/" },
+        { text: "Icon 图标", link: "/components/icon/" },
+        { text: "Panel 面板", link: "/components/panel/" },
+      ],
     },
     {
-      text: '导航',
-      children: [{ text: 'Tabs 选项卡切换', link: '/components/tabs/' }]
+      text: "导航",
+      children: [{ text: "Tabs 选项卡切换", link: "/components/tabs/" }],
     },
     {
-      text: '反馈',
+      text: "反馈",
       children: [
-        { text: 'Alert 警告', link: '/components/alert/' },
-        { text: 'Loading 加载提示', link: '/components/loading/' },
-        { text: 'Toast 全局通知', link: '/components/toast/' }
-      ]
+        { text: "Alert 警告", link: "/components/alert/" },
+        { text: "Loading 加载提示", link: "/components/loading/" },
+        { text: "Toast 全局通知", link: "/components/toast/" },
+      ],
     },
     {
-      text: '数据录入',
+      text: "数据录入",
       children: [
-        { text: 'Checkbox 复选框', link: '/components/checkbox/' },
-        { text: 'Radio 单选框', link: '/components/radio/' },
-        { text: 'Select 下拉选择框', link: '/components/select/' },
-        { text: 'Switch 开关', link: '/components/switch/' },
-        { text: 'TagsInput 标签输入', link: '/components/tags-input/' },
-        { text: 'TextInput 文本框', link: '/components/text-input/' }
-      ]
+        { text: "Checkbox 复选框", link: "/components/checkbox/" },
+        { text: "Radio 单选框", link: "/components/radio/" },
+        { text: "Select 下拉选择框", link: "/components/select/" },
+        { text: "Switch 开关", link: "/components/switch/" },
+        { text: "TagsInput 标签输入", link: "/components/tags-input/" },
+        { text: "TextInput 文本框", link: "/components/text-input/" },
+      ],
     },
     {
-      text: '数据展示',
+      text: "数据展示",
       children: [
-        { text: 'Avatar 头像', link: '/components/avatar/' },
-        { text: 'Carousel 走马灯', link: '/components/carousel/' }
-      ]
-    }
-  ]
-}
+        { text: "Avatar 头像", link: "/components/avatar/" },
+        { text: "Carousel 走马灯", link: "/components/carousel/" },
+        { text: "Rate 等级评估", link: "/components/rate/" },
+      ],
+    },
+  ],
+};
 
-export default sidebar
+export default sidebar;
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