feat(dialog-select): [dialog-select] add attribute lock-scroll

Author: James-9696

examples/sites/demos/apis/dialog-select.js

@@ -31,6 +31,20 @@ export default {
           mode: ['pc'],
           pcDemo: 'nest-grid-multi'
         },
+        {
+          name: 'lock-scroll',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '设置弹出面板的锁定滚动',
+            'en-US': 'Set the lock scroll of the pop-up panel.'
+          },
+          meta: {
+            stable: '3.24.0'
+          },
+          mode: ['pc'],
+          pcDemo: 'nest-grid-multi'
+        },
         {
           name: 'grid-op',
           typeAnchorName: 'IGridOption',

examples/sites/demos/pc/app/dialog-select/nest-grid-multi-composition-api.vue

@@ -24,6 +24,7 @@
       value-field="id"
       text-field="name"
       :main-height="240"
+      :lock-scroll="false"
     >
       <template #search>
         <div class="tiny-demo-search">

examples/sites/demos/pc/app/dialog-select/nest-grid-multi.spec.ts

@@ -6,6 +6,7 @@ test('dialogSelect 表格多选', async ({ page }) => {
   const demo = page.locator('#nest-grid-multi')
 
   await demo.getByRole('button', { name: '打开窗口' }).click()
+  await expect(page.locator('body')).not.toHaveClass(/dialog-box__scroll-lock/)
   await page
     .locator('div')
     .filter({ hasText: /^GFD 科技有限公司福州WSX 科技有限公司黄冈暂无数据$/ })

examples/sites/demos/pc/app/dialog-select/nest-grid-multi.vue

@@ -24,6 +24,7 @@
       value-field="id"
       text-field="name"
       :main-height="240"
+      :lock-scroll="false"
     >
       <template #search>
         <div class="tiny-demo-search">

examples/sites/demos/pc/app/dialog-select/webdoc/dialog-select.js

@@ -12,9 +12,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过 <code>auto-lookup</code>、<code>lookup-method</code> 属性 和 <code>change</code> 事件设置初始化时数据的反查回显功能。</p> \n<p>表格多选场景需要设置 <code>popselector</code> 为 <code>grid</code>，<code>multi</code> 为 <code>true</code>，<code>checkRowKeys</code> 设置默认选中数据。</p >\n',
+          '<p>通过 <code>auto-lookup</code>、<code>lookup-method</code> 属性 和 <code>change</code> 事件设置初始化时数据的反查回显功能。</p> \n<p>表格多选场景需要设置 <code>popselector</code> 为 <code>grid</code>，<code>multi</code> 为 <code>true</code>，<code>checkRowKeys</code> 设置默认选中数据。<code>lock-scroll</code> 配置弹出窗口时是否禁用滚动条。</p >\n',
         'en-US':
-          '<p>Use the <code>auto-lookup</code>,<code>lookup-method</code> attributes, and <code>change</code> event settings to perform data backtracking during initialization. <code>autoLookup</code>The default value is <code>true</code>. </p>\n<p> Multiple selection scenarios in the table require setting<code>popcollector</code>as grid,<code>multi</code>as true, and<code>checkRowKeys</code>as default selected data. </p >\n'
+          '<p>Use the <code>auto-lookup</code>,<code>lookup-method</code> attributes, and <code>change</code> event settings to perform data backtracking during initialization. <code>autoLookup</code>The default value is <code>true</code>. </p>\n<p> Multiple selection scenarios in the table require setting<code>popcollector</code>as grid,<code>multi</code>as true, and<code>checkRowKeys</code>as default selected data. <code>lock-scroll</code>Configure whether to disable the scrollbar when a pop-up window appears.</p >\n'
       },
       codeFiles: ['nest-grid-multi.vue']
     },

packages/vue/src/dialog-select/src/index.ts

@@ -82,6 +82,10 @@ export default defineComponent({
     mainHeight: {
       type: Number,
       default: 290
+    },
+    lockScroll: {
+      type: Boolean,
+      default: true
     }
   },
   setup(props, context) {

packages/vue/src/dialog-select/src/pc.vue

@@ -14,6 +14,7 @@
     modal-append-to-body
     :close-on-press-escape="false"
     :close-on-click-modal="false"
+    :lock-scroll="lockScroll"
     v-bind="dialogOp"
     @open="$emit('open', $event)"
     @close="$emit('close', $event)"
@@ -216,7 +217,8 @@ export default defineComponent({
     'beforeClose',
     'autoLookup',
     'lookupMethod',
-    'mainHeight'
+    'mainHeight',
+    'lockScroll'
   ],
   components: {
     TinyDialogBox: DialogBox,