✨(component): cascader组件特性更新,新增动态插槽用于自定内容

package/component/src/component/cascader/index.less

@@ -42,6 +42,6 @@
   background-color: var(--global-checked-color);
   color: white;
 }
-// .layui-cascader.layui-dropdown-up > dl {
+.layui-cascader-menu-item .layui-icon-right{
-//   min-width: unset;
+  margin-left: 10px;
-// }
+}

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

@@ -34,7 +34,11 @@
                 },
               ]"
             >
-              {{ item.label }}
+              <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"
@@ -153,6 +157,7 @@ function findData(orginData: any, level: number) {
       data.push({
         value: element.value,
         label: element.label,
+        slot: element.slot || false,
         children: element.children ?? false,
       });
     }

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

@@ -13,9 +13,9 @@
 ::: demo 使用 `lay-cascader` 标签创建级联选择器
 
 <template>
-  <lay-cascader :options="options" v-model="value" placeholder="点我试一试" style="width:250px"></lay-cascader>
+  <lay-cascader :options="options" v-model="value" placeholder="点我试一试" style="width:250px">
-  <br>
+  </lay-cascader>
-  <span>输出的值：{{value}}</span>
+  <span style="margin-left:20px">输出的值：{{value}}</span>
 </template>
 
 <script setup>
