feat(popeditor): [popeditor] add attribute lock-scroll

Author: James-9696

examples/sites/demos/apis/popeditor.js

@@ -344,6 +344,20 @@ export default {
           mode: ['pc'],
           pcDemo: 'title'
         },
+        {
+          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: 'condition-layout'
+        },
         {
           name: 'trigger',
           type: "'default' | 'cell' | 'row'",

examples/sites/demos/pc/app/popeditor/condition-layout-composition-api.vue

@@ -8,6 +8,7 @@
     text-field="name"
     value-field="id"
     :conditions="conditions"
+    :lock-scroll="false"
   ></tiny-popeditor>
 </template>
 

examples/sites/demos/pc/app/popeditor/condition-layout.spec.ts

@@ -11,6 +11,7 @@ test('PopEditor 布局与配置', async ({ page }) => {
   const rightLayout = dialogBox.locator('.tiny-popeditor-body__right')
 
   await textBox.click()
+  await expect(page.locator('body')).not.toHaveClass(/dialog-box__scroll-lock/)
   await expect(dialogBox).toBeVisible()
   await expect(leftLayout).toBeVisible()
   await expect(rightLayout).toBeVisible()

examples/sites/demos/pc/app/popeditor/condition-layout.vue

@@ -8,6 +8,7 @@
     text-field="name"
     value-field="id"
     :conditions="conditions"
+    :lock-scroll="false"
   ></tiny-popeditor>
 </template>
 

examples/sites/demos/pc/app/popeditor/webdoc/popeditor.js

@@ -38,9 +38,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过 <code>conditions</code> 项目里属性里的 <code>span</code> 配置栅格，<code>labelWidth</code> 配置 label 宽度，<code>component</code>配置自定义组件，并通过 <code>attrs</code> 配置组件属性。</p>',
+          '<p>通过 <code>conditions</code> 项目里属性里的 <code>span</code> 配置栅格，<code>labelWidth</code> 配置 label 宽度，<code>component</code>配置自定义组件，并通过 <code>attrs</code> 配置组件属性。<code>lock-scroll</code> 配置弹出窗口时是否禁用滚动条。</p>',
         'en-US':
-          '<p>Set <code>span</code> in the attributes of the <code>condition</code> project to configure the grid and <code>labelWidth</code> to configure the label width. <code>component</code>Configure custom components and set component attributes through <code>attrs</code></p>'
+          '<p>Set <code>span</code> in the attributes of the <code>condition</code> project to configure the grid and <code>labelWidth</code> to configure the label width. <code>component</code>Configure custom components and set component attributes through <code>attrs</code>.<code>lock-scroll</code>Configure whether to disable the scrollbar when a pop-up window appears.</p>'
       },
       codeFiles: ['condition-layout.vue']
     },

packages/vue/src/popeditor/src/index.ts

@@ -183,6 +183,10 @@ export const popeditorProps = {
     type: Boolean,
     default: true
   },
+  lockScroll: {
+    type: Boolean,
+    default: true
+  },
   placement: {
     type: String,
     default: 'bottom-start'

packages/vue/src/popeditor/src/pc.vue

@@ -97,6 +97,7 @@
       @closed="state.showContent = false"
       :before-close="handleBeforeClose"
       :dialog-class="dialogClass"
+      :lock-scroll="lockScroll"
     >
       <template v-if="state.showContent">
         <div class="tiny-popeditor-top" v-if="state.conditions.length && popseletor === 'grid'">
@@ -394,6 +395,7 @@ export default defineComponent({
     'dialogClass',
     'tabindex',
     'draggable',
+    'lockScroll',
     'placement',
     'popperAppendToBody',
     'suggest',