diff --git a/packages/quarkd/src/popup/demo.scss b/packages/quarkd/src/popup/demo.scss index 4e54ad24..cd583944 100644 --- a/packages/quarkd/src/popup/demo.scss +++ b/packages/quarkd/src/popup/demo.scss @@ -8,3 +8,18 @@ margin-bottom: 24px; } } + +.fix-content { + line-height: 50px; + display: flex; + justify-content: center; +} +.scroll-list { + max-height: 60vh; + overflow: auto; + div { + width: 240px; + display: flex; + justify-content: center; + } +} diff --git a/packages/quarkd/src/popup/demo.vue b/packages/quarkd/src/popup/demo.vue index c5dad136..31cdfea1 100644 --- a/packages/quarkd/src/popup/demo.vue +++ b/packages/quarkd/src/popup/demo.vue @@ -32,7 +32,14 @@ @click="showCenterPopup" :title="translate('centerPopup')" > + + {{ translate("fifthLine") }}
{{ translate("sixthLine") }}
 - + +
{{ translate("firstLine") }}
{{ translate("secondLine") }}
{{ translate("thirdLine") }}
 + + +
Fixable content
+
+
+ {{ item }} +
+
+ +

{{ translate("style") }}

{ useTranslate({ "zh-CN": { @@ -172,6 +192,7 @@ export default createDemo({ leftPopup: "左侧弹框", rightPopup: "右侧弹窗", centerPopup: "居中显示", + scrollPopup: "可滚动区域", firstLine: "第一行", secondLine: "第二行", thirdLine: "第三行", @@ -191,6 +212,7 @@ export default createDemo({ leftPopup: "Left Popup", rightPopup: "Right Popup", centerPopup: "Center Popup", + scrollPopup: "Scrollable Area", firstLine: "First Line", secondLine: "Second Line", thirdLine: "Third Line", @@ -235,6 +257,7 @@ export default createDemo({ const closeTopPopup = () => { openTop.value = false; }; + const closedTopPopup = () => { console.log("closedTopPopup"); }; @@ -265,6 +288,8 @@ export default createDemo({ return { openCenter, openTop, + openScroll, + openBottom, openLeft, openRight, diff --git a/packages/quarkd/src/popup/doc-react.en-US.md b/packages/quarkd/src/popup/doc-react.en-US.md index 56c2e51a..8a21ac77 100644 --- a/packages/quarkd/src/popup/doc-react.en-US.md +++ b/packages/quarkd/src/popup/doc-react.en-US.md @@ -40,7 +40,7 @@ export default () => { Use position prop to set popup display position.By default, the popup is centered and can be set to top, bottom, left, right. ```html - + ``` ### Close Icon @@ -48,7 +48,7 @@ Use position prop to set popup display position.By default, the popup is centere After setting the closeable property, the close icon will be displayed in the upper right corner of the popup layer. ```html - + ``` ### Forbid mask click @@ -56,7 +56,7 @@ After setting the closeable property, the close icon will be displayed in the up forbid mask click ```html - + ``` ### Round Corner @@ -64,7 +64,28 @@ forbid mask click After setting the round property, the popup window will add different rounded corner styles according to the popup position. ```html - + +``` + +### 内部滚动设置 + +You can specify the element that needs to scroll by setting the `scrollid`. + +```jsx + +
Fixable content
+ {/* The following elements can scroll */} +
+ {new Array(100).fill(1).map((item) => ( +
{{ item }}
+ ))} +
+ ``` ## API diff --git a/packages/quarkd/src/popup/doc-react.zh-CN.md b/packages/quarkd/src/popup/doc-react.zh-CN.md index 1901c8ef..f525e10f 100644 --- a/packages/quarkd/src/popup/doc-react.zh-CN.md +++ b/packages/quarkd/src/popup/doc-react.zh-CN.md @@ -39,7 +39,7 @@ export default () => { 通过 position 属性设置弹出位置，默认居中弹出，可以设置为 top、bottom、left、right。 ```html - + ``` ### 关闭图标 @@ -47,7 +47,7 @@ export default () => { 设置 closeable 属性后，会在弹出层的右上角显示关闭图标。 ```html - + ``` ### 禁止遮罩层点击 @@ -55,7 +55,7 @@ export default () => { 设置 forbidmaskclick 属性后，点击遮罩层将无法自动关闭弹层。 ```html - + ``` ### 圆角弹窗 @@ -63,7 +63,28 @@ export default () => { 设置 round 属性后，弹窗会根据弹出位置添加不同的圆角样式。 ```html - + +``` + +### 内部滚动设置 + +通过 `scrollid` 设置指定需要滚动的元素即可。 + +```jsx + +
Fixable content
+ {/* 以下元素可实现滚动 */} +
+ {new Array(100).fill(1).map((item) => ( +
{{ item }}
+ ))} +
+ ``` ## API diff --git a/packages/quarkd/src/popup/doc.en-US.md b/packages/quarkd/src/popup/doc.en-US.md index 3a52abf6..673139b8 100644 --- a/packages/quarkd/src/popup/doc.en-US.md +++ b/packages/quarkd/src/popup/doc.en-US.md @@ -1,10 +1,10 @@ # Popup -### Intro +### Introduction -Pop-up windows +Popup layer -### Install +### Installation ```tsx import "quarkd/lib/popup"; @@ -12,41 +12,21 @@ import "quarkd/lib/popup"; ### Basic Usage -```html - -
First Line
-
Second Line
-
Third Line
-
Forth Line
-
Fifth Line
-
Six Line
+```jsx + +
First line
+
Second line
 -
Show Popup
-``` -```js - +
Trigger Popup display
``` -### Position +### Popup Position -Use position prop to set popup display position.By default, the popup is centered and can be set to top, bottom, left, right. +Set the popup position through the position attribute. The default is centered. It can be set to top, bottom, left, or right. ```html @@ -76,6 +56,27 @@ After setting the round property, the popup window will add different rounded co ``` +### Internal Scroll Setting + +You can specify the element that needs to scroll by setting the `scrollid`. + +```html + +
Fixable content
+ +
+
+ {{ item }} +
+
+ +``` + ## API ### Props diff --git a/packages/quarkd/src/popup/doc.zh-CN.md b/packages/quarkd/src/popup/doc.zh-CN.md index a2be9a9e..467795fd 100644 --- a/packages/quarkd/src/popup/doc.zh-CN.md +++ b/packages/quarkd/src/popup/doc.zh-CN.md @@ -12,33 +12,16 @@ import "quarkd/lib/popup"; ### 基本使用 -```html - -
第一xxxxxxxxxxxxxxxxx行
-
第二xxxxxxxxxxxxxxxxx行
+```jsx + +
第一行
+
第二行
 -
触发Popup显示
-``` -```js - +
触发Popup显示
``` ### 弹窗位置 @@ -73,6 +56,27 @@ export default { ``` +### 内部滚动设置 + +通过 `scrollid` 设置指定需要滚动的元素即可。 + +```html + +
Fixable content
+ +
+
+ {{ item }} +
+
+ +``` + ## API ### Props diff --git a/packages/quarkd/src/popup/index.tsx b/packages/quarkd/src/popup/index.tsx index bc178000..50b4c0da 100644 --- a/packages/quarkd/src/popup/index.tsx +++ b/packages/quarkd/src/popup/index.tsx @@ -12,6 +12,7 @@ import { } from "quarkc"; import "@quarkd/icons/lib/close"; import style from "./style.css"; + export interface Props { position?: "top" | "bottom" | "left" | "right"; round?: boolean; @@ -21,47 +22,27 @@ export interface Props { safearea?: boolean; zindex?: number; } + export interface CustomEvent { clickoverlay: () => void; close: () => void; closed: () => void; opened: () => void; } + @customElement({ tag: "quark-popup", style, }) class QuarkPopup extends QuarkElement { - @property({ - type: Boolean, - }) - open = false; - - @property({ - type: Boolean, - }) - forbidmaskclick = false; - - @property({ - type: Boolean, - }) - safearea = false; - - @property({ - type: Boolean, - }) - round = false; - - @property({ - type: Boolean, - }) - closeable = false; - - @property() - position = "bottom"; - - @property() - zindex?: number | string = undefined; + @property({ type: Boolean }) open = false; + @property({ type: Boolean }) forbidmaskclick = false; + @property({ type: Boolean }) safearea = false; + @property({ type: Boolean }) round = false; + @property({ type: Boolean }) closeable = false; + @property() position = "bottom"; + @property() zindex?: number | string = undefined; + @property() scrollid?: string = undefined; wrap: any = createRef(); @@ -78,28 +59,25 @@ class QuarkPopup extends QuarkElement { ): boolean { if (propName === "open" && this.wrap && this.wrap.current) { const { current } = this.wrap; - // 设置退出过渡动画 - if (newValue) { - // 由关闭到打开 - current.classList.remove("leave"); - } else if (oldValue && !newValue) { - // 由打开到关闭 - current.classList.add("leave"); - } + current.classList.toggle("leave", !newValue && oldValue); } return true; } componentDidUpdate(propName: string, oldValue: string, newValue: string) { if (propName === "open" && this.wrap && this.wrap.current) { - const { current } = this.wrap; - if (newValue) { - disableBodyScroll(current); - this.dispatchEvent(new CustomEvent("opened")); - } else { - enableBodyScroll(current); - this.dispatchEvent(new CustomEvent("closed")); - } + const scrollElement = this.scrollid + ? document.querySelector(`#${this.scrollid}`) + : this.wrap.current; + + const toggleBodyScroll = (shouldDisable: boolean) => { + shouldDisable + ? disableBodyScroll(scrollElement) + : enableBodyScroll(scrollElement); + }; + + toggleBodyScroll(!!newValue); + this.dispatchEvent(new CustomEvent(newValue ? "opened" : "closed")); } } @@ -108,8 +86,6 @@ class QuarkPopup extends QuarkElement { } dispatchClose() { - // this.open = false; - // 标签调用触发 this.dispatchEvent(new CustomEvent("close")); } @@ -119,10 +95,9 @@ class QuarkPopup extends QuarkElement { handleClick = () => { this.dispatchEvent(new CustomEvent("clickoverlay")); - if (this.forbidmaskclick) { - return; + if (!this.forbidmaskclick) { + this.dispatchClose(); } - this.dispatchClose(); }; render() {