From eeeeb84aa6492c583494fb833636377dc10b4238 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?0o=E5=BC=A0=E4=B8=8D=E6=AD=AAo0?= <zhangzheng7856@126.com>
Date: Sat, 9 Jul 2022 20:07:49 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(component):=20=E2=9C=A8(component):?=
 =?UTF-8?q?=20cascader=20=E5=A2=9E=E5=8A=A0=20allow-clear=20=E7=94=A8?=
 =?UTF-8?q?=E4=BA=8E=E6=B8=85=E7=A9=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/component/cascader/index.vue          | 69 +++++++++----------
 .../src/document/zh-CN/components/cascader.md |  7 +-
 .../src/document/zh-CN/guide/changelog.md     |  1 +
 3 files changed, 38 insertions(+), 39 deletions(-)

diff --git a/package/component/src/component/cascader/index.vue b/package/component/src/component/cascader/index.vue
index 9bd5e3be..01f3ca69 100644
--- a/package/component/src/component/cascader/index.vue
+++ b/package/component/src/component/cascader/index.vue
@@ -1,48 +1,24 @@
 <template>
-  <lay-dropdown
-    class="layui-cascader"
-    ref="dropdownRef"
-    :autoFitMinWidth="false"
-    :updateAtScroll="true"
-  >
-    <lay-input
-      v-model="displayValue"
-      readonly
-      suffix-icon="layui-icon-down"
-      :placeholder="placeholder"
-      v-if="!slots.default"
-    ></lay-input>
+  <lay-dropdown class="layui-cascader" ref="dropdownRef" :autoFitMinWidth="false" :updateAtScroll="true"
+    :disabled="dropDownDisabled">
+    <lay-input v-model="displayValue" readonly suffix-icon="layui-icon-down" :placeholder="placeholder"
+      v-if="!slots.default" :allow-clear="allowClear" @clear="onClear"></lay-input>
     <slot v-else></slot>
 
     <template #content>
       <div class="layui-cascader-panel">
         <template v-for="(itemCol, index) in treeData">
-          <lay-scroll
-            height="180px"
-            class="layui-cascader-menu"
-            :key="'cascader-menu' + index"
-            v-if="itemCol.data.length"
-          >
-            <div
-              class="layui-cascader-menu-item"
-              v-for="(item, i) in itemCol.data"
-              :key="index + i"
-              @click="selectBar(item, i, index)"
-              :class="[
+          <lay-scroll height="180px" class="layui-cascader-menu" :key="'cascader-menu' + index"
+            v-if="itemCol.data.length">
+            <div class="layui-cascader-menu-item" v-for="(item, i) in itemCol.data" :key="index + i"
+              @click="selectBar(item, i, index)" :class="[
                 {
                   'layui-cascader-selected': itemCol.selectIndex === i,
                 },
-              ]"
-            >
-              <slot
-                :name="item.slot"
-                v-if="item.slot && slots[item.slot]"
-              ></slot>
+              ]">
+              <slot :name="item.slot" v-if="item.slot && slots[item.slot]"></slot>
               <template v-else>{{ item.label }}</template>
-              <i
-                class="layui-icon layui-icon-right"
-                v-if="item.children && item.children.length"
-              ></i>
+              <i class="layui-icon layui-icon-right" v-if="item.children && item.children.length"></i>
             </div>
           </lay-scroll>
         </template>
