feat:popup

components/popup/index.acss

+.dm-popup-content {
+  position: fixed;
+}
+.dm-popup-mask {
+  display: none;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  opacity: 0;
+  pointer-events: none;
+}
+.dm-popup-left {
+  transform: translateX(-100%);
+  left: 0;
+  top: 0;
+  bottom: 0;
+}
+.dm-popup-right {
+  transform: translateX(100%);
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+.dm-popup-top {
+  top: 0;
+  width: 100vw;
+  transform: translateY(-100%);
+}
+.dm-popup-bottom {
+  bottom: 0;
+  width: 100vw;
+  transform: translateY(100%);
+}
+.dm-popup-show .dm-popup-content {
+  transform: none;
+}
+.dm-popup-show .dm-popup-mask {
+  display: block;
+  opacity: 1;
+  pointer-events: auto;
+}
+.dm-popup.animation .dm-popup-content {
+  transition: all 0.15s linear;
+}
+.dm-popup.animation .dm-popup-mask {
+  transition: all 0.15s linear;
+}
+/* 弹框的样式定义不同的类名 */
+.fillet{
+  background: #fff;
+  border-radius: 16rpx 16rpx 0 0;
+}
+.close-icon{
+    height:64rpx;
+    text-align: center;
+}
+.close-icon .iconfont{
+  color:#291B263D;
+}
+.title{
+    text-align: center;
+    font-size: 24rpx;
+    color:rgba(25, 31, 37, 1);
+}
+.complete{
+    position: absolute;
+    color:#3070F2;
+    font-size: 32rpx;
+    right:32rpx;
+    top: 32rpx;
+}
\ No newline at end of file

components/popup/index.axml

+<view
+  class="dm-popup {{show ? 'dm-popup-show' : ''}} {{ animation ? 'animation': '' }}"
+  disable-scroll="{{disableScroll}}"
+>
+  <view
+    class="dm-popup-mask"
+    a:if="{{mask}}"
+    onTap="onMaskTap"
+    style="z-index: {{zIndex}}"
+  ></view>
+  <view
+    class="dm-popup-content {{className}} dm-popup-{{position}}"
+    style="z-index: {{zIndex}}"
+  >
+      <view a:if="{{position == 'bottom'}}" class="close-icon">
+          <text onTap="onMaskTap" class="iconfont iconicon_slide"></text>
+      </view>
+      <view class="title" a:if="{{title}}">{{title}}</view>
+      <view class="complete" a:if='{{complete}}' onTap='complete'>{{complete}}</view>
+      <slot/>
+  </view>
+</view>
\ No newline at end of file

components/popup/index.js

+"use strict";
+
+Component({
+  props: {
+    className: 'fillet',
+    show: false,
+    position: 'bottom',
+    mask: true,
+    animation: true,
+    disableScroll: true,
+    zIndex: 1000
+  },
+  methods: {
+    onMaskTap: function onMaskTap() {
+      var onClose = this.props.onClose;
+      if (onClose) {
+        onClose();
+      }
+    },
+    complete(){
+      var onComplete = this.props.onComplete;
+      if (onComplete) {
+        onComplete();
+      }
+    }
+  }
+});
\ No newline at end of file

components/popup/index.json

+{
+  "component": true
+}
\ No newline at end of file