distinctui-uni 0.2.0 → 0.2.1

package/lib/components/d-popup/d-popup.vue

@@ -1,396 +1,419 @@
-<template>
-  <view v-if="wrapperShow">
-    <view
-      class="d-popup__mask"
-      :class="{ 'animate-fade-in': innerShow, 'animate-fade-out': !innerShow }"
-      v-if="mask"
-      :style="{ background: maskBackground }"
-      @tap.stop="clickMask"
-      @touchmove.stop.prevent="stop"
-    />
-    <view
-      class="d-popup__popup"
-      :class="{ 'animate-slide-up': innerShow, 'animate-slide-down': !innerShow }"
-      :style="{ borderTopLeftRadius: radius, borderTopRightRadius: radius, background: background, maxHeight: maxHeight }"
-      @tap.stop="stop"
-    >
-      <view class="d-popup__popup__top" v-if="showSlideIcon" @touchmove.stop="handleClose" @tap.stop="handleClose">
-        <view class="d-popup__slide-icon" />
-      </view>
-      <view class="d-popup__popup__hd">
-        <view class="d-popup__popup__hd__left">
-          <view v-if="showMoreBtn" class="d-popup__popup__more" hover-class="d-active" @tap.stop="clickMore">
-            <image
-              mode="widthFix"
-              class="d-popup__popup__more-icon"
-              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAFDUlEQVR4nO3b0W1URxiG4bM0gFMBpAKMgOtsCaYCSAV2KsBUgKkgUAHuIMk1IEwHUEGM4BrnXwVLZLV8MvbZmQl6Hmk0g2+s/0jv7C4Liwn4JoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAYPpB79+7tnp2dPajjbq2dOq/2abFYnNR2Wuukzs9fvnx5Uuf/FbONP9uQgSyXy51Pnz7t10M9qD/u1LqI03rgR69evXpc52EtzbZu6NkWtYZy586dvdqe1Lo5Xc67aZp+e/369XHtQzFb9G4acLZFrWHcvXv3yZfb58rqVjoc6VYy28WMNtui1hDqBvq9tofTvJ7VjfRr7V2Z7bsNMdvKolZ39ZCPatuvNbu6kR7XjXQ4dWK2y+k927nugdRD3qvtRa1tul830nHtTZntyrrM9rWugSzrbz0+fvz4po43p+16Vw/659qbWZptDs1nW7eo1U19uDusD3eP6rh1rV+yzTaP1rOt6xpIvUz/XdtOrRZO6zb6qfYmzDabprOt6xZI3ULLuoX+qGMz165du93im1uzzavVbJt0C6RuoaPa9mu19LRuo4Pat8pss2sy2ybdAqmb6M+6iX6pYzP1fvavej+7nLbMbPNqNdsmPQN5Uw96t47N1IM+qQd9u45bZbZ5tZptk26B1Ev1WW3N1Uv11mc22/xazLZJl1+68iM/aLPNr8Vsm3T5pSv1oE9qu1Wrpbf1oHdr3yqzza7JbJt0C6Tey/6wH/bMNq9Ws23SLZC6iY5q26/V0tO6iQ5q3yqzza7JbJt0C2T1XzI/f/78po7NtPrCyWzzajXbJt0CWanb6LS267Va+FC30E7tTZhtNk1nW9c1kHo/e1jvZx/Vcevqfezjeh97ODVitnm0nm1d10CW//6z6ZM63qi1Te/rFro5NbQ02xyaz7auayAr9XK9V9uLWtt0vx70ce1Nme3Kusz2te6BrGzzJbv3S7TZLqf3bOeGCGSlbqRn0zQ9qDWn53UDPZw6M9t3G2K2lWECWZnzRhrlBjpntosZbbahAlmpG2mvtqNaN2pdxvtaB3UDHdc+FLNFQ862qDWkL7fSQR2v17qID3X7HI10+3yL2f5j6NmGDeTcl29uH9ZD3K0Hv1M/ulVr5W397LR+dlLftD7r9U3rVZht/NmGDwR6EggEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBIJ/AEZQjudcAs0hAAAAAElFTkSuQmCC"
-            />
-          </view>
-          <slot v-else name="header-left"></slot>
-        </view>
-        <view class="d-popup__popup__hd__middle">
-          <span v-if="title" class="d-popup__popup__hd__title ellipse-one-line">{{ title }}</span>
-          <slot v-else name="header-middle"></slot>
-        </view>
-        <view class="d-popup__popup__hd__right">
-          <view v-if="closabled" class="d-popup__popup__close" @tap.stop="handleClose" hover-class="d-active">
-            <image
-              mode="widthFix"
-              class="d-popup__popup__close-icon"
-              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAAXNSR0IArs4c6QAAADZQTFRFAAAAAAAAQEBAMzMzMzMzMzMzNDQ0MjIyNDQ0MzMzNDQ0NDQ0MzMzMzMzMzMzMzMzNDQ0NTU1nbBS4wAAAA90Uk5TAAIEBQ8UWXBxpKyys/b+RAoM/gAAAMRJREFUSMftlUsOwyAMRMMfAqnh/petqqpqBBgYKdnFSw/Yj2Am2/bEjSGsN7yqnRVVyh6UJLdeRjpslXNEZWd2yL0Q+bppLK+SdJcnfSTTLdOjkolpzghsoV9rvZAcFGN5GHnA0wUY8nRKTniaRVOeCmOB50yl1ArPiSqEJZ4/Vc5rPN9QIRPloLa7NqBI6KHRz4peHDoa6PCh440+IPSJoiaA2gxqZCaNrTLWkp+ZsWvtPo78qrF7Yd3ggoxvfihPXBpv888R1ZroG5MAAAAASUVORK5CYII="
-            />
-          </view>
-          <slot v-else name="header-right"></slot>
-        </view>
-      </view>
-      <view class="d-popup__popup__bd" scroll-y scroll-with-animation>
-        <slot name="body">
-          <view class="d-popup__popup__bd__desc">{{ desc }}</view>
-          <view class="d-popup__popup__bd__tips">{{ tips }}</view>
-        </slot>
-        <view style="width: 100%; height: 100rpx" v-if="!hiddenFooter" />
-      </view>
-      <view class="d-popup__popup__ft d-popup__popup__ft__tool" v-if="!hiddenFooter">
-        <slot name="footer">
-          <view class="d-popup__popup__ft__buttons">
-            <d-button width="272rpx" type="secondary" margin="0 15rpx">次要按钮</d-button>
-            <d-button width="272rpx" type="primary" margin="0 15rpx">主按钮</d-button>
-          </view>
-        </slot>
-      </view>
-      <view class="d-popup__safe-bottom"></view>
-    </view>
-  </view>
-</template>
-
-<script>
-/*如果底部有自定义导航栏，可适当设置内容padding-bottom值*/
-export default {
-  name: "d-popup",
-  emits: [],
-  props: {
-    // 是否显示
-    show: {
-      type: Boolean,
-      default: false
-    },
-    // 是否展示更多按钮
-    showMoreBtn: {
-      type: Boolean,
-      default: false
-    },
-    // 是否展示关闭按钮
-    closabled: {
-      type: Boolean,
-      default: true
-    },
-    // 标题
-    title: {
-      type: String,
-      default: ""
-    },
-    // 辅助操作描述内容
-    desc: {
-      type: String,
-      default: ""
-    },
-    // 辅助操作提示内容
-    tips: {
-      type: String,
-      default: ""
-    },
-    //背景颜色
-    background: {
-      type: String,
-      default: "#fff"
-    },
-    // Popup圆角
-    radius: {
-      type: String,
-      default: "24rpx"
-    },
-    // 是否显示遮罩
-    mask: {
-      type: Boolean,
-      default: true
-    },
-    // 点击遮罩 是否可关闭
-    maskClosable: {
-      type: Boolean,
-      default: true
-    },
-    // 遮罩背景色
-    maskBackground: {
-      type: String,
-      default: "rgba(0,0,0,.6)"
-    },
-    // 弹窗最大高度
-    maxHeight: {
-      type: String,
-      default: "75%"
-    },
-    // 顶部是否显示下滑Icon
-    showSlideIcon: {
-      type: Boolean,
-      default: false
-    },
-    // 隐藏底部(同时最大高度底部遮罩也会消失)
-    hiddenFooter: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      wrapperShow: false,
-      innerShow: false
-    };
-  },
-  watch: {
-    show(nv) {
-      if (nv) {
-        this.wrapperShow = true;
-        this.innerShow = true;
-      } else {
-        this.innerShow = false;
-        setTimeout(() => {
-          this.wrapperShow = false;
-        }, 300);
-      }
-    }
-  },
-  methods: {
-    clickMask() {
-      if (!this.maskClosable) return;
-      this.handleClose();
-    },
-
-    handleClose() {
-      this.$emit("update:show", false);
-    },
-
-    clickMore() {
-      this.$emit("clickMore");
-    },
-
-    stop() {
-      // do nothing
-    }
-  }
-};
-</script>
-
-<style scoped>
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-@keyframes slideUp {
-  from {
-    transform: translate3d(0, 100%, 0);
-  }
-
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes slideDown {
-  from {
-    transform: translate3d(0, 0, 0);
-  }
-
-  to {
-    transform: translate3d(0, 100%, 0);
-  }
-}
-
-.animate_fade-in {
-  animation: fadeIn ease 0.3s forwards;
-}
-
-.animate_fade-out {
-  animation: fadeOut ease 0.3s forwards;
-}
-
-.animate-slide-up {
-  animation: slideUp ease 0.3s forwards;
-}
-
-.animate-slide-down {
-  animation: slideDown ease 0.3s forwards;
-}
-
-.d-active {
-  opacity: 0.6;
-}
-
-.d-popup__mask {
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  z-index: 1000;
-}
-
-.d-popup__popup {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  min-height: 255rpx;
-  max-height: 75%;
-  z-index: 5000;
-  overflow: hidden;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  outline: 0;
-}
-.d-popup__popup__more-icon {
-  width: 42rpx;
-  height: 42rpx;
-}
-
-.d-popup__slide-icon {
-  width: 100rpx;
-  height: 8rpx;
-  border-radius: 30rpx;
-  background: #d8d8d8;
-}
-
-.d-popup__popup__close-icon {
-  width: 32rpx;
-  height: 32rpx;
-}
-
-.d-popup__popup-show {
-  transform: translate3d(0, 0, 0);
-}
-
-.d-popup__popup__top {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 20rpx 0 10rpx;
-}
-
-.d-popup__popup__hd {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  padding: 30rpx 30rpx 40rpx 30rpx;
-}
-
-.d-popup__popup__hd__left {
-  min-width: 30rpx;
-  padding-right: 10rpx;
-}
-
-.d-popup__popup__hd__middle {
-  text-align: center;
-  flex: 1;
-  margin: 0 10rpx;
-}
-
-.d-popup__popup__hd__right {
-  min-width: 30rpx;
-  padding-left: 10rpx;
-}
-
-.d-popup__popup__hd__title {
-  line-height: 48rpx;
-  font-size: 34rpx;
-  color: #3d3d3d;
-  font-weight: bold;
-}
-
-.d-popup__popup__bd {
-  padding: 0 30rpx;
-  box-sizing: border-box;
-  width: 100%;
-  overflow-y: auto;
-}
-
-.d-popup__popup__bd__desc {
-  font-size: 32rpx;
-  font-weight: bold;
-  color: #333;
-  line-height: 42rpx;
-}
-
-.d-popup__popup__bd__tips {
-  font-size: 30rpx;
-  color: #666;
-  line-height: 40rpx;
-  margin-top: 20rpx;
-}
-
-.d-popup__popup__ft {
-  position: relative;
-  z-index: 9;
-}
-
-.d-popup__safe-bottom {
-  height: env(safe-area-inset-bottom);
-}
-
-.d-popup__popup__ft__tool {
-  position: relative;
-  z-index: 50;
-}
-
-.d-popup__popup__ft__tool::before {
-  content: "";
-  height: 100rpx;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
-  position: absolute;
-  bottom: calc(100% - 1px);
-  left: 0;
-  right: 0;
-  transform: translateZ(0);
-  pointer-events: none;
-  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
-}
-
-.d-popup__popup__ft__mask {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100rpx;
-  opacity: 1;
-}
-
-.d-popup__popup__ft__buttons {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding-bottom: 60rpx;
-}
-
-.ellipse-one-line {
-  word-break: break-all;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  /*! autoprefixer: off */
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-  overflow: hidden;
-}
-</style>
+<template>
+  <view v-if="wrapperShow">
+    <view
+      class="d-popup__mask"
+      :class="{ 'animate-fade-in': innerShow, 'animate-fade-out': !innerShow }"
+      v-if="mask"
+      :style="{ background: maskBackground }"
+      @tap.stop="onClickMask"
+      @touchmove.stop.prevent="stop"
+    />
+    <view
+      class="d-popup__popup"
+      :class="{ 'animate-slide-up': innerShow, 'animate-slide-down': !innerShow }"
+      :style="[popupStyle]"
+      @tap.stop="stop"
+    >
+      <view class="d-popup__popup__top" v-if="showSlideIcon" @touchmove.stop="handleClose" @tap.stop="handleClose">
+        <view class="d-popup__slide-icon" />
+      </view>
+      <view class="d-popup__popup__hd">
+        <view class="d-popup__popup__hd__left">
+          <view v-if="showMoreBtn" class="d-popup__popup__more" hover-class="d-active" @tap.stop="clickMore">
+            <image
+              mode="widthFix"
+              class="d-popup__popup__more-icon"
+              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAFDUlEQVR4nO3b0W1URxiG4bM0gFMBpAKMgOtsCaYCSAV2KsBUgKkgUAHuIMk1IEwHUEGM4BrnXwVLZLV8MvbZmQl6Hmk0g2+s/0jv7C4Liwn4JoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAYPpB79+7tnp2dPajjbq2dOq/2abFYnNR2Wuukzs9fvnx5Uuf/FbONP9uQgSyXy51Pnz7t10M9qD/u1LqI03rgR69evXpc52EtzbZu6NkWtYZy586dvdqe1Lo5Xc67aZp+e/369XHtQzFb9G4acLZFrWHcvXv3yZfb58rqVjoc6VYy28WMNtui1hDqBvq9tofTvJ7VjfRr7V2Z7bsNMdvKolZ39ZCPatuvNbu6kR7XjXQ4dWK2y+k927nugdRD3qvtRa1tul830nHtTZntyrrM9rWugSzrbz0+fvz4po43p+16Vw/659qbWZptDs1nW7eo1U19uDusD3eP6rh1rV+yzTaP1rOt6xpIvUz/XdtOrRZO6zb6qfYmzDabprOt6xZI3ULLuoX+qGMz165du93im1uzzavVbJt0C6RuoaPa9mu19LRuo4Pat8pss2sy2ybdAqmb6M+6iX6pYzP1fvavej+7nLbMbPNqNdsmPQN5Uw96t47N1IM+qQd9u45bZbZ5tZptk26B1Ev1WW3N1Uv11mc22/xazLZJl1+68iM/aLPNr8Vsm3T5pSv1oE9qu1Wrpbf1oHdr3yqzza7JbJt0C6Tey/6wH/bMNq9Ws23SLZC6iY5q26/V0tO6iQ5q3yqzza7JbJt0C2T1XzI/f/78po7NtPrCyWzzajXbJt0CWanb6LS267Va+FC30E7tTZhtNk1nW9c1kHo/e1jvZx/Vcevqfezjeh97ODVitnm0nm1d10CW//6z6ZM63qi1Te/rFro5NbQ02xyaz7auayAr9XK9V9uLWtt0vx70ce1Nme3Kusz2te6BrGzzJbv3S7TZLqf3bOeGCGSlbqRn0zQ9qDWn53UDPZw6M9t3G2K2lWECWZnzRhrlBjpntosZbbahAlmpG2mvtqNaN2pdxvtaB3UDHdc+FLNFQ862qDWkL7fSQR2v17qID3X7HI10+3yL2f5j6NmGDeTcl29uH9ZD3K0Hv1M/ulVr5W397LR+dlLftD7r9U3rVZht/NmGDwR6EggEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBIJ/AEZQjudcAs0hAAAAAElFTkSuQmCC"
+            />
+          </view>
+          <slot v-else name="header-left"></slot>
+        </view>
+        <view class="d-popup__popup__hd__middle">
+          <span v-if="title" class="d-popup__popup__hd__title ellipse-one-line">{{ title }}</span>
+          <slot v-else name="header-middle"></slot>
+        </view>
+        <view class="d-popup__popup__hd__right">
+          <view v-if="closabled" class="d-popup__popup__close" @tap.stop="handleClose" hover-class="d-active">
+            <image
+              mode="widthFix"
+              class="d-popup__popup__close-icon"
+              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAAXNSR0IArs4c6QAAADZQTFRFAAAAAAAAQEBAMzMzMzMzMzMzNDQ0MjIyNDQ0MzMzNDQ0NDQ0MzMzMzMzMzMzMzMzNDQ0NTU1nbBS4wAAAA90Uk5TAAIEBQ8UWXBxpKyys/b+RAoM/gAAAMRJREFUSMftlUsOwyAMRMMfAqnh/petqqpqBBgYKdnFSw/Yj2Am2/bEjSGsN7yqnRVVyh6UJLdeRjpslXNEZWd2yL0Q+bppLK+SdJcnfSTTLdOjkolpzghsoV9rvZAcFGN5GHnA0wUY8nRKTniaRVOeCmOB50yl1ArPiSqEJZ4/Vc5rPN9QIRPloLa7NqBI6KHRz4peHDoa6PCh440+IPSJoiaA2gxqZCaNrTLWkp+ZsWvtPo78qrF7Yd3ggoxvfihPXBpv888R1ZroG5MAAAAASUVORK5CYII="
+            />
+          </view>
+          <slot v-else name="header-right"></slot>
+        </view>
+      </view>
+      <view class="d-popup__popup__bd" scroll-y scroll-with-animation>
+        <slot name="body">
+          <view class="d-popup__popup__bd__desc">{{ desc }}</view>
+          <view class="d-popup__popup__bd__tips">{{ tips }}</view>
+        </slot>
+        <view style="width: 100%; height: 100rpx" v-if="!hiddenFooter" />
+      </view>
+      <view class="d-popup__popup__ft d-popup__popup__ft__tool" v-if="!hiddenFooter">
+        <slot name="footer">
+          <view class="d-popup__popup__ft__buttons">
+            <d-button width="272rpx" type="secondary" margin="0 15rpx">次要按钮</d-button>
+            <d-button width="272rpx" type="primary" margin="0 15rpx">主按钮</d-button>
+          </view>
+        </slot>
+      </view>
+      <view class="d-popup__safe-bottom"></view>
+    </view>
+  </view>
+</template>
+
+<script>
+/*如果底部有自定义导航栏，可适当设置内容padding-bottom值*/
+export default {
+  name: "d-popup",
+  emits: ['update:show', 'clickMore', 'close', 'open', 'clickMask'],
+  props: {
+    // 是否显示
+    show: {
+      type: Boolean,
+      default: false
+    },
+    // 是否展示更多按钮
+    showMoreBtn: {
+      type: Boolean,
+      default: false
+    },
+    // 是否展示关闭按钮
+    closabled: {
+      type: Boolean,
+      default: true
+    },
+    // 标题
+    title: {
+      type: String,
+      default: ""
+    },
+    // 辅助操作描述内容
+    desc: {
+      type: String,
+      default: ""
+    },
+    // 辅助操作提示内容
+    tips: {
+      type: String,
+      default: ""
+    },
+    //背景颜色
+    background: {
+      type: String,
+      default: "#fff"
+    },
+    // Popup圆角
+    radius: {
+      type: String,
+      default: "24rpx"
+    },
+    // 是否显示遮罩
+    mask: {
+      type: Boolean,
+      default: true
+    },
+    // 点击遮罩 是否可关闭
+    maskClosable: {
+      type: Boolean,
+      default: true
+    },
+    // 遮罩背景色
+    maskBackground: {
+      type: String,
+      default: "rgba(0,0,0,.6)"
+    },
+    // 弹窗固定高度
+    height: {
+      type: String,
+      default: ""
+    },
+    // 弹窗最大高度
+    maxHeight: {
+      type: String,
+      default: "75%"
+    },
+    // 顶部是否显示下滑Icon
+    showSlideIcon: {
+      type: Boolean,
+      default: false
+    },
+    // 隐藏底部(同时最大高度底部遮罩也会消失)
+    hiddenFooter: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      wrapperShow: false,
+      innerShow: false
+    };
+  },
+  computed: {
+    popupStyle() {
+      const style = {
+        borderTopLeftRadius: this.radius,
+        borderTopRightRadius: this.radius,
+        background: this.background,
+        maxHeight: this.maxHeight
+      };
+      // 只有当 height 有值时才设置 height 属性，避免影响现有组件
+      if (this.height) {
+        style.height = this.height;
+      }
+      return style;
+    }
+  },
+  watch: {
+    show(nv) {
+      if (nv) {
+        this.wrapperShow = true;
+        this.innerShow = true;
+        this.$emit('open');
+      } else {
+        this.innerShow = false;
+        setTimeout(() => {
+          this.wrapperShow = false;
+        }, 300);
+      }
+    }
+  },
+  methods: {
+    onClickMask() {
+      this.$emit('clickMask');
+      if (!this.maskClosable) return;
+      this.handleClose();
+    },
+
+    handleClose() {
+      this.$emit("update:show", false);
+      this.$emit("close");
+    },
+
+    clickMore() {
+      this.$emit("clickMore");
+    },
+
+    stop() {
+      // do nothing
+    }
+  }
+};
+</script>
+
+<style scoped>
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    transform: translate3d(0, 100%, 0);
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slideDown {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+.animate_fade-in {
+  animation: fadeIn ease 0.3s forwards;
+}
+
+.animate_fade-out {
+  animation: fadeOut ease 0.3s forwards;
+}
+
+.animate-slide-up {
+  animation: slideUp ease 0.3s forwards;
+}
+
+.animate-slide-down {
+  animation: slideDown ease 0.3s forwards;
+}
+
+.d-active {
+  opacity: 0.6;
+}
+
+.d-popup__mask {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 1000;
+}
+
+.d-popup__popup {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  min-height: 255rpx;
+  max-height: 75%;
+  z-index: 5000;
+  overflow: hidden;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  outline: 0;
+}
+.d-popup__popup__more-icon {
+  width: 42rpx;
+  height: 42rpx;
+}
+
+.d-popup__slide-icon {
+  width: 100rpx;
+  height: 8rpx;
+  border-radius: 30rpx;
+  background: #d8d8d8;
+}
+
+.d-popup__popup__close-icon {
+  width: 32rpx;
+  height: 32rpx;
+}
+
+.d-popup__popup-show {
+  transform: translate3d(0, 0, 0);
+}
+
+.d-popup__popup__top {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20rpx 0 10rpx;
+}
+
+.d-popup__popup__hd {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  padding: 30rpx 30rpx 40rpx 30rpx;
+}
+
+.d-popup__popup__hd__left {
+  min-width: 30rpx;
+  padding-right: 10rpx;
+}
+
+.d-popup__popup__hd__middle {
+  text-align: center;
+  flex: 1;
+  margin: 0 10rpx;
+}
+
+.d-popup__popup__hd__right {
+  min-width: 30rpx;
+  padding-left: 10rpx;
+}
+
+.d-popup__popup__hd__title {
+  line-height: 48rpx;
+  font-size: 34rpx;
+  color: #3d3d3d;
+  font-weight: bold;
+}
+
+.d-popup__popup__bd {
+  padding: 0 30rpx;
+  box-sizing: border-box;
+  width: 100%;
+  overflow-y: auto;
+}
+
+.d-popup__popup__bd__desc {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  line-height: 42rpx;
+}
+
+.d-popup__popup__bd__tips {
+  font-size: 30rpx;
+  color: #666;
+  line-height: 40rpx;
+  margin-top: 20rpx;
+}
+
+.d-popup__popup__ft {
+  position: relative;
+  z-index: 9;
+}
+
+.d-popup__safe-bottom {
+  height: env(safe-area-inset-bottom);
+}
+
+.d-popup__popup__ft__tool {
+  position: relative;
+  z-index: 50;
+}
+
+.d-popup__popup__ft__tool::before {
+  content: "";
+  height: 100rpx;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
+  position: absolute;
+  bottom: calc(100% - 1px);
+  left: 0;
+  right: 0;
+  transform: translateZ(0);
+  pointer-events: none;
+  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
+}
+
+.d-popup__popup__ft__mask {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100rpx;
+  opacity: 1;
+}
+
+.d-popup__popup__ft__buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: 60rpx;
+}
+
+.ellipse-one-line {
+  word-break: break-all;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  /*! autoprefixer: off */
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+}
+</style>

package/lib/index.js

@@ -13,7 +13,7 @@ import DTabs from './components/d-tabs/d-tabs.vue';
         }
       });
     }
-  const version = '0.1.5';
+  const version = '0.2.1';
   export { install, version };
   
   export default { install, version };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "distinctui-uni",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Distinct MiniProgram UI",
   "author": "benzheng <benzheng@distinctclinic.com>",
   "scripts": {
@@ -17,7 +17,7 @@
   ],
   "publishConfig": {
     "access": "public",
-    "registry": "https://registry.npmjs.com/"
+    "registry": "https://registry.npmjs.org/"
   },
   "keywords": [
     "MiniProgram",