微信小程序组件: 弹窗

效果图 popup

1. 取消及确定按钮(可设置有无)
2. title(可选择)
3. 可选点击遮罩是否关闭弹窗
4. 内容使用插槽

代码 ⬇️
html

<view class="views" wx:if="{{viewShow}}">
  <view class="njx_wrap p_r" style="background: {{wrapBg}};transition-duration: {{duration}}s;" bindtap="close">
    <view class="popup w_100" style="bottom: {{popupBottom}}px;transition-duration: {{duration}}s;">
      <view class="f_r_b title">
        <view wx:if="{{cancelButtonText}}">{{cancelButtonText}}</view>
        <view class="njx_title">{{titleText}}</view>
        <view class="njx_button" catchtap="submit">{{submitButtonText}}</view>
      </view>
      <view class="content">
        <slot></slot>
      </view>
    </view>
  </view>
</view>

css (wrap和按钮使用了公共样式, 不碍事, 自己调~嘿嘿)

@import "/components/common.wxss";

.njx_wrap,
.popup {
  transition-property: all;
  transition-timing-function: ease-in-out;
}

.popup {
  box-sizing: border-box;
  border-radius: 8px 8px 0 0;
  background: #fff;

  position: absolute;
}

.title {
  padding: 12px 20px;
}

js

Component({
  properties: {
    show: Boolean,
    duration: {
      type: Number,
      value: .2
    },
    // 将按钮内容设置为空则该功能取消
    cancelButtonText: {
      type: String,
      value: "取消"
    },
    submitButtonText: {
      type: String,
      value: "确定"
    },
    // 点击遮罩 关闭弹窗
    closeOnPressModal: {
      type: Boolean,
      value: true
    },
    // 标题
    titleText: {
      type: String,
      value: ""
    },
  },
  data: {
    wrapBg: 'rgba(127, 120, 160, 0)',
    viewShow: false,
    popupBottom: -1600,
  },
  methods: {
    submit() {
      this.triggerEvent("submit");
    },
    close() {
      if(!this.data.closeOnPressModal) return;
      this.setData({
        show: false,
      })
    },
  },
  observers: {
    show(show) {
      if (show) {
        this.setData({
          viewShow: show,
        })
        // 定时器的设置: 外面的容器是靠wx:if控制, 如果这个属性和它时间间隔为0的话, 咩有办法使用duration. 不知道有没有道理, 是试出来的
        setTimeout(() => {
          this.setData({
            wrapBg: 'rgba(127, 120, 160, .2)',
            popupBottom: 0,
          })
        }, 40)
      } else {
        this.setData({
          wrapBg: 'rgba(127, 120, 160, 0)',
          popupBottom: -1600,
        })
        // 定时器: 动画duration完毕再关闭该页面
        setTimeout(() => {
          this.setData({
            viewShow: show
          })
        }, this.data.duration * 1000)
      }
    }
  }
})

tada~~~_{一个好看的popup就完成啦}~