✨(component): 评分组件增加清除功能

评分组件增加清除功能

ISSUES CLOSED: #I50JOX

package/component/src/component/rate/index.less

@@ -27,3 +27,16 @@
   cursor: default;
   transform: scale(1);
 }
+
+.layui-rate-clear-icon {
+  display: inline-block;
+  color: #c6c6c6;
+  padding-top: 3px;
+  font-size: 18px;
+  vertical-align: middle;
+}
+
+.layui-rate-clear-icon:hover{
+  cursor: pointer;
+  color: #ff4949;
+}

package/component/src/component/rate/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 export default {
-  name: "LayRate",
+  name: "LayRate"
 };
 </script>
 
@@ -16,6 +16,8 @@ export interface LayRateProps {
   half?: boolean;
   text?: boolean;
   isBlock?: boolean;
+  hasClear?: boolean;
+  clearIcon?: string;
   icons?: string[];
 }
 
@@ -26,6 +28,8 @@ const props = withDefaults(defineProps<LayRateProps>(), {
   half: false,
   text: false,
   isBlock: false,
+  hasClear: false,
+  clearIcon: "layui-icon-close-fill",
   icons: () => [
     "layui-icon-rate",
     "layui-icon-rate-half",
@@ -33,7 +37,7 @@ const props = withDefaults(defineProps<LayRateProps>(), {
   ],
 });
 
-const emit = defineEmits(["update:modelValue", "select"]);
+const emit = defineEmits(["update:modelValue", "select", "clear"]);
 
 const currentValue = ref<number>(props.modelValue);
 // 临时存储值
@@ -77,6 +81,16 @@ const action = function (index: number, event: any) {
   emit("update:modelValue", currentValue.value);
   emit("select", currentValue.value);
 };
+
+// 清除评分图标
+const showClearIcon = computed(
+  () => !props.readonly && props.hasClear
+);
+const clearRate = function(){
+  tempValue.value = 0;
+  currentValue.value = 0;
+  emit("clear", currentValue.value);
+}
 </script>
 
 <template>
@@ -116,5 +130,8 @@ const action = function (index: number, event: any) {
         </slot>
       </span>
     </template>
+    <template v-if="showClearIcon">
+      <i :class="['layui-icon', 'layui-rate-clear-icon', clearIcon]" @click="clearRate" title="清除评分"></i>
+    </template>
   </div>
 </template>

package/document/src/document/zh-CN/components/rate.md

@@ -89,6 +89,30 @@ export default {
 
 :::
 
+::: title 清除功能
+:::
+
+::: demo
+
+<template>
+    <lay-rate v-model="clearHalf" :half="true" :is-block="true" has-clear></lay-rate>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const clearHalf = ref(0.5)
+    return {
+      clearHalf
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title 自定义内容
 :::
 
@@ -289,6 +313,8 @@ export default {
 | half     | 设定组件是否可以选择半星 | `boolean` | false     |
 | text     | 是否显示评分对应的内容 | `boolean` | false     |
 | is-block | 评分是否显示为快元素 | `boolean` | false     |
+| has-clear | 评分是否需要清除功能 | `boolean` | false     |
+| clear-icon | 评分清除功能使用的图标`class` | `string` | `layui-icon-close-fill`     |
 | icons    | 评分使用图标`class`；`["空心", "实心"]`/`["空心", "半心", "实心"]` | `string[]` | 星型     |
 
 :::
@@ -312,6 +338,7 @@ export default {
 | 属性     | 描述      | 回调参数 |
 | -------- | -------- | ------ |
 | select  | 选中之后触发事件   | (value: number) |
+| clear  | 清除之后触发事件   | (value: number) |
 
 :::