feat: add-scroll-area-for-popup (#346)

hellof2e · Sep 4, 2024 · dd4d4cc · dd4d4cc
1 parent 78c674c
commit dd4d4cc
Show file tree

Hide file tree

Showing 7 changed files with 185 additions and 123 deletions.
diff --git 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
@@ -32,7 +32,14 @@
         @click="showCenterPopup"
         :title="translate('centerPopup')"
       ></quark-cell>
+      <quark-cell
+        islink
+        type="primary"
+        @click="openScroll = true"
+        :title="translate('scrollPopup')"
+      ></quark-cell>
     </quark-cell-group>
+
     <quark-popup
       id="popup-top"
       position="top"
@@ -87,16 +94,27 @@
       <div>{{ translate("fifthLine") }}</div>
       <div>{{ translate("sixthLine") }}</div>
     </quark-popup>
-    <quark-popup
-      id="popup-center"
-      position="center"
-      :open="openCenter"
-      @close="closeCenterPopup"
-    >
+
+    <quark-popup position="center" :open="openCenter" @close="closeCenterPopup">
       <div>{{ translate("firstLine") }}</div>
       <div>{{ translate("secondLine") }}</div>
       <div>{{ translate("thirdLine") }}</div>
     </quark-popup>
+
+    <quark-popup
+      position="center"
+      :open="openScroll"
+      @close="openScroll = false"
+      scrollid="scroll-it"
+    >
+      <div class="fix-content">Fixable content</div>
+      <div id="scroll-it" class="scroll-list">
+        <div v-for="item in 100" :key="item">
+          {{ item }}
+        </div>
+      </div>
+    </quark-popup>
+
     <h2>{{ translate("style") }}</h2>
     <quark-cell-group>
       <quark-cell
@@ -163,6 +181,8 @@ export default createDemo({
     const openRight = ref(false);
     const openRound = ref(false);
     const openCloseable = ref(false);
+    const openScroll = ref(false);
+
     onBeforeMount(() => {
       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
@@ -40,31 +40,52 @@ 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
-<Popup position="top" :open="open" />
+<Popup position="top" open="{open}" />
 ```
 
 ### Close Icon
 
 After setting the closeable property, the close icon will be displayed in the upper right corner of the popup layer.
 
 ```html
-<Popup position="bottom" :open="open" closeable />
+<Popup position="bottom" open="{open}" closeable />
 ```
 
 ### Forbid mask click
 
 forbid mask click
 
 ```html
-<Popup position="bottom" :open="open" forbidmaskclick />
+<Popup position="bottom" open="{open}" forbidmaskclick />
 ```
 
 ### Round Corner
 
 After setting the round property, the popup window will add different rounded corner styles according to the popup position.
 
 ```html
-<Popup position="bottom" :open="open" round />
+<Popup position="bottom" open="{open}" round />
+```
+
+### 内部滚动设置
+
+You can specify the element that needs to scroll by setting the `scrollid`.
+
+```jsx
+<quark-popup
+  position="center"
+  open={open}
+  onClose={handleClose}
+  scrollid="scroll-it" // Set the id of the element that needs to scroll
+>
+  <div class="fix-content">Fixable content</div>
+  {/* The following elements can scroll */}
+  <div id="scroll-it" class="scroll-list">
+    {new Array(100).fill(1).map((item) => (
+      <div>{{ item }}</div>
+    ))}
+  </div>
+</quark-popup>
 ```
 
 ## API

diff --git a/packages/quarkd/src/popup/doc-react.zh-CN.md b/packages/quarkd/src/popup/doc-react.zh-CN.md
@@ -39,31 +39,52 @@ export default () => {
 通过 position 属性设置弹出位置，默认居中弹出，可以设置为 top、bottom、left、right。
 
 ```html
-<Popup position="top" :open="open" />
+<Popup position="top" open="{open}" />
 ```
 
 ### 关闭图标
 
 设置 closeable 属性后，会在弹出层的右上角显示关闭图标。
 
 ```html
-<Popup position="bottom" :open="open" closeable />
+<Popup position="bottom" open="{open}" closeable />
 ```
 
 ### 禁止遮罩层点击
 
 设置 forbidmaskclick 属性后，点击遮罩层将无法自动关闭弹层。
 
 ```html
-<Popup position="bottom" :open="open" forbidmaskclick />
+<Popup position="bottom" open="{open}" forbidmaskclick />
 ```
 
 ### 圆角弹窗
 
 设置 round 属性后，弹窗会根据弹出位置添加不同的圆角样式。
 
 ```html
-<Popup position="bottom" :open="open" round />
+<Popup position="bottom" open="{open}" round />
+```
+
+### 内部滚动设置
+
+通过 `scrollid` 设置指定需要滚动的元素即可。
+
+```jsx
+<quark-popup
+  position="center"
+  open={open}
+  onClose={handleClose}
+  scrollid="scroll-it" // 设置需要滚动元素的id
+>
+  <div class="fix-content">Fixable content</div>
+  {/* 以下元素可实现滚动 */}
+  <div id="scroll-it" class="scroll-list">
+    {new Array(100).fill(1).map((item) => (
+      <div>{{ item }}</div>
+    ))}
+  </div>
+</quark-popup>
 ```
 
 ## API

diff --git a/packages/quarkd/src/popup/doc.en-US.md b/packages/quarkd/src/popup/doc.en-US.md
@@ -1,52 +1,32 @@
 # Popup
 
-### Intro
+### Introduction
 
-Pop-up windows
+Popup layer
 
-### Install
+### Installation
 
 ```tsx
 import "quarkd/lib/popup";
 ```
 
 ### Basic Usage
 
-```html
-<quark-popup position="bottom" :open="open" @close="handleClose">
-  <div>First Line</div>
-  <div>Second Line</div>
-  <div>Third Line</div>
-  <div>Forth Line</div>
-  <div>Fifth Line</div>
-  <div>Six Line</div>
+```jsx
+<quark-popup
+  position="bottom"
+  :open="open"
+  @close="open = false">
+  <div>First line</div>
+  <div>Second line</div>
 </quark-popup>
-<div @click="showPopup">Show Popup</div>
-```
 
-```js
-<script>
-export default {
-  data() {
-    return {
-      open: false
-    }
-  },
-  methods: {
-    showPopup() {
-      this.open = true;
-    },
-    handleClose() {
-      this.open = false;
-    }
-  }
-}
-</script>
+<div @click="open = true">Trigger Popup display</div>
 ```
 
-### 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
 <quark-popup position="top" :open="open" />
@@ -76,6 +56,27 @@ After setting the round property, the popup window will add different rounded co
 <quark-popup position="bottom" :open="open" round />
 ```
 
+### Internal Scroll Setting
+
+You can specify the element that needs to scroll by setting the `scrollid`.
+
+```html
+<quark-popup
+  position="center"
+  :open="openScroll"
+  @close="openScroll = false"
+  scrollid="scroll-it" // Set the id of the element that needs to scroll
+>
+  <div class="fix-content">Fixable content</div>
+  <!-- The following elements can scroll -->
+  <div id="scroll-it" class="scroll-list">
+    <div v-for="item in 100" :key="item">
+      {{ item }}
+    </div>
+  </div>
+</quark-popup>
+```
+
 ## API
 
 ### Props

diff --git 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
-<quark-popup position="bottom" :open="open" @close="handleClose">
-  <div>第一xxxxxxxxxxxxxxxxx行</div>
-  <div>第二xxxxxxxxxxxxxxxxx行</div>
+```jsx
+<quark-popup
+  position="bottom"
+  :open="open"
+  @close="open = false">
+  <div>第一行</div>
+  <div>第二行</div>
 </quark-popup>
-<div @click="showPopup">触发Popup显示</div>
-```
 
-```js
-<script>
-import  'quarkd/lib/popup';
-export default {
-  data() {
-    return {
-      open: false
-    }
-  },
-  methods: {
-    showPopup() {
-      this.open = true;
-    },
-    handleClose() {
-      this.open = false;
-    }
-  }
-}
-</script>
+<div @click="open = true">触发Popup显示</div>
 ```
 
 ### 弹窗位置
@@ -73,6 +56,27 @@ export default {
 <quark-popup position="bottom" :open="open" round />
 ```
 
+### 内部滚动设置
+
+通过 `scrollid` 设置指定需要滚动的元素即可。
+
+```html
+<quark-popup
+  position="center"
+  :open="openScroll"
+  @close="openScroll = false"
+  scrollid="scroll-it" // 设置需要滚动元素的id
+>
+  <div class="fix-content">Fixable content</div>
+  <!-- 以下元素可实现滚动 -->
+  <div id="scroll-it" class="scroll-list">
+    <div v-for="item in 100" :key="item">
+      {{ item }}
+    </div>
+  </div>
+</quark-popup>
+```
+
 ## API
 
 ### Props