♻️(component): 统一select与cascader下拉图标,select新增清空属性

package/component/src/component/cascader/index.less

@@ -34,11 +34,15 @@
     .set-size(@xs,@xs-width);
   }
 }
+.layui-cascader .layui-input-suffix{
+  padding-right: 10px;
+}
 .layui-cascader .layui-icon-down {
   transition: all 0.3s ease-in-out;
   transform: rotate(0);
+  color:var(--global-neutral-color-8);
 }
-.layui-cascader-open .layui-icon-down {
+.layui-cascader-opend .layui-icon-down {
   transform: rotate(180deg);
 }
 

package/component/src/component/cascader/index.vue

@@ -1,11 +1,14 @@
 <template>
   <lay-dropdown
     class="layui-cascader"
+    :class="{'layui-cascader-opend':openState}"
     ref="dropdownRef"
     :autoFitMinWidth="false"
     :updateAtScroll="true"
     :disabled="dropDownDisabled"
     :size="size"
+    @open="openState=true"
+    @hide="openState=false"
   >
     <lay-input
       v-model="displayValue"
@@ -276,4 +279,6 @@ const onClear = () => {
     dropDownDisabled.value = false;
   }, 0);
 };
+
+const openState=ref(false)
 </script>

package/component/src/component/select/index.less

@@ -113,6 +113,24 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
   transition: all 0.3s;
   -webkit-transition: all 0.3s;
 }
+.layui-input-icon-area{
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+  cursor: pointer;
+  .layui-icon-close-fill{
+    margin-left: 10px;
+    color: rgba(0, 0, 0, 0.45);
+  }
+}
+.layui-form-select .layui-icon-down {
+  display: inline-block;
+  transition: all 0.3s;
+  -webkit-transition: all 0.3s;
+  color:var(--global-neutral-color-8);
+}
 
 .layui-form-select dl {
   display: none;

package/component/src/component/select/index.vue

@@ -31,6 +31,7 @@ export interface LaySelectProps {
     keyword: string;
   }[];
   size?: "lg" | "md" | "sm" | "xs";
+  allowClear:boolean;
 }
 
 const selectRef = shallowRef<undefined | HTMLElement>(undefined);
@@ -48,6 +49,7 @@ const props = withDefaults(defineProps<LaySelectProps>(), {
   multiple: false,
   create: false,
   size:'md',
+  allowClear:true
 });
 
 const openState = ref(false);
@@ -164,6 +166,10 @@ const selectItemPush = function (p: SelectItem) {
   }
 };
 
+const clear=()=>{
+  emit('update:modelValue',props.multiple?[]:'');
+}
+
 provide("selectItemHandle", selectItemHandle);
 provide("selectItemPush", selectItemPush);
 provide("selectItem", selectItem);
@@ -198,7 +204,10 @@ provide("keyword", txt);
           { 'layui-disabled': disabled },
         ]"
       />
-      <i :class="['layui-edge', { 'layui-disabled': disabled }]"></i>
+      <span class="layui-input-icon-area">
+        <i :class="['layui-icon layui-icon-down', { 'layui-disabled': disabled }]" :style="{transform:`rotate(${openState?180:0}deg)`}"></i>
+        <i class="layui-icon layui-icon-close-fill" v-if="(value||selectItem.label?.length)&&allowClear" @click.stop="clear"></i>
+      </span>
       <!-- 多选 -->
       <div
         v-if="selectItem.multiple && Array.isArray(selectItem.label)"