fix(picker): add popperOptions props for Picker (#3769)

* fix(picker): add popperOptions props for Picker

* fix(docs): add props api for datepicker and select

Author: shenjunjian

examples/sites/demos/apis/date-picker.js

@@ -215,6 +215,19 @@ export default {
           mode: ['pc'],
           pcDemo: 'custom-suffix-icon'
         },
+        {
+          name: 'popper-options',
+          typeAnchorName: 'IPopperOption',
+          type: 'IPopperOption',
+          defaultValue: ' { }',
+          desc: {
+            'zh-CN': '弹出层参数',
+            'en-US': 'Advanced parameters; Refer to the description of IPopperOption'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        },
         {
           name: 'range-separator',
           type: 'string',
@@ -666,6 +679,21 @@ interface IPickerOptions {
       code: `
 type IType = 'date' | 'dates' | 'daterange' | 'datetime' | 'datetimerange' | 'week' | 'month' | 'monthrange' | 'quarter' | 'year' | 'years' | 'yearrange'
       `
+    },
+    {
+      name: 'IPopperOption',
+      type: 'interface',
+      code: `
+interface IPopperOption {
+  bubbling: boolean // 是否监听元素所有上级有滚动元素的scroll事件，监听到则更新popper的位置。用于解决某些弹出层位置在页面滚动时，位置不正确的场景，默认false
+  followReferenceHide: boolean // 当触发源隐藏时，自动隐藏弹出层，默认true
+  removeOnDestroy: boolean // 弹出层消失后，是否移除弹出层的DOM元素，布尔false
+  updateHiddenPopperOnScroll: boolean  // 滚动过程中是否更新隐藏的弹出层位置
+  boundariesElement: 'viewport' | 'body' | HTMLElement // 滚动过程中,弹出层的碰撞边界。 默认值为： 'viewport'
+  ignoreBoundaries: boolean  // 忽略边界判断，弹出的位置始终是设置的 placement 值
+  scrollParent:  HTMLElement  // 指定滚动的父节点，优化级最高。 默认为null
+}
+      `
     }
   ]
 }

examples/sites/demos/apis/select.js

@@ -435,6 +435,19 @@ export default {
           pcDemo: 'popup-style-position',
           mfDemo: 'popup-style-position'
         },
+        {
+          name: 'popper-options',
+          typeAnchorName: 'IPopperOption',
+          type: 'IPopperOption',
+          defaultValue: ' { }',
+          desc: {
+            'zh-CN': '弹出层参数',
+            'en-US': 'Advanced parameters; Refer to the description of IPopperOption'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        },
         {
           name: 'remote',
           type: 'boolean',
@@ -1034,6 +1047,21 @@ interface ITreeOption {
       code: `
 type IPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
 `
+    },
+    {
+      name: 'IPopperOption',
+      type: 'interface',
+      code: `
+    interface IPopperOption {
+      bubbling: boolean // 是否监听元素所有上级有滚动元素的scroll事件，监听到则更新popper的位置。用于解决某些弹出层位置在页面滚动时，位置不正确的场景，默认false
+      followReferenceHide: boolean // 当触发源隐藏时，自动隐藏弹出层，默认true
+      removeOnDestroy: boolean // 弹出层消失后，是否移除弹出层的DOM元素，布尔false
+      updateHiddenPopperOnScroll: boolean  // 滚动过程中是否更新隐藏的弹出层位置
+      boundariesElement: 'viewport' | 'body' | HTMLElement // 滚动过程中,弹出层的碰撞边界。 默认值为： 'viewport'
+      ignoreBoundaries: boolean  // 忽略边界判断，弹出的位置始终是设置的 placement 值
+      scrollParent:  HTMLElement  // 指定滚动的父节点，优化级最高。 默认为null
+    }
+          `
     }
   ]
 }

examples/sites/demos/apis/time-picker.js

@@ -162,6 +162,19 @@ export default {
           mode: ['pc'],
           pcDemo: 'popper-class'
         },
+        {
+          name: 'popper-options',
+          typeAnchorName: 'IPopperOption',
+          type: 'IPopperOption',
+          defaultValue: ' { }',
+          desc: {
+            'zh-CN': '弹出层参数',
+            'en-US': 'Advanced parameters; Refer to the description of IPopperOption'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        },
         {
           name: 'range-separator',
           type: 'string',
@@ -381,6 +394,21 @@ interface IPickerOptions {
   selectableRange: string
   // 下拉框中显示的格式
   format: string
+}
+      `
+    },
+    {
+      name: 'IPopperOption',
+      type: 'interface',
+      code: `
+interface IPopperOption {
+  bubbling: boolean // 是否监听元素所有上级有滚动元素的scroll事件，监听到则更新popper的位置。用于解决某些弹出层位置在页面滚动时，位置不正确的场景，默认false
+  followReferenceHide: boolean // 当触发源隐藏时，自动隐藏弹出层，默认true
+  removeOnDestroy: boolean // 弹出层消失后，是否移除弹出层的DOM元素，布尔false
+  updateHiddenPopperOnScroll: boolean  // 滚动过程中是否更新隐藏的弹出层位置
+  boundariesElement: 'viewport' | 'body' | HTMLElement // 滚动过程中,弹出层的碰撞边界。 默认值为： 'viewport'
+  ignoreBoundaries: boolean  // 忽略边界判断，弹出的位置始终是设置的 placement 值
+  scrollParent:  HTMLElement  // 指定滚动的父节点，优化级最高。 默认为null
 }
       `
     }

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

@@ -128,6 +128,19 @@ export default {
           mode: ['pc'],
           pcDemo: ''
         },
+        {
+          name: 'popper-options',
+          typeAnchorName: 'IPopperOption',
+          type: 'IPopperOption',
+          defaultValue: ' { }',
+          desc: {
+            'zh-CN': '弹出层参数',
+            'en-US': 'Advanced parameters; Refer to the description of IPopperOption'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        },
         {
           name: 'size',
           type: 'string',
@@ -201,5 +214,22 @@ export default {
       ],
       slots: []
     }
+  ],
+  types: [
+    {
+      name: 'IPopperOption',
+      type: 'interface',
+      code: `
+interface IPopperOption {
+  bubbling: boolean // 是否监听元素所有上级有滚动元素的scroll事件，监听到则更新popper的位置。用于解决某些弹出层位置在页面滚动时，位置不正确的场景，默认false
+  followReferenceHide: boolean // 当触发源隐藏时，自动隐藏弹出层，默认true
+  removeOnDestroy: boolean // 弹出层消失后，是否移除弹出层的DOM元素，布尔false
+  updateHiddenPopperOnScroll: boolean  // 滚动过程中是否更新隐藏的弹出层位置
+  boundariesElement: 'viewport' | 'body' | HTMLElement // 滚动过程中,弹出层的碰撞边界。 默认值为： 'viewport'
+  ignoreBoundaries: boolean  // 忽略边界判断，弹出的位置始终是设置的 placement 值
+  scrollParent:  HTMLElement  // 指定滚动的父节点，优化级最高。 默认为null
+}
+      `
+    }
   ]
 }

packages/vue/src/picker/src/type.ts

@@ -75,6 +75,10 @@ export const pickerProps = {
     type: Boolean,
     default: true
   },
+  popperOptions: {
+    type: Object,
+    default: () => ({})
+  },
   align: {
     type: String,
     default: 'left'