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"