💄(component): 完善 input 与 textarea 组件

package/component/src/component/datePicker/index.vue

@@ -4,7 +4,7 @@
       <lay-input
         readonly
         :name="name"
-        :value="dateValue || modelValue"
+        :model-value="dateValue || modelValue"
         prefix-icon="layui-icon-date"
       >
       </lay-input>

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

@@ -13,7 +13,6 @@ import { useI18n } from "../../language";
 export interface LayInputProps {
   name?: string;
   type?: string;
-  value?: string;
   prefixIcon?: string;
   suffixIcon?: string;
   modelValue?: string;
@@ -46,13 +45,13 @@ const emit = defineEmits<InputEmits>();
 
 const { t } = useI18n();
 const slots = useSlots();
-const currentValue = ref<string>(String(props.modelValue));
+const currentValue = ref<string>(String(props.modelValue == null ? '' : props.modelValue));
 const hasContent = computed(() => (props.modelValue as string)?.length > 0);
 
 watch(
   () => props.modelValue,
   () => {
-    currentValue.value = String(props.modelValue);
+    currentValue.value = String(props.modelValue == null ? '' : props.modelValue);
   }
 );
 

package/component/src/component/textarea/index.less

@@ -17,6 +17,11 @@
   min-height: 100px;
   padding: 6px 10px;
   resize: vertical;
+  position: relative;
+}
+
+.layui-textarea-wrapper { 
+  position: relative;
 }
 
 .layui-textarea:hover {
@@ -27,6 +32,13 @@
   border-color: #d2d2d2 !important;
 }
 
+.layui-textarea-clear {
+  position: absolute;
+  color: rgba(0, 0, 0, 0.45);
+  right: 10px;
+  top: 10px;
+}
+
 .layui-textarea::-webkit-input-placeholder {
   line-height: 1.3;
 }

package/component/src/component/textarea/index.vue

@@ -14,28 +14,49 @@ export interface LayTextareaProps {
   placeholder?: string;
   disabled?: boolean;
   showCount?: boolean;
+  allowClear?: boolean;
 }
 
 const props = defineProps<LayTextareaProps>();
 
-const emit = defineEmits(["update:modelValue", "input", "focus", "blur"]);
+interface TextareaEmits {
+  (e: "blur", event: Event): void;
+  (e: "input", event: Event): void;
+  (e: "update:modelValue", value: string): void;
+  (e: "change", event: Event): void;
+  (e: "focus", event: Event): void;
+  (e: "clear"): void;
+}
+
+const emit = defineEmits<TextareaEmits>();
 
 const attrs = useAttrs();
 
-const onInput = function (event: InputEvent) {
+const onInput = function (event: Event) {
   const inputElement = event.target as HTMLInputElement;
   emit("update:modelValue", inputElement.value);
-  emit("input", inputElement.value);
+  emit("input", event);
 };
 
-const onFocus = function (event: FocusEvent) {
+const onFocus = function (event: Event) {
   emit("focus", event);
 };
 
-const onBlur = function () {
-  emit("blur");
+const onBlur = function (event: Event) {
+  emit("blur", event);
 };
 
+const onChange = (event: Event) => {
+  emit("change", event);
+};
+
+const onClear = function () {
+  emit("update:modelValue", "");
+  emit("clear");
+};
+
+const hasContent = computed(() => (props.modelValue as string)?.length > 0);
+
 const wordCount = computed(() => {
   let count = String(props.modelValue?.length ?? 0);
   if (attrs.maxlength) {
@@ -46,19 +67,25 @@ const wordCount = computed(() => {
 </script>
 
 <template>
-  <textarea
-    :value="modelValue"
-    v-bind="$attrs"
-    :placeholder="placeholder"
-    :name="name"
-    :disabled="disabled"
-    class="layui-textarea"
-    :class="{ 'layui-disabled': disabled }"
-    @input="onInput"
-    @focus="onFocus"
-    @blur="onBlur"
-  ></textarea>
-  <div v-if="showCount" class="layui-texterea-show-count">
-    {{ wordCount }}
+  <div class="layui-textarea-wrapper">
+    <textarea
+      :value="modelValue"
+      v-bind="$attrs"
+      :placeholder="placeholder"
+      :name="name"
+      :disabled="disabled"
+      class="layui-textarea"
+      :class="{ 'layui-disabled': disabled }"
+      @input="onInput"
+      @focus="onFocus"
+      @change="onChange"
+      @blur="onBlur"
+    ></textarea>
+    <span class="layui-textarea-clear" v-if="allowClear && hasContent">
+      <lay-icon type="layui-icon-close-fill" @click="onClear"></lay-icon>
+    </span>
+    <div v-if="showCount" class="layui-texterea-show-count">
+      {{ wordCount }}
+    </div>
   </div>
 </template>