tt-mp/src/popup/index.js

一套组件化、可复用、易扩展的头条小程序 UI 组件库

import baseComponent from '../helpers/baseComponent'
import classNames from '../helpers/classNames'
import styleToCssString from '../helpers/styleToCssString'
import { $wuxBackdrop } from '../index'

baseComponent({
  useSafeArea: true,
  externalClasses: [
    'wux-content-class',
    'wux-header-class',
    'wux-body-class',
    'wux-footer-class',
    'wux-close-class',
  ],
  properties: {
    prefixCls: {
      type: String,
      value: 'wux-popup',
    },
    animationPrefixCls: {
      type: String,
      value: 'wux-animate',
    },
    title: {
      type: String,
      value: '',
    },
    content: {
      type: String,
      value: '',
    },
    extra: {
      type: String,
      value: '',
    },
    position: {
      type: String,
      value: 'center',
      observer: 'getTransitionName',
    },
    wrapStyle: {
      type: [String, Object],
      value: '',
      observer(newVal) {
        this.setData({
          extStyle: styleToCssString(newVal),
        })
      },
    },
    closable: {
      type: Boolean,
      value: false,
    },
    mask: {
      type: Boolean,
      value: true,
    },
    maskClosable: {
      type: Boolean,
      value: true,
    },
    visible: {
      type: Boolean,
      value: false,
      observer: 'setPopupVisible',
    },
    zIndex: {
      type: Number,
      value: 1000,
    },
    hasHeader: {
      type: Boolean,
      value: true,
    },
    hasFooter: {
      type: Boolean,
      value: true,
    },
    mountOnEnter: {
      type: Boolean,
      value: true,
    },
    unmountOnExit: {
      type: Boolean,
      value: true,
    },
  },
  data: {
    transitionName: '',
    popupVisible: false,
    extStyle: '',
  },
  computed: {
    classes: [
      'prefixCls, position, safeAreaConfig, isIPhoneX',
      function (prefixCls, position, safeAreaConfig, isIPhoneX) {
        const wrap = classNames(`${prefixCls}-position`, {
          [`${prefixCls}-position--${position}`]: position,
          [`${prefixCls}-position--is-iphonex`]:
            safeAreaConfig.bottom && isIPhoneX,
        })
        const content = `${prefixCls}__content`
        const hd = `${prefixCls}__hd`
        const title = `${prefixCls}__title`
        const bd = `${prefixCls}__bd`
        const ft = `${prefixCls}__ft`
        const extra = `${prefixCls}__extra`
        const close = `${prefixCls}__close`
        const x = `${prefixCls}__close-x`

        return {
          wrap,
          content,
          hd,
          title,
          bd,
          ft,
          extra,
          close,
          x,
        }
      },
    ],
  },
  methods: {
    /**
     * 点击关闭按钮事件
     */
    close() {
      this.triggerEvent('close')
    },
    /**
     * 点击蒙层事件
     */
    onMaskClick() {
      if (this.data.maskClosable) {
        this.close()
      }
    },
    /**
     * 组件关闭后的回调函数
     */
    onExited() {
      this.triggerEvent('closed')
    },
    /**
     * 获取过渡的类名
     */
    getTransitionName(value = this.data.position) {
      const { animationPrefixCls } = this.data
      let transitionName = ''

      switch (value) {
        case 'top':
          transitionName = `${animationPrefixCls}--slideInDown`
          break
        case 'right':
          transitionName = `${animationPrefixCls}--slideInRight`
          break
        case 'bottom':
          transitionName = `${animationPrefixCls}--slideInUp`
          break
        case 'left':
          transitionName = `${animationPrefixCls}--slideInLeft`
          break
        default:
          transitionName = `${animationPrefixCls}--fadeIn`
          break
      }

      this.setData({ transitionName })
    },
    /**
     * 设置 popup 组件的显示隐藏
     */
    setPopupVisible(popupVisible) {
      if (this.data.popupVisible !== popupVisible) {
        this.setData({ popupVisible })
        this.setBackdropVisible(popupVisible)
      }
    },
    /**
     * 设置 backdrop 组件的显示隐藏
     */
    setBackdropVisible(visible) {
      if (this.data.mask && this.$wuxBackdrop) {
        this.$wuxBackdrop[visible ? 'retain' : 'release']()
      }
    },
  },
  created() {
    if (this.data.mask) {
      $wuxBackdrop('#wux-backdrop', this).then((res) => {
        this.$wuxBackdrop = res
      })
    }
  },
  attached() {
    this.setPopupVisible(this.data.visible)
    this.getTransitionName()
  },
})