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

评分组件增加清除功能

ISSUES CLOSED: #I50JOX

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

@@ -26,4 +26,17 @@
 .layui-rate[readonly] li i:hover {
   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>