Merge branch 'next' of https://gitee.com/layui/layui-vue into next

package/component/src/component/cascader/index.vue

@@ -1,48 +1,23 @@
 <template>
-  <lay-dropdown
+  <lay-dropdown class="layui-cascader" ref="dropdownRef" :autoFitMinWidth="false" :updateAtScroll="true">
-    class="layui-cascader"
+    <lay-input v-model="displayValue" readonly suffix-icon="layui-icon-down" :placeholder="placeholder"
-    ref="dropdownRef"
+      v-if="!slots.default"></lay-input>
-    :autoFitMinWidth="false"
-    :updateAtScroll="true"
-  >
-    <lay-input
-      v-model="displayValue"
-      readonly
-      suffix-icon="layui-icon-down"
-      :placeholder="placeholder"
-      v-if="!slots.default"
-    ></lay-input>
     <slot v-else></slot>
 
     <template #content>
       <div class="layui-cascader-panel">
         <template v-for="(itemCol, index) in treeData">
-          <lay-scroll
+          <lay-scroll height="180px" class="layui-cascader-menu" :key="'cascader-menu' + index"
-            height="180px"
+            v-if="itemCol.data.length">
-            class="layui-cascader-menu"
+            <div class="layui-cascader-menu-item" v-for="(item, i) in itemCol.data" :key="index + i"
-            :key="'cascader-menu' + index"
+              @click="selectBar(item, i, index)" :class="[
-            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
+              <i class="layui-icon layui-icon-right" v-if="item.children && item.children.length"></i>
-                class="layui-icon layui-icon-right"
-                v-if="item.children && item.children.length"
-              ></i>
             </div>
           </lay-scroll>
         </template>