@@ -70,6 +46,7 @@ export interface LayCascaderProps {
   placeholder?: string;
   onlyLastLevel?: boolean;
   replaceFields?: { label: string; value: string; children: string };
+  allowClear?: boolean
 }
 const props = withDefaults(defineProps<LayCascaderProps>(), {
   options: null,
@@ -77,6 +54,7 @@ const props = withDefaults(defineProps<LayCascaderProps>(), {
   decollator: "/",
   placeholder: "",
   onlyLastLevel: false,
+  allowClear: false,
   replaceFields: () => {
     return {
       label: "label",
@@ -247,5 +225,24 @@ const selectBar = (item: any, selectIndex: number, parentIndex: number) => {
 
 const displayValue = ref<string | number | null>(null);
 const slots = useSlots();
-const dropdownRef = ref(null);
+const dropdownRef = ref();
+const dropDownDisabled = ref(false);
+
+//清除事件
+const onClear = () => {
+  dropDownDisabled.value=true;
+  let arr = JSON.parse(JSON.stringify(treeData.value));
+  for (let index = 0; index < arr.length; index++) {
+    arr[index].selectIndex = null;
+    if (index === 0) {
+      continue;
+    }
+    arr[index].data = [];
+  }
+  treeData.value = arr;
+  emit("update:modelValue", null);
+  setTimeout(() => {
+    dropDownDisabled.value=false;
+  }, 0);
+}
 </script>
diff --git a/package/document-component/src/document/zh-CN/components/cascader.md b/package/document-component/src/document/zh-CN/components/cascader.md
index 9e97aff8..0a0673a2 100644
--- a/package/document-component/src/document/zh-CN/components/cascader.md
+++ b/package/document-component/src/document/zh-CN/components/cascader.md
@@ -13,7 +13,7 @@
 ::: demo 使用 `lay-cascader` 标签创建级联选择器
 
 <template>
-  <lay-cascader :options="options" v-model="value" placeholder="点我试一试" style="width:250px">
+  <lay-cascader :options="options" v-model="value" placeholder="点我试一试" allow-clear style="width:250px">
   </lay-cascader>
   <span style="margin-left:20px">输出的值：{{value}}</span>
 </template>
@@ -297,7 +297,7 @@ const options = [
 :::
 ::: demo 使用 `decollator` 属性 自定义分割符号
 <template>
-  <lay-cascader :options="options" v-model="value1" decollator="-" placeholder="我可以自定义分割符号" style="width:250px"></lay-cascader>
+  <lay-cascader :options="options" v-model="value1" decollator="-" placeholder="我可以自定义分割符号" allow-clear style="width:250px"></lay-cascader>
   <span style="margin-left:20px">输出的值：{{value1}}</span>
 </template>
 
@@ -311,7 +311,7 @@ const value1=ref(null)
 :::
 ::: demo 使用 `onlyLastLevel` 属性 可以仅在回显的displayValue显示选中项最后一级的标签，而不是完整路径, 注意绑定的v-model仍然是完整的。
 <template>
-  <lay-cascader :options="options" v-model="valueLv" :onlyLastLevel="true" placeholder="仅显示最后一级" style="width:250px"></lay-cascader>
+  <lay-cascader :options="options" v-model="valueLv" :onlyLastLevel="true" allow-clear placeholder="仅显示最后一级" style="width:250px"></lay-cascader>
   <span style="margin-left:20px">输出的值：{{valueLv}}</span>
 </template>
 
@@ -698,6 +698,7 @@ const options3=[
 | options                  | 选项参数 格式请见上面的demo  |
 | onlyLastLevel            | 回显display仅显示最后一级，默认为 `false`  |
 | replaceFields            | 自定义数据key名,可配置项为`label`,`value`,`children`,用法详见上面案例  |
+| allow-clear              | 默认slot提供清空功能，与lay-input保持一致|
 :::
 
 ::: title Cascader 事件
diff --git a/package/document-component/src/document/zh-CN/guide/changelog.md b/package/document-component/src/document/zh-CN/guide/changelog.md
index 68f0860f..bb8b7374 100644
--- a/package/document-component/src/document/zh-CN/guide/changelog.md
+++ b/package/document-component/src/document/zh-CN/guide/changelog.md
@@ -23,6 +23,7 @@
           <li>[新增] textarea 组件 change 回调函数。by @Jmysy</li>
           <li>[新增] textarea 组件 clear 回调函数。by @Jmysy</li>
           <li>[新增] cascader 组件 replaceFields属性 用于自义定字段。by @SmallWai</li>
+          <li>[新增] cascader 组件 allow-clear属性 用于清空默认slot中的值。by @SmallWai</li>
           <li>[优化] cascader 组件 change 回调函数。 by @SmallWai</li>
           <li>[删除] input 组件 value 属性, 与 v-model 属性冲突。by @Jmysy</li>
         </ul>