@@ -298,8 +298,7 @@ const options = [
 ::: demo 使用 `decollator` 属性 自定义分割符号
 <template>
   <lay-cascader :options="options" v-model="value1" decollator="-" placeholder="我可以自定义分割符号" style="width:250px"></lay-cascader>
-  <br>
+  <span style="margin-left:20px">输出的值：{{value1}}</span>
-  <span>输出的值：{{value1}}</span>
 </template>
 
 <script setup>
@@ -308,16 +307,30 @@ const value1=ref(null)
 </script>
 :::
 
+::: title 触发方式
+:::
+::: demo 本组弹出效果依托于DropDown组件，触发方式与其保持一致
+<template>
+  <lay-cascader :options="options"  placeholder="click触发(默认)" style="width:250px;margin-right:20px"></lay-cascader>
+  <lay-cascader :options="options"  placeholder="hover触发" style="width:250px;margin-right:20px" trigger="hover"></lay-cascader>
+  <lay-cascader :options="options"  placeholder="右键触发" style="width:250px" trigger="contextMenu"></lay-cascader>
+</template>
+:::
+
 
 ::: title Cascader 插槽
 :::
-::: demo 使用 `默认插槽` 可以自定义回显区域的内容,并且你可以通过change回调轻松拿到回显的值
+::: demo 使用 `默认插槽` 可以自定义回显区域的内容,并且你可以通过change回调轻松拿到回显的值，同时你也可以使用`动态插槽名`来自定义你想要展示的内容，只需要在传入的数据中加入 `slot`参数，然后愉快的使用插槽自定义内容
 <template>
   <lay-cascader :options="options" v-model="value2" @change="onChange">
      <lay-button type="normal">Click me ❤️</lay-button>
      <lay-badge theme="orange" v-if="displayValue" style="margin-left:10px">{{displayValue}}</lay-badge>
   </lay-cascader>
-  <br>
+  <lay-cascader :options="options2" v-model="value" placeholder="动态插槽案例" style="width:250px;margin-left:20px">
+    <template #Guide>🤨😐😑😶😏😒🙄😬🤥😌</template>
+    <template #Components>👋🤚🖐️✋🖖👌🤌🤏🤞🤟</template>
+    <template #Resource>📱📲📶📳📴☎📞📟📠🤳</template>
+  </lay-cascader>
 </template>
 
 <script setup>
@@ -327,6 +340,277 @@ const displayValue=ref(null)
 const onChange=(val)=>{
   displayValue.value=val
 }
+const options2 = [
+	{
+		value: "Guide",
+		label: "指南",
+        slot:"Guide",
+		children: [
+			{
+				value: "shejiyuanze",
+				label: "设计原则",
+				children: [
+					{
+						value: "yizhi",
+						label: "一致",
+					},
+					{
+						value: "fankui",
+						label: "反馈",
+					},
+					{
+						value: "xiaolv",
+						label: "效率",
+					},
+					{
+						value: "kekong",
+						label: "可控",
+					},
+				],
+			},
+			{
+				value: "daohang",
+				label: "导航",
+				children: [
+					{
+						value: "cexiangdaohang",
+						label: "侧向导航",
+					},
+					{
+						value: "dingbudaohang",
+						label: "顶部导航",
+					},
+				],
+			},
+		],
+	},
+	{
+		value: "Components",
+		label: "组件",
+        slot:"Components",
+		children: [
+			{
+				value: "basic",
+				label: "Basic",
+				children: [
+					{
+						value: "layout",
+						label: "Layout 布局",
+					},
+					{
+						value: "color",
+						label: "Color 色彩",
+					},
+					{
+						value: "typography",
+						label: "Typography 字体",
+					},
+					{
+						value: "icon",
+						label: "Icon 图标",
+					},
+					{
+						value: "button",
+						label: "Button 按钮",
+					},
+				],
+			},
+			{
+				value: "form",
+				label: "Form",
+				children: [
+					{
+						value: "radio",
+						label: "Radio 单选框",
+					},
+					{
+						value: "checkbox",
+						label: "Checkbox 多选框",
+					},
+					{
+						value: "input",
+						label: "Input 输入框",
+					},
+					{
+						value: "input-number",
+						label: "InputNumber 计数器",
+					},
+					{
+						value: "select",
+						label: "Select 选择器",
+					},
+					{
+						value: "cascader",
+						label: "Cascader 级联选择器",
+					},
+					{
+						value: "switch",
+						label: "Switch 开关",
+					},
+					{
+						value: "slider",
+						label: "Slider 滑块",
+					},
+					{
+						value: "time-picker",
+						label: "TimePicker 时间选择器",
+					},
+					{
+						value: "date-picker",
+						label: "DatePicker 日期选择器",
+					},
+					{
+						value: "datetime-picker",
+						label: "DateTimePicker 日期时间选择器",
+					},
+					{
+						value: "upload",
+						label: "Upload 上传",
+					},
+					{
+						value: "rate",
+						label: "Rate 评分",
+					},
+					{
+						value: "form",
+						label: "Form 表单",
+					},
+				],
+			},
+			{
+				value: "data",
+				label: "Data",
+				children: [
+					{
+						value: "table",
+						label: "Table 表格",
+					},
+					{
+						value: "tag",
+						label: "Tag 标签",
+					},
+					{
+						value: "progress",
+						label: "Progress 进度条",
+					},
+					{
+						value: "tree",
+						label: "Tree 树形控件",
+					},
+					{
+						value: "pagination",
+						label: "Pagination 分页",
+					},
+					{
+						value: "badge",
+						label: "Badge 标记",
+					},
+				],
+			},
+			{
+				value: "notice",
+				label: "Notice",
+				children: [
+					{
+						value: "alert",
+						label: "Alert 警告",
+					},
+					{
+						value: "loading",
+						label: "Loading 加载",
+					},
+					{
+						value: "message",
+						label: "Message 消息提示",
+					},
+					{
+						value: "message-box",
+						label: "MessageBox 弹框",
+					},
+					{
+						value: "notification",
+						label: "Notification 通知",
+					},
+				],
+			},
+			{
+				value: "navigation",
+				label: "Navigation",
+				children: [
+					{
+						value: "menu",
+						label: "NavMenu 导航菜单",
+					},
+					{
+						value: "tabs",
+						label: "Tabs 标签页",
+					},
+					{
+						value: "breadcrumb",
+						label: "Breadcrumb 面包屑",
+					},
+					{
+						value: "dropdown",
+						label: "Dropdown 下拉菜单",
+					},
+					{
+						value: "steps",
+						label: "Steps 步骤条",
+					},
+				],
+			},
+			{
+				value: "others",
+				label: "Others",
+				children: [
+					{
+						value: "dialog",
+						label: "Dialog 对话框",
+					},
+					{
+						value: "tooltip",
+						label: "Tooltip 文字提示",
+					},
+					{
+						value: "popover",
+						label: "Popover 弹出框",
+					},
+					{
+						value: "card",
+						label: "Card 卡片",
+					},
+					{
+						value: "carousel",
+						label: "Carousel 走马灯",
+					},
+					{
+						value: "collapse",
+						label: "Collapse 折叠面板",
+					},
+				],
+			},
+		],
+	},
+	{
+		value: "Resource",
+		label: "资源",
+        slot:"Resource",
+		children: [
+			{
+				value: "axure",
+				label: "Axure Components",
+			},
+			{
+				value: "sketch",
+				label: "Sketch Templates",
+			},
+			{
+				value: "jiaohu",
+				label: "组件交互文档",
+			},
+		],
+	},
+];
 </script>
 
 :::