💄(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 () {
+const onBlur = function (event: Event) {
-  emit("blur");
+  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,6 +67,7 @@ const wordCount = computed(() => {
 </script>
 
 <template>
+  <div class="layui-textarea-wrapper">
     <textarea
       :value="modelValue"
       v-bind="$attrs"
@@ -56,9 +78,14 @@ const wordCount = computed(() => {
       :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>

package/document-component/src/document/zh-CN/components/datePicker.md

@@ -14,7 +14,6 @@
 ::: demo
 
 <template>
-  选择的时间：{{endTime}}
   <lay-date-picker v-model="endTime"></lay-date-picker>
 </template>
 
@@ -41,7 +40,6 @@ export default {
 ::: demo
 
 <template>
-  选择的时间：{{endTime2}}
   <lay-date-picker type="datetime" v-model="endTime2"></lay-date-picker>
 </template>
 
@@ -68,7 +66,6 @@ export default {
 ::: demo
 
 <template>
-  <!-- 选择的时间：{{endTime3}} -->
   <lay-date-picker disabled type="year" v-model="endTime3"></lay-date-picker>
 </template>
 
@@ -95,7 +92,6 @@ export default {
 ::: demo
 
 <template>
-  选择的时间：{{endTime3}}
   <lay-date-picker type="year" v-model="endTime3"></lay-date-picker>
 </template>
 
@@ -122,7 +118,6 @@ export default {
 ::: demo
 
 <template>
-  选择的时间：{{endTime4}}
   <lay-date-picker type="month" v-model="endTime4"></lay-date-picker>
 </template>
 
@@ -198,10 +193,7 @@ export default {
 ::: title 一次性选择
 :::
 
-::: describe 只需要点击一次后自动关闭，无需点击确认按钮
+::: demo 只需要点击一次后自动关闭，无需点击确认按钮
-:::
-
-::: demo
 
 <template>
   <lay-date-picker v-model="endTime7" simple></lay-date-picker>

package/document-component/src/document/zh-CN/components/textarea.md

@@ -91,6 +91,32 @@ export default {
 
 :::
 
+::: title 清空内容
+:::
+
+::: demo
+
+<template>
+  <lay-textarea placeholder="请输入内容" v-model="data3" allow-clear></lay-textarea>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const data3 = ref("");
+
+    return {
+      data3
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title 显示字数
 :::
 

package/document-component/src/document/zh-CN/guide/changelog.md

@@ -16,10 +16,14 @@
       <li> 
         <h3>1.2.8 <span class="layui-badge-rim">2022-07-08</span></h3> 
         <ul>         
-          <li>[优化] cascader 组件 change 回调函数。 by @SmallWai</li>
           <li>[修复] layer 组件 Notifiy 缺失关闭图标。 by @SmallWai</li> 
           <li>[修复] input 组件 modelValue 设置为 zero 不显示的问题。by @Jmysy</li>
+          <li>[新增] textarea 组件 allow-clear 属性, 允许清空。by @Jmysy</li>
+          <li>[新增] textarea 组件 change 回调函数。by @Jmysy</li>
+          <li>[新增] textarea 组件 clear 回调函数。by @Jmysy</li>
           <li>[新增] cascader 组件 replaceFields属性 用于自义定字段。by @SmallWai</li>
+          <li>[优化] cascader 组件 change 回调函数。 by @SmallWai</li>
+          <li>[删除] input 组件 value 属性, 与 v-model 属性冲突。by @Jmysy</li>
         </ul>
       </li>
     </ul>