就眠儀式
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 LayRipple from "./component/ripple/index";
|
||||||
import LayNoticeBar from "./component/noticeBar/index";
|
import LayNoticeBar from "./component/noticeBar/index";
|
||||||
import LayPageHeader from "./component/pageHeader/index";
|
import LayPageHeader from "./component/pageHeader/index";
|
||||||
|
import LayCascader from "./component/cascader/index";
|
||||||
import LayConfigProvider from "./provider";
|
import LayConfigProvider from "./provider";
|
||||||
import { InstallOptions } from "./types";
|
import { InstallOptions } from "./types";
|
||||||
|
|
||||||
@ -168,6 +169,7 @@ const components: Record<string, Plugin> = {
|
|||||||
LayRipple,
|
LayRipple,
|
||||||
LayNoticeBar,
|
LayNoticeBar,
|
||||||
LayPageHeader,
|
LayPageHeader,
|
||||||
|
LayCascader,
|
||||||
};
|
};
|
||||||
|
|
||||||
const install = (app: App, options?: InstallOptions): void => {
|
const install = (app: App, options?: InstallOptions): void => {
|
||||||
@ -258,6 +260,7 @@ export {
|
|||||||
LayRipple,
|
LayRipple,
|
||||||
LayNoticeBar,
|
LayNoticeBar,
|
||||||
LayPageHeader,
|
LayPageHeader,
|
||||||
|
LayCascader,
|
||||||
install,
|
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"),
|
import("../document/zh-CN/components/pageHeader.md"),
|
||||||
meta: { title: "页头" },
|
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",
|
subTitle: "datePicker",
|
||||||
path: "/zh-CN/components/datePicker",
|
path: "/zh-CN/components/datePicker",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: 40,
|
||||||
|
title: "级联选择器",
|
||||||
|
subTitle: "cascader",
|
||||||
|
path: "/zh-CN/components/cascader",
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: 40,
|
id: 40,
|
||||||
title: "文件上传",
|
title: "文件上传",
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user