feat(Popover): using popperjs

package.json

@@ -54,6 +54,7 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "7.x",
+    "@popperjs/core": "^2.5.4",
     "@vant/icons": "1.4.0",
     "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
     "vue-lazyload": "1.2.3"

src/popover/demo/index.vue

@@ -4,9 +4,9 @@
       <van-popover
         v-model="show.basic"
         :actions="t('actions')"
-        placement="bottom-left"
+        placement="bottom"
       >
-        <van-button @click="show.basic = true">
+        <van-button type="primary" @click="show.basic = true">
           {{ t('showPopover') }}
         </van-button>
       </van-popover>
@@ -17,9 +17,9 @@
         v-model="show.lightTheme"
         theme="light"
         :actions="t('actions')"
-        placement="bottom-left"
+        placement="bottom"
       >
-        <van-button @click="show.lightTheme = true">
+        <van-button type="primary" @click="show.lightTheme = true">
           {{ t('lightTheme') }}
         </van-button>
       </van-popover>
@@ -57,4 +57,10 @@ export default {
 
 <style lang="less">
 @import '../../style/var';
+
+.demo-popover {
+  .van-popover__wrapper {
+    margin-left: @padding-md;
+  }
+}
 </style>

src/popover/index.js

@@ -1,4 +1,5 @@
 import { createNamespace } from '../utils';
+import { createPopper } from '@popperjs/core';
 
 // Mixins
 import { ClickOutsideMixin } from '../mixins/click-outside';
@@ -21,9 +22,12 @@ export default createComponent({
     overlay: Boolean,
     placement: String,
     textColor: String,
-    getContainer: [String, Function],
     backgroundColor: String,
     closeOnClickAction: Boolean,
+    offset: {
+      type: Array,
+      default: [0, 0],
+    },
     theme: {
       type: String,
       default: 'dark',
@@ -32,9 +36,55 @@ export default createComponent({
       type: Array,
       default: () => [],
     },
+    getContainer: {
+      type: [String, Function],
+      default: 'body',
+    },
+  },
+
+  data() {
+    return {
+      location: null,
+    };
+  },
+
+  watch: {
+    value(value) {
+      if (value) {
+        this.updateLocation();
+      }
+    },
+  },
+
+  mounted() {
+    if (this.value) {
+      this.updateLocation();
+    }
   },
 
   methods: {
+    updateLocation() {
+      this.$nextTick(() => {
+        createPopper(this.$refs.wrapper, this.$refs.popover.$el, {
+          placement: this.placement,
+          modifiers: [
+            {
+              name: 'computeStyles',
+              options: {
+                adaptive: false,
+              },
+            },
+            {
+              name: 'offset',
+              options: {
+                offset: this.offset,
+              },
+            },
+          ],
+        });
+      });
+    },
+
     renderAction(action) {
       return <div class={bem('action')}>{action.text}</div>;
     },
@@ -60,10 +110,14 @@ export default createComponent({
     return (
       <span ref="wrapper" class={bem('wrapper')}>
         <Popup
+          ref="popover"
           value={this.value}
+          style={this.location}
           class={bem([this.theme])}
           overlay={this.overlay}
+          position=""
           transition="van-popover-zoom"
+          lockScroll={false}
           getContainer={this.getContainer}
           onInput={this.onToggle}
         >

src/popover/index.less

@@ -4,8 +4,11 @@
 .van-popover {
   position: absolute;
   border-radius: @border-radius-lg;
-  transform: none;
-  transition: all 0.3s;
+  transition-duration: 0s;
+
+  &__wrapper {
+    display: inline-block;
+  }
 
   &__action {
     position: relative;
@@ -53,9 +56,10 @@
     }
   }
 
-  &-zoom-enter,
-  &-zoom-leave-active {
-    transform: scale(0.8);
-    opacity: 0;
-  }
+  // &-zoom-enter,
+  // &-zoom-leave-active {
+  //   transform: scale(0.8);
+  //   opacity: 0;
+  //   transition: all 0.3s;
+  // }
 }

yarn.lock

@@ -1524,6 +1524,11 @@
   dependencies:
     "@types/node" ">= 8"
 
+"@popperjs/core@^2.5.4":
+  version "2.5.4"
+  resolved "https://registry.npm.taobao.org/@popperjs/core/download/@popperjs/core-2.5.4.tgz#de25b5da9f727985a3757fd59b5d028aba75841a"
+  integrity sha1-3iW12p9yeYWjdX/Vm10Cirp1hBo=
+
 "@sindresorhus/is@^0.14.0":
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea"