123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305 |
- <template>
- <view class="u-popup">
- <u-overlay
- :show="show"
- @click="overlayClick"
- v-if="overlay"
- :duration="overlayDuration"
- :customStyle="overlayStyle"
- :opacity="overlayOpacity"
- :zIndex="ozIndex"
- ></u-overlay>
- <u-transition
- :show="show"
- :customStyle="transitionStyle"
- :mode="position"
- :duration="duration"
- @afterEnter="afterEnter"
- @click="clickHandler"
- >
- <view
- class="u-popup__content"
- :style="[contentStyle]"
- @tap.stop="noop"
- >
- <u-status-bar v-if="safeAreaInsetTop"></u-status-bar>
- <slot></slot>
- <view
- v-if="closeable"
- @tap.stop="close"
- class="u-popup__content__close"
- :class="['u-popup__content__close--' + closeIconPos]"
- hover-class="u-popup__content__close--hover"
- hover-stay-time="150"
- >
- <u-icon
- name="close"
- color="#909399"
- size="18"
- bold
- ></u-icon>
- </view>
- <u-safe-bottom v-if="safeAreaInsetBottom"></u-safe-bottom>
- </view>
- </u-transition>
- </view>
- </template>
- <script>
- import props from './props.js';
-
- export default {
- name: 'u-popup',
- mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
- data() {
- return {
- overlayDuration: this.duration + 50
- }
- },
- watch: {
- show(newValue, oldValue) {
- if (newValue === true) {
-
- const children = this.$children
- this.retryComputedComponentRect(children)
-
- }
- }
- },
- computed: {
- transitionStyle() {
- const style = {
- zIndex: this.zIndex,
- position: 'fixed',
- display: 'flex',
- }
- style[this.mode] = 0
- if (this.mode === 'left') {
- return uni.$u.deepMerge(style, {
- bottom: 0,
- top: 0,
- })
- } else if (this.mode === 'right') {
- return uni.$u.deepMerge(style, {
- bottom: 0,
- top: 0,
- })
- } else if (this.mode === 'top') {
- return uni.$u.deepMerge(style, {
- left: 0,
- right: 0
- })
- } else if (this.mode === 'bottom') {
- return uni.$u.deepMerge(style, {
- left: 0,
- right: 0,
- })
- } else if (this.mode === 'center') {
- return uni.$u.deepMerge(style, {
- alignItems: 'center',
- 'justify-content': 'center',
- top: 0,
- left: 0,
- right: 0,
- bottom: 0
- })
- }
- },
- contentStyle() {
- const style = {}
-
-
- const {
- safeAreaInsets
- } = uni.$u.sys()
- if (this.mode !== 'center') {
- style.flex = 1
- }
-
- if (this.bgColor) {
- style.backgroundColor = this.bgColor
- }
- if(this.round) {
- const value = uni.$u.addUnit(this.round)
- if(this.mode === 'top') {
- style.borderBottomLeftRadius = value
- style.borderBottomRightRadius = value
- } else if(this.mode === 'bottom') {
- style.borderTopLeftRadius = value
- style.borderTopRightRadius = value
- } else if(this.mode === 'center') {
- style.borderRadius = value
- }
- }
- return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
- },
- position() {
- if (this.mode === 'center') {
- return this.zoom ? 'fade-zoom' : 'fade'
- }
- if (this.mode === 'left') {
- return 'slide-left'
- }
- if (this.mode === 'right') {
- return 'slide-right'
- }
- if (this.mode === 'bottom') {
- return 'slide-up'
- }
- if (this.mode === 'top') {
- return 'slide-down'
- }
- },
- },
- methods: {
-
- overlayClick() {
- if (this.closeOnClickOverlay) {
- this.$emit('close')
- }
- },
- close(e) {
- this.$emit('close')
- },
- afterEnter() {
- this.$emit('open')
- },
- clickHandler() {
-
- if(this.mode === 'center') {
- this.overlayClick()
- }
- this.$emit('click')
- },
-
- retryComputedComponentRect(children) {
-
- const names = ['u-calendar-month', 'u-album', 'u-collapse-item', 'u-dropdown', 'u-index-item', 'u-index-list',
- 'u-line-progress', 'u-list-item', 'u-rate', 'u-read-more', 'u-row', 'u-row-notice', 'u-scroll-list',
- 'u-skeleton', 'u-slider', 'u-steps-item', 'u-sticky', 'u-subsection', 'u-swipe-action-item', 'u-tabbar',
- 'u-tabs', 'u-tooltip'
- ]
-
- for (let i = 0; i < children.length; i++) {
- const child = children[i]
-
- const grandChild = child.$children
-
- if (names.includes(child.$options.name) && typeof child?.init === 'function') {
-
- uni.$u.sleep(50).then(() => {
- child.init()
- })
- }
-
- if (grandChild.length) {
- this.retryComputedComponentRect(grandChild)
- }
- }
- }
-
- }
- }
- </script>
- <style lang="scss" scoped>
- @import "../../libs/css/components.scss";
- $u-popup-flex:1 !default;
- $u-popup-content-background-color: #fff !default;
- .u-popup {
- flex: $u-popup-flex;
- &__content {
- background-color: $u-popup-content-background-color;
- position: relative;
- &--round-top {
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- border-bottom-left-radius: 10px;
- border-bottom-right-radius: 10px;
- }
- &--round-left {
- border-top-left-radius: 0;
- border-top-right-radius: 10px;
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 10px;
- }
- &--round-right {
- border-top-left-radius: 10px;
- border-top-right-radius: 0;
- border-bottom-left-radius: 10px;
- border-bottom-right-radius: 0;
- }
- &--round-bottom {
- border-top-left-radius: 10px;
- border-top-right-radius: 10px;
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
- }
- &--round-center {
- border-top-left-radius: 10px;
- border-top-right-radius: 10px;
- border-bottom-left-radius: 10px;
- border-bottom-right-radius: 10px;
- }
- &__close {
- position: absolute;
- &--hover {
- opacity: 0.4;
- }
- }
- &__close--top-left {
- top: 15px;
- left: 15px;
- }
- &__close--top-right {
- top: 15px;
- right: 15px;
- }
- &__close--bottom-left {
- bottom: 15px;
- left: 15px;
- }
- &__close--bottom-right {
- right: 15px;
- bottom: 15px;
- }
- }
- }
- </style>
|