feat: add input allow-clear props

example/docs/zh-CN/components/input.md

@@ -83,6 +83,32 @@ export default {
 
 :::
 
+::: title 允许清空
+:::
+
+::: demo
+
+<template>
+  <lay-input allow-clear="true" v-model="value1"></lay-input>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const value1 = ref("内容")
+
+    return {
+      value1
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title 事件回调
 :::
 

example/docs/zh-CN/guide/changelog.md

@@ -18,6 +18,7 @@
         <ul>
           <li>[新增] input 组件 prefix 插槽, 提供前缀设置。</li>
           <li>[新增] input 组件 suffix 插槽, 提供后缀设置。</li>
+          <li>[新增] input 组件 allow-clear 属性, 提供输入清空。</li>
           <li>[新增] transition 组件 type 属性, 默认为 collapse 过渡。</li>
           <li>[新增] transition 组件 type 属性 fade 值, 提供淡出淡入效果。</li>
         </ul> 

src/component/input/index.less

@@ -32,6 +32,7 @@
   display: flex;
   flex: none;
   align-items: center;
+  padding-left: 8px;
 }
 
 .layui-input-suffix {
@@ -40,6 +41,13 @@
   align-items: center;
 }
 
+.layui-input-clear {
+  display: flex;
+  flex: none;
+  align-items: center;
+  padding-right: 10px;
+}
+
 .layui-input:hover {
   border-color: #eee !important;
 }

src/component/input/index.vue

@@ -7,7 +7,7 @@ export default {
 <script setup lang="ts">
 import "./index.less";
 import { useI18n } from "vue-i18n";
-import { useSlots } from "vue-demi";
+import { computed, useSlots } from "vue-demi";
 
 const { t } = useI18n();
 const slots = useSlots();
@@ -17,8 +17,9 @@ export interface LayInputProps {
   type?: string;
   value?: string;
   disabled?: boolean;
-  modelValue?: string | number;
+  modelValue?: string;
   placeholder?: string;
+  allowClear?: boolean;
 }
 
 const props = withDefaults(defineProps<LayInputProps>(), {});
@@ -38,6 +39,10 @@ const onFocus = function (event: FocusEvent) {
 const onBlur = function () {
   emit("blur");
 };
+
+const clear = () => {
+    emit("update:modelValue", "");
+}
 </script>
 
 <template>
@@ -60,5 +65,8 @@ const onBlur = function () {
     <span class="layui-input-suffix" v-if="slots.suffix">
       <slot name="suffix"></slot>
     </span>
+    <span class="layui-input-clear" v-if="allowClear">
+      <lay-icon type="layui-icon-close-fill" @click="clear"></lay-icon>
+    </span>
   </div>
 </template>

src/component/transition/index.vue

@@ -1,7 +1,5 @@
 <template>
-  <LayCollapseTransition v-if="type === 'collapse'"
+  <LayCollapseTransition v-if="type === 'collapse'"><slot></slot></LayCollapseTransition>
-    ><slot></slot
-  ></LayCollapseTransition>
   <LayFadeTransition v-if="type === 'fade'"><slot></slot></LayFadeTransition>
 </template>
 

src/component/tree/tree.ts

@@ -128,14 +128,12 @@ class Tree {
     if (!originMap.has(nodeKey)) {
       originMap.set(nodeKey, origin);
     }
-
     return node;
   }
 
   setChildrenChecked(checked: boolean, nodes: TreeData[]) {
     const len = nodes.length;
     for (let i = 0; i < len; i++) {
-      //console.log(nodes[i], checked);
       nodes[i].isChecked.value = checked;
       nodes[i].children &&
         nodes[i].children.length > 0 &&