✨(component): update

package/component/src/component/input/index.vue

@@ -166,14 +166,6 @@ const showPassword = () => {
         @compositionstart="onCompositionstart"
         @compositionend="onCompositionend"
       />
-      <span class="layui-input-suffix" v-if="slots.suffix || props.suffixIcon">
-        <slot name="suffix" v-if="slots.suffix"></slot>
-        <lay-icon
-          v-else
-          :type="props.suffixIcon"
-          class="layui-input-suffix-icon"
-        ></lay-icon>
-      </span>
       <span
         class="layui-input-password"
         @click="showPassword"
@@ -185,6 +177,14 @@ const showPassword = () => {
       <span class="layui-input-clear" v-if="allowClear && hasContent">
         <lay-icon type="layui-icon-close-fill" @click.stop="onClear"></lay-icon>
       </span>
+      <span class="layui-input-suffix" v-if="slots.suffix || props.suffixIcon">
+        <slot name="suffix" v-if="slots.suffix"></slot>
+        <lay-icon
+          v-else
+          :type="props.suffixIcon"
+          class="layui-input-suffix-icon"
+        ></lay-icon>
+      </span>
     </div>
     <div class="layui-input-append" v-if="slots.append">
       <slot name="append"></slot>

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

@@ -10,9 +10,7 @@ import { provide, computed, WritableComputedRef, ref } from "vue";
 import LayInput from "../input/index.vue";
 import LayTagInput from "../tagInput/index.vue";
 import LayDropdown from "../dropdown/index.vue";
-import LaySelectOption, {
-  LaySelectOptionProps,
-} from "../selectOption/index.vue";
+import LaySelectOption, { LaySelectOptionProps } from "../selectOption/index.vue";
 
 export interface LaySelectProps {
   name?: string;
@@ -67,16 +65,35 @@ provide("multiple", multiple);
 <template>
   <div class="layui-select">
     <lay-dropdown update-at-scroll>
-      <lay-tag-input v-if="multiple" v-model="selectedValue" :disabledInput="true"></lay-tag-input>
+      <lay-tag-input
+        v-if="multiple"
+        v-model="selectedValue"
+        :disabledInput="true"
+        :allow-clear="true"
+      >
+        <template #suffix>
+          <lay-icon type="layui-icon-triangle-d"></lay-icon>
+        </template>
+      </lay-tag-input>
       <lay-input
         v-else
-        :placeholder="placeholder"
         v-model="selectedValue"
-      ></lay-input>
+        :placeholder="placeholder"
+        :allow-clear="true"
+      >
+        <template #suffix>
+          <lay-icon type="layui-icon-triangle-d"></lay-icon>
+        </template>
+      </lay-input>
       <template #content>
         <dl class="layui-select-options">
           <div class="layui-select-search">
-            <lay-input v-model="searchValue" size="sm" placeholder="请选择" prefix-icon="layui-icon-search"></lay-input>
+            <lay-input
+              v-model="searchValue"
+              size="sm"
+              placeholder="请选择"
+              prefix-icon="layui-icon-search"
+            ></lay-input>
           </div>
           <template v-if="items">
             <lay-select-option

package/component/src/component/selectOption/index.vue

@@ -22,7 +22,7 @@ const props = withDefaults(defineProps<LaySelectOptionProps>(), {
 });
 
 const selectedValue: WritableComputedRef<any> = inject("selectedValue") as WritableComputedRef<any>;
-const searchValue: Ref<string> = inject('searchValue') as Ref<string>;
+const searchValue: Ref<string> = inject("searchValue") as Ref<string>;
 const multiple: ComputedRef = inject("multiple") as ComputedRef;
 
 const handleSelect = () => {
@@ -35,14 +35,16 @@ const selected = computed(() => {
   if (multiple.value) {
     return selectedValue.value.indexOf(props.value) != -1;
   } else {
-    // close dropdown
     return selectedValue.value === props.value;
   }
 });
 
 const display = computed(() => {
-  return props.keyword.indexOf(searchValue.value) > -1 || props.label.indexOf(searchValue.value) > -1;
-})
+  return (
+    props.keyword.indexOf(searchValue.value) > -1 ||
+    props.label.indexOf(searchValue.value) > -1
+  );
+});
 </script>
 
 <template>
@@ -52,7 +54,11 @@ const display = computed(() => {
     @click="handleSelect"
   >
     <template v-if="multiple">
-      <lay-checkbox v-model="selectedValue" :value="value" skin="primary"></lay-checkbox>
+      <lay-checkbox
+        v-model="selectedValue"
+        :value="value"
+        skin="primary"
+      ></lay-checkbox>
     </template>
     <slot>{{ label }}</slot>
   </dd>

package/component/src/component/tagInput/index.less

@@ -28,7 +28,6 @@
   border-style: solid;
   border-color: var(--input-border-color);
   border-radius: var(--input-border-radius);
-  padding: 0 5px;
   cursor: text;
 
   &-inner {
@@ -48,8 +47,11 @@
   }
 
   &-clear {
-    display: none;
+    flex: none;
+    display: flex;
     align-items: center;
+    padding-right: 10px;
+    color: rgba(0, 0, 0, 0.45);
     cursor: pointer;
   }
 
@@ -112,7 +114,7 @@
       }
 
       .layui-tag-input-inner {
-        padding: @@inner-padding 0;
+        padding: @@inner-padding 5px;
       }
 
       .layui-tag {
@@ -129,6 +131,13 @@
   .set-size(xs);
 }
 
+.layui-tag-input-suffix {
+  display: flex;
+  flex: none;
+  align-items: center;
+  padding: 0 15px;
+}
+
 .layui-tag-input:hover,
 .layui-tag-input:focus-within {
   border-color: #d2d2d2 !important;

package/component/src/component/tagInput/index.vue

@@ -46,7 +46,7 @@ const props = withDefaults(defineProps<LayInputTagProps>(), {
   disabledInput: false,
   placeholder: "",
   readonly: false,
-  allowClear: true,
+  allowClear: false,
   minCollapsedNum: 3,
   size: "md",
 });
@@ -245,23 +245,26 @@ defineExpose({
       </template>
       <template v-if="!disabledInput">
         <input
-        ref="inputRefEl"
-        class="layui-tag-input-inner-input"
-        :style="inputStyle"
-        :disabled="disabled"
-        :placeholder="placeholder"
-        :readonly="readonly"
-        @keydown.enter="handleEnter"
-        @keyup="handleBackspaceKeyUp"
-        @input="handleInput"
-        @compositionstart="handleComposition"
-        @compositionupdate="handleComposition"
-        @compositionend="handleComposition"
-      />
+          ref="inputRefEl"
+          class="layui-tag-input-inner-input"
+          :style="inputStyle"
+          :disabled="disabled"
+          :placeholder="placeholder"
+          :readonly="readonly"
+          @keydown.enter="handleEnter"
+          @keyup="handleBackspaceKeyUp"
+          @input="handleInput"
+          @compositionstart="handleComposition"
+          @compositionupdate="handleComposition"
+          @compositionend="handleComposition"
+        />
       </template>
     </span>
     <span v-if="allowClear && tagData?.length" class="layui-tag-input-clear">
       <lay-icon type="layui-icon-close-fill" @click.stop="handleClearClick" />
     </span>
+    <span class="layui-tag-input-suffix"  v-if="$slots.suffix">
+      <slot name="suffix"></slot> 
+    </span> 
   </div>
 </template>