From 51b93ba96f3b38fa2aeeb153590680c9b1d82129 Mon Sep 17 00:00:00 2001 From: sight <1453017105@qq.com> Date: Thu, 30 Jun 2022 12:13:26 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(component):=20[dropdown]menuItem=20?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=8F=92=E6=A7=BD,=E6=96=B0=E5=A2=9E=20subMe?= =?UTF-8?q?nu?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/component/dropdown/index.less | 15 +- .../src/component/dropdown/index.vue | 8 +- .../src/component/dropdownMenuItem/index.vue | 17 ++- .../src/component/dropdownSubMenu/index.ts | 5 + .../src/component/dropdownSubMenu/index.vue | 58 ++++++++ package/component/src/index.ts | 3 + .../src/document/zh-CN/components/dropdown.md | 139 ++++++++++++++++++ package/layer/src/component/Notifiy.vue | 37 ++--- package/layer/src/component/index.vue | 127 +++++++++++----- package/layer/src/index.ts | 22 +-- package/layer/src/utils/index.ts | 64 ++++---- 11 files changed, 395 insertions(+), 100 deletions(-) create mode 100644 package/component/src/component/dropdownSubMenu/index.ts create mode 100644 package/component/src/component/dropdownSubMenu/index.vue diff --git a/package/component/src/component/dropdown/index.less b/package/component/src/component/dropdown/index.less index 37e8fb39..68dfa6b9 100644 --- a/package/component/src/component/dropdown/index.less +++ b/package/component/src/component/dropdown/index.less @@ -34,6 +34,7 @@ .layui-dropdown .layui-menu li { position: relative; + display: flex; line-height: 26px; color: rgba(0, 0, 0, 0.8); font-size: 14px; @@ -46,7 +47,19 @@ } .layui-dropdown .layui-menu-body-title { - position: relative; + white-space: nowrap; overflow: hidden; text-overflow: ellipsis; +} + +.layui-dropdown-menu-prefix{ + margin-right: 8px; +} +.layui-dropdown-menu-suffix{ + margin-left: 15px; +} + +.layui-dropdown .layui-line-horizontal{ + margin: 0px; + border-color: #EEEEEE; } \ No newline at end of file diff --git a/package/component/src/component/dropdown/index.vue b/package/component/src/component/dropdown/index.vue index 8a4a8b5f..3a947ef0 100644 --- a/package/component/src/component/dropdown/index.vue +++ b/package/component/src/component/dropdown/index.vue @@ -387,11 +387,15 @@ const handleClick = () => { } }; -const handleContextMenuClick = () => { +const handleContextMenuClick = (e: Event) => { if (props.disabled || (openState.value && !props.clickToClose)) { return; } if (triggerMethods.value.includes("contextMenu")) { + e.preventDefault(); + if (props.alignPoint) { + hide(); + } toggle(); } }; @@ -511,7 +515,7 @@ defineExpose({ open, hide, toggle }); @focusout="handleFocusout()" :class="{ 'layui-dropdown-up': openState }" > -
+
{ diff --git a/package/component/src/component/dropdownSubMenu/index.ts b/package/component/src/component/dropdownSubMenu/index.ts new file mode 100644 index 00000000..bc751ebc --- /dev/null +++ b/package/component/src/component/dropdownSubMenu/index.ts @@ -0,0 +1,5 @@ +import { withInstall, WithInstallType } from "../../utils"; +import Component from "./index.vue"; + +const component: WithInstallType = withInstall(Component); +export default component; diff --git a/package/component/src/component/dropdownSubMenu/index.vue b/package/component/src/component/dropdownSubMenu/index.vue new file mode 100644 index 00000000..53ab2097 --- /dev/null +++ b/package/component/src/component/dropdownSubMenu/index.vue @@ -0,0 +1,58 @@ + + + + + diff --git a/package/component/src/index.ts b/package/component/src/index.ts index 065204b7..300b1b3a 100644 --- a/package/component/src/index.ts +++ b/package/component/src/index.ts @@ -57,6 +57,7 @@ import LayRate from "./component/rate/index"; import LayDropdown from "./component/dropdown/index"; import LayDropdownMenu from "./component/dropdownMenu/index"; import LayDropdownMenuItem from "./component/dropdownMenuItem/index"; +import LayDropdownSubMenu from "./component/dropdownSubMenu/index"; import LayTab from "./component/tab/index"; import LayTabItem from "./component/tabItem/index"; import LayTree from "./component/tree/index"; @@ -140,6 +141,7 @@ const components: Record = { LayDropdown, LayDropdownMenu, LayDropdownMenuItem, + LayDropdownSubMenu, LayTab, LayTabItem, LayIconPicker, @@ -232,6 +234,7 @@ export { LayDropdown, LayDropdownMenu, LayDropdownMenuItem, + LayDropdownSubMenu, LayTab, LayTabItem, LayIconPicker, diff --git a/package/document-component/src/document/zh-CN/components/dropdown.md b/package/document-component/src/document/zh-CN/components/dropdown.md index cb2fbec5..85296465 100644 --- a/package/document-component/src/document/zh-CN/components/dropdown.md +++ b/package/document-component/src/document/zh-CN/components/dropdown.md @@ -362,6 +362,104 @@ export default { ::: +::: title 菜单插槽 +::: + +::: demo + + + + + +::: + +::: title 多级菜单 +::: + +::: demo + + + + + +::: + ::: title 其它属性 ::: @@ -498,6 +596,47 @@ export default { ::: +::: title Dropdown Menu Item 插槽 +::: + +::: table + +| 插槽 | 描述 | 参数 | +| ------- | -------- | ------ | +| prefix | 前缀 | -- | +| default | 默认 | -- | +| suffix | 后缀|--| + +::: + +::: title Dropdown Sub Menu 属性 +::: + +::: table + +| 插槽 | 描述 | 参数 | +| ------- | -------- | ------ | +| trigger | 触发方式,类型 `string` 或 trigger 数组,默认 hover | `click` `hover` `focus` `contextMenu` | +| disabled | 是否禁用触发 | `true` `false` | +| placement | 下拉面板位置,默认 right-top |`top` `bottom` `right` `left` `*-left` `*-right` `*-top` `*-bottom`| +| contentOffset | 下拉面板距离触发器的偏移距离，默认 2| -| + +::: + +::: title Dropdown Sub Menu 插槽 +::: + +::: table + +| 插槽 | 描述 | 参数 | +| ------- | -------- | ------ | +| prefix | 前缀 | -- | +| default | 默认 | -- | +| suffix | 后缀|--| +| content | 下拉面板内容|--| + +::: + ::: contributor dropdown ::: diff --git a/package/layer/src/component/Notifiy.vue b/package/layer/src/component/Notifiy.vue index 7945af23..3bf8f629 100644 --- a/package/layer/src/component/Notifiy.vue +++ b/package/layer/src/component/Notifiy.vue @@ -17,43 +17,46 @@ export default { }; diff --git a/package/layer/src/component/index.vue b/package/layer/src/component/index.vue index 03bd600c..3f8baf8d 100644 --- a/package/layer/src/component/index.vue +++ b/package/layer/src/component/index.vue @@ -59,20 +59,20 @@ export interface LayModalProps { move?: boolean | string; resize?: boolean | string; type?: - | 0 - | 1 - | 2 - | 3 - | 4 - | 5 - | 6 - | "dialog" - | "page" - | "iframe" - | "loading" - | "drawer" - | "photos" - | "notifiy"; + | 0 + | 1 + | 2 + | 3 + | 4 + | 5 + | 6 + | "dialog" + | "page" + | "iframe" + | "loading" + | "drawer" + | "photos" + | "notifiy"; content?: string | Function | object | VNodeTypes; isHtmlFragment?: boolean; shade?: boolean | string; @@ -119,12 +119,12 @@ const props = withDefaults(defineProps(), { resize: false, isHtmlFragment: false, isOutAnim: true, - destroy: () => { }, - success: () => { }, - end: () => { }, - full: () => { }, - min: () => { }, - restore: () => { }, + destroy: () => {}, + success: () => {}, + end: () => {}, + full: () => {}, + min: () => {}, + restore: () => {}, yesText: "确定", isFunction: false, isMessage: false, @@ -187,7 +187,7 @@ const firstOpenDelayCalculation = function () { } offset.value = calculateOffset(props.offset, area.value, props.type); if (type == 6) { - offset.value = calculateNotifOffset(props.offset, area.value, id.value) + offset.value = calculateNotifOffset(props.offset, area.value, id.value); } w.value = area.value[0]; h.value = area.value[1]; @@ -441,8 +441,9 @@ const styles = computed(() => { offset.value[1].indexOf("%") > -1 ) { // @ts-ignore - style.transform = `translate(-${style.left.indexOf("%") > -1 ? style.left : 0 - },-${style.top.indexOf("%") > -1 ? style.top : 0})`; + style.transform = `translate(-${ + style.left.indexOf("%") > -1 ? style.left : 0 + },-${style.top.indexOf("%") > -1 ? style.top : 0})`; } } } @@ -469,14 +470,13 @@ const contentClasses = computed(() => { * @param null */ const closeHandle = () => { - emit("close"); emit("update:modelValue", false); props.destroy(); //Notify 从队列中移除当前实例 - if(type===6){ - removeNotifiyFromQueen(props.id) + if (type === 6) { + removeNotifiyFromQueen(props.id); } }; @@ -619,15 +619,33 @@ defineExpose({ reset, open, close }); - - + +
- - + + - + -
+
diff --git a/package/layer/src/index.ts b/package/layer/src/index.ts index ab309758..755ec979 100644 --- a/package/layer/src/index.ts +++ b/package/layer/src/index.ts @@ -140,14 +140,14 @@ const layer = { }, //通知 notifiy: (option: any = {}, callback?: Function) => { - option.anim = 5 - option.shade = false - option.type = 6 + option.anim = 5; + option.shade = false; + option.type = 6; let defaultOption = { - offset: 'rt', - time:2000, - area:'auto' - } + offset: "rt", + time: 2000, + area: "auto", + }; return layer.create(option, defaultOption, callback); }, // 创建弹出层 @@ -186,7 +186,11 @@ const layer = { // 调用 open 函数 modalInstance.component?.exposed?.open(); // 延时 time 销毁 - if (defaultOption && defaultOption.time != undefined && defaultOption.time != 0) { + if ( + defaultOption && + defaultOption.time != undefined && + defaultOption.time != 0 + ) { timer = setTimeout(() => { modalInstance.component?.exposed?.close(); if (callback) callback(modalContainer.id); @@ -200,7 +204,7 @@ const layer = { delInstance(modalContainer.id); //Notifiy特殊处理 if (options.type === 6) { - removeNotifiyFromQueen(options.id) + removeNotifiyFromQueen(options.id); } }, defaultOption.time); } diff --git a/package/layer/src/utils/index.ts b/package/layer/src/utils/index.ts index fe7c22b9..ad8bbd5a 100644 --- a/package/layer/src/utils/index.ts +++ b/package/layer/src/utils/index.ts @@ -286,7 +286,8 @@ export async function calculatePhotosArea(url: string, options: object) { // 计算Notify位置 队列 此处先暂时定义Notify的间距为15px export function calculateNotifOffset(offset: any, area: any, layerId: string) { let arr = ["lt", "lb", "rt", "rb"]; - let t = '0', l = '0'; + let t = "0", + l = "0"; // 间隙 let transOffsetLeft = 15; let transOffsetTop = 15; @@ -294,23 +295,25 @@ export function calculateNotifOffset(offset: any, area: any, layerId: string) { window.NotifiyQueen = window.NotifiyQueen || []; // @ts-ignore let notifiyQueen = window.NotifiyQueen; - if (typeof offset != 'string' || arr.indexOf(offset) === -1) { + if (typeof offset != "string" || arr.indexOf(offset) === -1) { offset = "rt"; } // 当前区域元素集合 - let nodeList = notifiyQueen.filter((e: { offset: any; }) => { + let nodeList = notifiyQueen.filter((e: { offset: any }) => { if (e.offset === offset) { - return e + return e; } - }) + }); //前一个元素 let prevNode = nodeList.length > 0 ? nodeList[nodeList.length - 1] : null; if (prevNode) { - prevNode = document.getElementById(prevNode['id'])?.firstElementChild?.firstElementChild; + prevNode = document.getElementById(prevNode["id"])?.firstElementChild + ?.firstElementChild; if (offset === "rt" || offset === "lt") { - transOffsetTop += prevNode.offsetHeight + parseFloat(prevNode.style['top']) + transOffsetTop += + prevNode.offsetHeight + parseFloat(prevNode.style["top"]); } else { - let bottom = parseFloat(prevNode.style['top'].split(' - ')[1]) + let bottom = parseFloat(prevNode.style["top"].split(" - ")[1]); transOffsetTop += prevNode.offsetHeight + bottom; } } else { @@ -324,20 +327,20 @@ export function calculateNotifOffset(offset: any, area: any, layerId: string) { t = transOffsetTop + "px"; l = "calc(100% - " + (parseFloat(area[0]) + transOffsetLeft) + "px)"; } else if (offset === "rb") { - t = "calc(100vh - " + transOffsetTop + "px)" + t = "calc(100vh - " + transOffsetTop + "px)"; l = "calc(100% - " + (parseFloat(area[0]) + transOffsetLeft) + "px)"; } else if (offset === "lt") { t = transOffsetTop + "px"; l = transOffsetLeft + "px"; } else if (offset === "lb") { - t = "calc(100vh - " + transOffsetTop + "px)" + t = "calc(100vh - " + transOffsetTop + "px)"; l = transOffsetLeft + "px"; } notifiyQueen.push({ id: layerId, - offset: offset - }) + offset: offset, + }); // 返回位置 return [t, l]; } @@ -347,33 +350,40 @@ export function removeNotifiyFromQueen(layerId: string | undefined) { // 间隙 let transOffsetTop = 15; // @ts-ignore 删除项的高度 - let offsetHeight = document.getElementById(layerId)?.firstElementChild?.firstElementChild?.offsetHeight; + let offsetHeight = + document.getElementById(layerId)?.firstElementChild?.firstElementChild + ?.offsetHeight; // @ts-ignore window.NotifiyQueen = window.NotifiyQueen || []; // @ts-ignore let notifiyQueen = window.NotifiyQueen; //console.log(notifiyQueen) - let index = notifiyQueen.findIndex((e: { id: string; }) => e.id === layerId) + let index = notifiyQueen.findIndex((e: { id: string }) => e.id === layerId); let offsetType = notifiyQueen[index].offset; - let list = notifiyQueen.filter((e: { offset: any; }) => { + let list = notifiyQueen.filter((e: { offset: any }) => { if (e.offset === offsetType) { return e; } - }) - let findIndex = list.findIndex((e: { id: string; }) => e.id === layerId) + }); + let findIndex = list.findIndex((e: { id: string }) => e.id === layerId); // //得到需要修改的定位的Notifiy集合 - let needCalculatelist = list.slice(findIndex + 1) - needCalculatelist.forEach((e: { id: string; }) => { - let dom = document.getElementById(e.id)?.firstElementChild?.firstElementChild - if (offsetType === 'rt' || offsetType === 'lt') { + let needCalculatelist = list.slice(findIndex + 1); + needCalculatelist.forEach((e: { id: string }) => { + let dom = document.getElementById(e.id)?.firstElementChild + ?.firstElementChild; + if (offsetType === "rt" || offsetType === "lt") { // @ts-ignore - dom.style['top'] = parseFloat(dom.style['top']) - transOffsetTop - offsetHeight + 'px' + dom.style["top"] = + parseFloat(dom.style["top"]) - transOffsetTop - offsetHeight + "px"; } else { // @ts-ignore - let bottom = parseFloat(dom.style['top'].split(' - ')[1]) - transOffsetTop - offsetHeight + let bottom = + parseFloat(dom.style["top"].split(" - ")[1]) - + transOffsetTop - + offsetHeight; // @ts-ignore - dom.style['top'] = "calc(100vh - " + bottom + "px)" + dom.style["top"] = "calc(100vh - " + bottom + "px)"; } - }) - notifiyQueen.splice(index, 1);//删除 -} \ No newline at end of file + }); + notifiyQueen.splice(index, 1); //删除 +}