[新增] rate 评分组件

docs/docs/zh-CN/components/color.md

@@ -131,45 +131,3 @@ export default {
 }
 </script>
 :::
-
-
-::: demo
-
-<template>
-<ul class="site-doc-bgcolor">
-      <li class="layui-bg-red">
-        赤色：class="layui-bg-red"
-      </li>
-      <li class="layui-bg-orange">
-        橙色：class="layui-bg-orange"
-      </li>
-      <li class="layui-bg-green">
-        墨绿：class="layui-bg-green"
-      </li>
-      <li class="layui-bg-cyan">
-        藏青：class="layui-bg-cyan"
-      </li>
-      <li class="layui-bg-blue">
-        蓝色：class="layui-bg-blue"
-      </li>
-      <li class="layui-bg-black">
-        雅黑：class="layui-bg-black"
-      </li>
-      <li class="layui-bg-gray">
-        银灰：class="layui-bg-gray"
-      </li>
-    </ul>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-:::

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

@@ -17,3 +17,49 @@ export default {
 </script>
 
 :::
+
+::: demo
+
+<template>
+  <lay-rate v-model="all"></lay-rate> {{all}}
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const all = ref(4)
+
+    return {
+      all
+    }
+  }
+}
+</script>
+
+:::
+
+::: demo
+
+<template>
+  <lay-rate v-model="all2" length="10"></lay-rate> {{all2}}
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const all2 = ref(4)
+
+    return {
+      all2
+    }
+  }
+}
+</script>
+
+:::

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "a component library for Vue 3 base on layui-vue",
   "main": "lib/layui-vue.umd.js",
   "module": "lib/layui-vue.es.js",

src/module/rate/index.vue

@@ -1,20 +1,19 @@
 <template>
   <ul class="layui-rate">
-    <li class="layui-inline">
-      <i class="layui-icon layui-icon-rate-solid"></i>
+    <li
+      class="layui-inline"
+      @mouseenter="mouseenter(index)"
+      v-for="(rate, index) in rates"
+      :key="rate"
+    >
+      <i class="layui-icon" :class="[rate]"></i>
     </li>
-    <li class="layui-inline">
-      <i class="layui-icon layui-icon-rate-solid"></i>
-    </li>
-    <li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
-    <li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
-    <li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
   </ul>
 </template>
 <script setup lang="ts">
-import { defineProps, ref, withDefaults } from 'vue'
+import { defineProps, Ref, ref, withDefaults } from 'vue'
 
-const rate = ref([])
+const rates: Ref<Array<String>> = ref([])
 
 const props = withDefaults(
   defineProps<{
@@ -23,7 +22,31 @@ const props = withDefaults(
   }>(),
   {
     length: 5,
-    modelValue: 0
+    modelValue: 0,
   }
 )
+
+for (let index = 0; index < props.length; index++) {
+  rates.value.push('layui-icon-rate')
+}
+
+for (let index = props.modelValue - 1; index >= 0; index--) {
+  rates.value[index] = 'layui-icon-rate-solid'
+}
+
+const emit = defineEmits(['update:modelValue'])
+
+const mouseenter = function (index: number) {
+  for (let i = index; i >= 0; i--) {
+    rates.value[i] = 'layui-icon-rate-solid'
+  }
+  for (let j = index + 1; j < props.length; j++) {
+    rates.value[j] = 'layui-icon-rate'
+  }
+
+  // select update 时, 通知 change 事件
+
+  emit('update:modelValue', index+1)
+
+}
 </script>