diff --git a/package.json b/package.json
index 35ad5970b..d2f990b5e 100644
--- a/package.json
+++ b/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"
diff --git a/src/popover/demo/index.vue b/src/popover/demo/index.vue
index 98940a1db..644a69370 100644
--- a/src/popover/demo/index.vue
+++ b/src/popover/demo/index.vue
@@ -4,9 +4,9 @@
-
+
{{ t('showPopover') }}
@@ -17,9 +17,9 @@
v-model="show.lightTheme"
theme="light"
:actions="t('actions')"
- placement="bottom-left"
+ placement="bottom"
>
-
+
{{ t('lightTheme') }}
@@ -57,4 +57,10 @@ export default {
diff --git a/src/popover/index.js b/src/popover/index.js
index 93b722a53..39dbc01ed 100644
--- a/src/popover/index.js
+++ b/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 {action.text}
;
},
@@ -60,10 +110,14 @@ export default createComponent({
return (
diff --git a/src/popover/index.less b/src/popover/index.less
index a51896139..f27fe55db 100644
--- a/src/popover/index.less
+++ b/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;
+ // }
}
diff --git a/yarn.lock b/yarn.lock
index dfca40127..891acde56 100644
--- a/yarn.lock
+++ b/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"