就眠儀式
Gitee
commit
28d617ccc0
55
package/component/src/component/cascader/index.less
Normal file
55
package/component/src/component/cascader/index.less
Normal file
@ -0,0 +1,55 @@
|
||||
.layui-cascader {
|
||||
position: relative;
|
||||
}
|
||||
.layui-cascader .layui-icon-down {
|
||||
transition: all 0.3s ease-in-out;
|
||||
transform: rotate(0);
|
||||
}
|
||||
.layui-cascader-open .layui-icon-down {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.layui-cascader .layui-cascader-panel {
|
||||
position: absolute;
|
||||
margin-top: 2px;
|
||||
z-index: 899;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 2px 12px #0000001a;
|
||||
line-height: 26px;
|
||||
color: #000c;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
display: none;
|
||||
}
|
||||
.layui-cascader-menu {
|
||||
border-right: 1px solid var(--global-neutral-color-3);
|
||||
max-height: 360px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.layui-cascader-menu:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
.layui-cascader-menu-item {
|
||||
min-width: 130px;
|
||||
padding: 5px 15px;
|
||||
box-sizing: border-box;
|
||||
transition: all 0.1s ease-in-out;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-right: 9px;
|
||||
}
|
||||
.layui-cascader-menu-item:hover {
|
||||
background-color: var(--global-checked-color);
|
||||
color: white;
|
||||
}
|
||||
.layui-cascader-selected {
|
||||
background-color: var(--global-checked-color);
|
||||
color: white;
|
||||
}
|
||||
.layui-cascader-open .layui-cascader-panel {
|
||||
display: flex !important;
|
||||
}
|
||||
5
package/component/src/component/cascader/index.ts
Normal file
5
package/component/src/component/cascader/index.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import { withInstall, WithInstallType } from "../../utils";
|
||||
import Component from "./index.vue";
|
||||
|
||||
const component: WithInstallType<typeof Component> = withInstall(Component);
|
||||
export default component;
|
||||
213
package/component/src/component/cascader/index.vue
Normal file
213
package/component/src/component/cascader/index.vue
Normal file
@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<div
|
||||
class="layui-cascader"
|
||||
:class="[{ 'layui-cascader-open': open }]"
|
||||
ref="cascaderRef"
|
||||
>
|
||||
<div @click="open = !open">
|
||||
<lay-input
|
||||
v-model="displayValue"
|
||||
readonly
|
||||
suffix-icon="layui-icon-down"
|
||||
:placeholder="placeholder"
|
||||
v-if="!slots.default"
|
||||
></lay-input>
|
||||
<slot v-else></slot>
|
||||
</div>
|
||||
|
||||
<dl class="layui-cascader-panel layui-anim layui-anim-upbit">
|
||||
<template v-for="(itemCol, index) in treeData">
|
||||
<ul
|
||||
class="layui-cascader-menu"
|
||||
:key="'cascader-menu' + index"
|
||||
v-if="itemCol.data.length"
|
||||
>
|
||||
<li
|
||||
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,
|
||||
},
|
||||
]"
|
||||
>
|
||||
{{ item.label }}
|
||||
<i
|
||||
class="layui-icon layui-icon-right"
|
||||
v-if="item.children && item.children.length"
|
||||
></i>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</dl>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "LayCascader",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import "./index.less";
|
||||
import { ref, onMounted, watch, useSlots } from "vue";
|
||||
import { onClickOutside } from "@vueuse/core";
|
||||
export interface LayCascaderProps {
|
||||
options?: Array<any> | null;
|
||||
modelValue?: string;
|
||||
decollator?: string;
|
||||
placeholder?:string;
|
||||
}
|
||||
const props = withDefaults(defineProps<LayCascaderProps>(), {
|
||||
options: null,
|
||||
modelValue: "",
|
||||
decollator: "/",
|
||||
placeholder:''
|
||||
});
|
||||
const emit = defineEmits(["update:modelValue", "change", "clear"]);
|
||||
|
||||
onMounted(() => {
|
||||
initTreeData();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.options,
|
||||
() => {
|
||||
initTreeData();
|
||||
}
|
||||
);
|
||||
|
||||
const treeData = ref<any>([]);
|
||||
const initTreeData = () => {
|
||||
let treeLvNum = getMaxFloor(props.options);
|
||||
for (let index = 0; index < treeLvNum; index++) {
|
||||
if (index == 0) {
|
||||
treeData.value[0] = {
|
||||
selectIndex: null,
|
||||
data: findData(props.options, 1),
|
||||
};
|
||||
} else {
|
||||
treeData.value[index] = {
|
||||
selectIndex: null,
|
||||
data: [],
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
//数据回显
|
||||
if (props.modelValue) {
|
||||
try {
|
||||
let valueData = props.modelValue.split(props.decollator);
|
||||
let data: any[] = [];
|
||||
for (let index = 0; index < treeData.value.length; index++) {
|
||||
const element = treeData.value[index];
|
||||
const nowValue = valueData[index];
|
||||
for (let i = 0; i < element.length; i++) {
|
||||
const ele = element[i];
|
||||
if (nowValue === ele.value) {
|
||||
data.push(ele);
|
||||
element.selectIndex = i;
|
||||
}
|
||||
}
|
||||
}
|
||||
displayValue.value = data
|
||||
.map((e) => {
|
||||
return e.label;
|
||||
})
|
||||
.join(` ${props.decollator} `);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function getMaxFloor(treeData: any) {
|
||||
let floor = 0;
|
||||
let max = 0;
|
||||
function each(data: any, floor: any) {
|
||||
data.forEach((e: any) => {
|
||||
e.floor = floor;
|
||||
if (floor > max) {
|
||||
max = floor;
|
||||
}
|
||||
if (e.children && e.children.length > 0) {
|
||||
each(e.children, floor + 1);
|
||||
}
|
||||
});
|
||||
}
|
||||
each(treeData, 1);
|
||||
return max;
|
||||
}
|
||||
function findData(orginData: any, level: number) {
|
||||
let data: any[] = [];
|
||||
for (let i = 0; i < orginData.length; i++) {
|
||||
const element = orginData[i];
|
||||
if (level === 1) {
|
||||
data.push({
|
||||
value: element.value,
|
||||
label: element.label,
|
||||
children: element.children ?? false,
|
||||
});
|
||||
}
|
||||
|
||||
if (level !== 1 && element.children && element.children.length > 0) {
|
||||
findData(element.children, level - 1);
|
||||
}
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
const dataContainer = ref<any>([]);
|
||||
const selectBar = (item: any, selectIndex: number, parentIndex: number) => {
|
||||
treeData.value[parentIndex].selectIndex = selectIndex;
|
||||
if (item.children) {
|
||||
treeData.value[parentIndex + 1].selectIndex = null;
|
||||
treeData.value[parentIndex + 1].data = findData(item.children, 1);
|
||||
}
|
||||
//把数组里后面的数据清空
|
||||
let nextIndex = parentIndex + 2;
|
||||
for (let index = nextIndex; index < treeData.value.length; index++) {
|
||||
treeData.value[index].selectIndex = null;
|
||||
treeData.value[index].data = [];
|
||||
}
|
||||
|
||||
if (!item.children) {
|
||||
//输入框数据更新
|
||||
let data: never[] = [];
|
||||
function extractData(orginData: any, dataContainer: any, index: number) {
|
||||
const element = orginData[index].data;
|
||||
const selectIndex = orginData[index].selectIndex;
|
||||
const selectData = element[selectIndex];
|
||||
dataContainer.push(selectData);
|
||||
if (selectData.children && selectData.children.length > 0) {
|
||||
extractData(orginData, dataContainer, index + 1);
|
||||
}
|
||||
}
|
||||
extractData(treeData.value, data, 0);
|
||||
displayValue.value = data
|
||||
.map((e: any) => {
|
||||
return e.label;
|
||||
})
|
||||
.join(` ${props.decollator} `);
|
||||
let value = data
|
||||
.map((e: any) => {
|
||||
return e.value;
|
||||
})
|
||||
.join(props.decollator);
|
||||
emit("update:modelValue", value);
|
||||
emit("change", displayValue.value);
|
||||
open.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const open = ref<boolean>(false);
|
||||
const displayValue = ref<string | number | null>(null);
|
||||
const slots = useSlots();
|
||||
const cascaderRef = ref<null | HTMLElement>();
|
||||
onClickOutside(cascaderRef, () => {
|
||||
open.value = false;
|
||||
});
|
||||
</script>
|
||||
@ -85,6 +85,7 @@ import LayUpload from "./component/upload/index";
|
||||
import LayRipple from "./component/ripple/index";
|
||||
import LayNoticeBar from "./component/noticeBar/index";
|
||||
import LayPageHeader from "./component/pageHeader/index";
|
||||
import LayCascader from "./component/cascader/index";
|
||||
import LayConfigProvider from "./provider";
|
||||
import { InstallOptions } from "./types";
|
||||
|
||||
@ -168,6 +169,7 @@ const components: Record<string, Plugin> = {
|
||||
LayRipple,
|
||||
LayNoticeBar,
|
||||
LayPageHeader,
|
||||
LayCascader,
|
||||
};
|
||||
|
||||
const install = (app: App, options?: InstallOptions): void => {
|
||||
@ -258,6 +260,7 @@ export {
|
||||
LayRipple,
|
||||
LayNoticeBar,
|
||||
LayPageHeader,
|
||||
LayCascader,
|
||||
install,
|
||||
};
|
||||
|
||||
|
||||
360
package/document/src/document/zh-CN/components/cascader.md
Normal file
360
package/document/src/document/zh-CN/components/cascader.md
Normal file
@ -0,0 +1,360 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 将数据按照指定的格式传入后分层分级，通过此组件逐级查看并选择。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-cascader` 标签创建级联选择器
|
||||
|
||||
<template>
|
||||
<lay-cascader :options="options" v-model="value" placeholder="点我试一试"></lay-cascader>
|
||||
<br>
|
||||
<span>输出的值：{{value}}</span>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
const value=ref(null)
|
||||
const options = [
|
||||
{
|
||||
value: "Guide",
|
||||
label: "指南",
|
||||
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: "组件",
|
||||
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: "资源",
|
||||
children: [
|
||||
{
|
||||
value: "axure",
|
||||
label: "Axure Components",
|
||||
},
|
||||
{
|
||||
value: "sketch",
|
||||
label: "Sketch Templates",
|
||||
},
|
||||
{
|
||||
value: "jiaohu",
|
||||
label: "组件交互文档",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 自定义分割符号
|
||||
:::
|
||||
::: demo 使用 `decollator` 属性 自定义分割符号
|
||||
<template>
|
||||
<lay-cascader :options="options" v-model="value1" decollator="-" placeholder="我可以自定义分割符号"></lay-cascader>
|
||||
<br>
|
||||
<span>输出的值：{{value1}}</span>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
const value1=ref(null)
|
||||
</script>
|
||||
:::
|
||||
|
||||
|
||||
::: title Cascader 插槽
|
||||
:::
|
||||
::: demo 使用 `默认插槽` 可以自定义回显区域的内容,并且你可以通过change回调轻松拿到回显的值
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
const value2=ref(null)
|
||||
const displayValue=ref(null)
|
||||
const onChange=(val)=>{
|
||||
displayValue.value=val
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Cascader 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 |
|
||||
| ----------------------- | -------------------- |
|
||||
| placeholder | 提示信息 |
|
||||
| v-model / modelValue | 值 |
|
||||
| decollator | 分割符号，默认为 / |
|
||||
| options | 选项参数 格式请见上面的demo |
|
||||
|
||||
:::
|
||||
|
||||
::: title Cascader 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 |
|
||||
| ---- | ------------ |
|
||||
| change | 选中后数据改变的回调 |
|
||||
|
||||
:::
|
||||
|
||||
::: previousNext cascader
|
||||
:::
|
||||
@ -238,5 +238,5 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: previousNext transfer
|
||||
::: previousNext datePicker
|
||||
:::
|
||||
@ -399,6 +399,11 @@ const zhCN = [
|
||||
import("../document/zh-CN/components/pageHeader.md"),
|
||||
meta: { title: "页头" },
|
||||
},
|
||||
{
|
||||
path: "/zh-CN/components/Cascader",
|
||||
component: () =>import("../document/zh-CN/components/cascader.md"),
|
||||
meta: { title: "级联选择器" },
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
@ -189,6 +189,12 @@ const menus = [
|
||||
subTitle: "datePicker",
|
||||
path: "/zh-CN/components/datePicker",
|
||||
},
|
||||
{
|
||||
id: 40,
|
||||
title: "级联选择器",
|
||||
subTitle: "cascader",
|
||||
path: "/zh-CN/components/cascader",
|
||||
},
|
||||
{
|
||||
id: 40,
|
||||
title: "文件上传",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user