@@ -69,6 +44,7 @@ export interface LayCascaderProps {
   decollator?: string;
   placeholder?: string;
   onlyLastLevel?: boolean;
+  replaceFields?: { label: string, value: string, children: string }
 }
 const props = withDefaults(defineProps<LayCascaderProps>(), {
   options: null,
@@ -76,6 +52,13 @@ const props = withDefaults(defineProps<LayCascaderProps>(), {
   decollator: "/",
   placeholder: "",
   onlyLastLevel: false,
+  replaceFields: () => {
+    return {
+      label: 'label',
+      value: 'value',
+      children: 'children'
+    }
+  }
 });
 const emit = defineEmits(["update:modelValue", "change", "clear"]);
 
@@ -135,16 +118,16 @@ const initTreeData = () => {
 };
 
 function getMaxFloor(treeData: any) {
-  let floor = 0;
+  //let floor = 0;
   let max = 0;
   function each(data: any, floor: any) {
     data.forEach((e: any) => {
-      e.floor = floor;
+      //e.layFloor = floor;
       if (floor > max) {
         max = floor;
       }
-      if (e.children && e.children.length > 0) {
+      if (e[props.replaceFields.children] && e[props.replaceFields.children].length > 0) {
-        each(e.children, floor + 1);
+        each(e[props.replaceFields.children], floor + 1);
       }
     });
   }
@@ -157,15 +140,16 @@ function findData(orginData: any, level: number) {
     const element = orginData[i];
     if (level === 1) {
       data.push({
-        value: element.value,
+        value: element[props.replaceFields.value],
-        label: element.label,
+        label: element[props.replaceFields.label],
         slot: element.slot || false,
-        children: element.children ?? false,
+        children: element[props.replaceFields.children] ?? false,
+        orginData: element
       });
     }
 
-    if (level !== 1 && element.children && element.children.length > 0) {
+    if (level !== 1 && element[props.replaceFields.children] && element[props.replaceFields.children].length > 0) {
-      findData(element.children, level - 1);
+      findData(element[props.replaceFields.children], level - 1);
     }
   }
   return data;
@@ -197,25 +181,24 @@ const selectBar = (item: any, selectIndex: number, parentIndex: number) => {
       }
     }
     extractData(treeData.value, data, 0);
+    let fullLable = data.map((e: any) => { return e.label; }).join(` ${props.decollator} `);
     if (!props.onlyLastLevel) {
-      displayValue.value = data
+      displayValue.value = fullLable
-        .map((e: any) => {
-          return e.label;
-        })
-        .join(` ${props.decollator} `);
     } else {
       let _data = data.map((e: any) => {
         return e.label;
       });
       displayValue.value = _data[_data.length - 1];
     }
-    let value = data
+    let value = data.map((e: any) => { return e.value; }).join(props.decollator);
-      .map((e: any) => {
-        return e.value;
-      })
-      .join(props.decollator);
     emit("update:modelValue", value);
-    emit("change", displayValue.value);
+    let evt = {
+      display: displayValue.value,
+      value: value,
+      label: fullLable,
+      currentClick: JSON.parse(JSON.stringify(item.orginData))
+    }
+    emit("change", evt);
     if (dropdownRef.value)
       // @ts-ignore
       dropdownRef.value.hide();

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

@@ -300,6 +300,7 @@ const options = [
   <lay-cascader :options="options" v-model="value1" decollator="-" placeholder="我可以自定义分割符号" style="width:250px"></lay-cascader>
   <span style="margin-left:20px">输出的值：{{value1}}</span>
 </template>
+
 <script setup>
 import { ref } from "vue";
 const value1=ref(null)
@@ -350,8 +351,8 @@ const valueLv=ref(null)
 import { ref } from "vue";
 const value2=ref(null)
 const displayValue=ref(null)
-const onChange=(val)=>{
+const onChange=(evt)=>{
-  displayValue.value=val
+  displayValue.value=evt.display
 }
 const options2 = [
 	{
@@ -628,6 +629,62 @@ const options2 = [
 
 :::
 
+::: title Cascader 自定义字段名
+:::
+::: demo 也许你当前数据键名并不是`label`、`value`、`children`,这时只需要使用replaceFields属性来自定义key
+<template>
+  <lay-cascader :options="options3" :replaceFields="replaceFields" placeholder="自义定key"></lay-cascader>
+</template>
+
+<script setup>
+import { ref } from "vue";
+const replaceFields={
+  label:'name',
+  value:'id',
+  children:'group'
+}
+const options3=[
+  {
+    name:"张三",
+    id:1,
+    group:[
+      {
+        name:"张三-1",
+        id:2
+      },
+      {
+        name:"张三-2",
+        id:3
+      },
+      {
+        name:"张三-3",
+        id:4
+      }
+    ]
+  },
+  {
+    name:"李四",
+    id:5,
+    group:[
+      {
+        name:"李四-1",
+        id:6
+      },
+      {
+        name:"李四-2",
+        id:7
+      },
+      {
+        name:"李四-3",
+        id:8
+      }
+    ]
+  }
+]
+</script>
+
+:::
+
 ::: title Cascader 属性
 :::
 
@@ -639,7 +696,8 @@ const options2 = [
 | v-model / modelValue     | 值                   | 
 | decollator               | 分割符号，默认为 /     |
 | options                  | 选项参数 格式请见上面的demo  |
-| onlyLastLevel            | 回显displayValue仅显示最后一级，默认为 `false`  |
+| onlyLastLevel            | 回显display仅显示最后一级，默认为 `false`  |
+| replaceFields            | 自定义数据key名,可配置项为`label`,`value`,`children`,用法详见上面案例  |
 :::
 
 ::: title Cascader 事件
@@ -647,9 +705,9 @@ const options2 = [
 
 ::: table
 
-| 方法名 | 描述         |
+| 方法名 | 描述         |用法|
-| ---- | ------------ |
+| ---- | ------------ |--------|
-| change | 选中后数据改变的回调 |
+| change | 选中后数据改变的回调 |onChange( evt ){ <br>	&nbsp;	&nbsp;/* evt.display<br>	&nbsp;	&nbsp;/* evt.value,<br>	&nbsp;	&nbsp;/* evt.label<br>	&nbsp;	&nbsp;/* evt.currentClick<br>}|
 
 :::
 

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

@@ -11,6 +11,17 @@
 <template>
 <lay-timeline>
   <lay-timeline-item title="1.2.x">
+      <ul> 
+      <a name="1-2-8"></a> 
+      <li> 
+        <h3>1.2.8 <span class="layui-badge-rim">2022-07-08</span></h3> 
+        <ul>
+          <li>[修复] layer 组件 Notify 关闭图标样式问题。 by @SmallWai</li>
+          <li>[优化] cascader 组件 优化change回调参数 by @SmallWai</li>
+          <li>[新增] cascader 组件 新增replaceFields属性 用于自义定key by @SmallWai</li>
+        </ul>
+      </li>
+    </ul>
     <ul> 
       <a name="1-2-7"></a> 
       <li> 

package/layer/src/theme/index.css

@@ -1256,17 +1256,17 @@ html #layuicss-layer {
 .layer-notifiy .content img{
   max-width: 100%;
 }
-.layer-notifiy .layui-layer-close1 {
+.layer-notifiy .layui-layer-close {
   background-position: 1px -40px;
   cursor: pointer;
-  width: 15px;
+  width: 16px;
-  height: 15px;
+  height: 16px;
   position: absolute;
   top: 10px;
   right: 10px;
 }
 
-.layer-notifiy .layui-layer-close1:hover {
+.layer-notifiy .layui-layer-close:hover {
   opacity: 0.7;
 }
 .layui-layer-notify{