distinctui-uni 0.2.1 → 0.2.2

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

@@ -1,419 +1,475 @@
-<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>
+<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"
+      @touchmove="onPopupTouchMove"
+    >
+      <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" @touchmove.stop="stop">
+        <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>
+      <!-- scrollableBody 时：scroll-view + 固定高度，真机可手势滚动 -->
+      <template v-if="scrollableBody">
+        <view class="d-popup__popup__bd-wrap" @touchmove.stop="stop">
+          <scroll-view
+            class="d-popup__popup__bd d-popup__popup__bd--scroll"
+            scroll-y
+            :scroll-with-animation="true"
+            :show-scrollbar="false"
+          >
+            <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" />
+          </scroll-view>
+        </view>
+      </template>
+      <!-- 默认：原有 view+scroll-y，弹窗按内容高度，不影响现有用法 -->
+      <view v-else class="d-popup__popup__bd d-popup__popup__bd--plain" 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" @touchmove.stop="stop">
+        <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" @touchmove.stop="stop"></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
+    },
+    // 内容区是否可滚动（长内容时设为 true，弹窗会占满 maxHeight 并使用 scroll-view 保证真机可滑；默认 false 保持原有按内容高度，不影响现有用法）
+    scrollableBody: {
+      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；仅当 scrollableBody 时用 maxHeight 作为 height（真机 scroll-view 需明确高度），否则不设 height 保持按内容高度
+      if (this.height) {
+        style.height = this.height;
+      } else if (this.scrollableBody) {
+        style.height = this.maxHeight;
+      }
+      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() {
+      // 仅用于 @touchmove.stop 占位，阻止冒泡由修饰符完成
+    },
+
+    onPopupTouchMove(e) {
+      // 仅在不使用 scrollableBody 时在弹层统一拦截，防穿透且不绑在内容区上避免影响原有滚动
+      if (!this.scrollableBody) {
+        e.stopPropagation();
+      }
+    }
+  }
+};
+</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-wrap {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.d-popup__popup__bd {
+  padding: 0 30rpx;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.d-popup__popup__bd--plain {
+  overflow-y: auto;
+}
+
+.d-popup__popup__bd--scroll {
+  height: 100%;
+  /* 隐藏滚动条：小程序由 show-scrollbar="false" 控制，H5 等由 CSS 兜底 */
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.d-popup__popup__bd--scroll::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+.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/package.json

@@ -1,94 +1,95 @@
-{
-  "name": "distinctui-uni",
-  "version": "0.2.1",
-  "description": "Distinct MiniProgram UI",
-  "author": "benzheng <benzheng@distinctclinic.com>",
-  "scripts": {
-    "build": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
-    "dev": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
-    "info": "node node_modules/@dcloudio/vue-cli-plugin-uni/commands/info.js",
-    "test": "cross-env UNI_PLATFORM=mp-weixin jest -i",
-    "build:lib": "node ./scripts/build/index.js",
-    "publish:lib": "node ./scripts/publish/index.js"
-  },
-  "main": "lib/index.js",
-  "files": [
-    "lib"
-  ],
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
-  "keywords": [
-    "MiniProgram",
-    "UI",
-    "Components"
-  ],
-  "dependencies": {
-    "@dcloudio/uni-app": "^2.0.2-3080720230703001",
-    "@dcloudio/uni-app-plus": "^2.0.2-3080720230703001",
-    "@dcloudio/uni-h5": "^2.0.2-3080720230703001",
-    "@dcloudio/uni-i18n": "^2.0.2-3080720230703001",
-    "@dcloudio/uni-mp-360": "^2.0.2-3080720230703001",
-    "@dcloudio/uni-mp-alipay": "^2.0.2-3080720230703001",
-    "@dcloudio/uni-mp-baidu": "^2.0.2-3080720230703001",
-    "@dcloudio/uni-mp-jd": "^2.0.2-3080720230703001",
-    "@dcloudio/uni-mp-kuaishou": "^2.0.2-3080720230703001",
-    "@dcloudio/uni-mp-lark": "^2.0.2-3080720230703001",
-    "@dcloudio/uni-mp-qq": "^2.0.2-3080720230703001",
-    "@dcloudio/uni-mp-toutiao": "^2.0.2-3080720230703001",
-    "@dcloudio/uni-mp-vue": "^2.0.2-3080720230703001",
-    "@dcloudio/uni-mp-weixin": "^2.0.2-3080720230703001",
-    "@dcloudio/uni-mp-xhs": "^2.0.2-3080720230703001",
-    "@dcloudio/uni-quickapp-native": "^2.0.2-3080720230703001",
-    "@dcloudio/uni-quickapp-webview": "^2.0.2-3080720230703001",
-    "@dcloudio/uni-stacktracey": "^2.0.2-3080720230703001",
-    "@dcloudio/uni-stat": "^2.0.2-3080720230703001",
-    "@vue/shared": "^3.0.0",
-    "core-js": "^3.8.3",
-    "less": "^4.2.0",
-    "less-loader": "^11.1.3",
-    "vue": ">= 2.6.14 < 2.7",
-    "vuex": "^3.2.0"
-  },
-  "devDependencies": {
-    "@dcloudio/types": "^3.3.2",
-    "@dcloudio/uni-automator": "^2.0.2-3080720230703001",
-    "@dcloudio/uni-cli-i18n": "^2.0.2-3080720230703001",
-    "@dcloudio/uni-cli-shared": "^2.0.2-3080720230703001",
-    "@dcloudio/uni-helper-json": "*",
-    "@dcloudio/uni-migration": "^2.0.2-3080720230703001",
-    "@dcloudio/uni-template-compiler": "^2.0.2-3080720230703001",
-    "@dcloudio/vue-cli-plugin-hbuilderx": "^2.0.2-3080720230703001",
-    "@dcloudio/vue-cli-plugin-uni": "^2.0.2-3080720230703001",
-    "@dcloudio/vue-cli-plugin-uni-optimize": "^2.0.2-3080720230703001",
-    "@dcloudio/webpack-uni-mp-loader": "^2.0.2-3080720230703001",
-    "@dcloudio/webpack-uni-pages-loader": "^2.0.2-3080720230703001",
-    "@vue/cli-plugin-babel": "~5.0.0",
-    "@vue/cli-service": "~5.0.0",
-    "babel-plugin-import": "^1.11.0",
-    "cross-env": "^7.0.2",
-    "jest": "^25.4.0",
-    "mini-types": "*",
-    "miniprogram-api-typings": "*",
-    "postcss-comment": "^2.0.0",
-    "vue-template-compiler": ">= 2.6.14 < 2.7"
-  },
-  "browserslist": [
-    "Android >= 4.4",
-    "ios >= 9"
-  ],
-  "directories": {
-    "lib": "lib",
-    "test": "__tests__"
-  },
-  "homepage": "",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://git.distinctclinic.com/distinct-healthcare-mobile/distinct-ui"
-  },
-  "uni-app": {
-    "scripts": {}
-  }
-}
+{
+  "name": "distinctui-uni",
+  "version": "0.2.2",
+  "description": "Distinct MiniProgram UI",
+  "author": "benzheng <benzheng@distinctclinic.com>",
+  "scripts": {
+    "build": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
+    "dev": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
+    "info": "node node_modules/@dcloudio/vue-cli-plugin-uni/commands/info.js",
+    "test": "cross-env UNI_PLATFORM=mp-weixin jest -i",
+    "build:lib": "node ./scripts/build/index.js",
+    "publish:lib": "node ./scripts/publish/index.js",
+    "publish:lib:only": "node ./scripts/publish/publish-only.js"
+  },
+  "main": "lib/index.js",
+  "files": [
+    "lib"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.com/"
+  },
+  "keywords": [
+    "MiniProgram",
+    "UI",
+    "Components"
+  ],
+  "dependencies": {
+    "@dcloudio/uni-app": "^2.0.2-3080720230703001",
+    "@dcloudio/uni-app-plus": "^2.0.2-3080720230703001",
+    "@dcloudio/uni-h5": "^2.0.2-3080720230703001",
+    "@dcloudio/uni-i18n": "^2.0.2-3080720230703001",
+    "@dcloudio/uni-mp-360": "^2.0.2-3080720230703001",
+    "@dcloudio/uni-mp-alipay": "^2.0.2-3080720230703001",
+    "@dcloudio/uni-mp-baidu": "^2.0.2-3080720230703001",
+    "@dcloudio/uni-mp-jd": "^2.0.2-3080720230703001",
+    "@dcloudio/uni-mp-kuaishou": "^2.0.2-3080720230703001",
+    "@dcloudio/uni-mp-lark": "^2.0.2-3080720230703001",
+    "@dcloudio/uni-mp-qq": "^2.0.2-3080720230703001",
+    "@dcloudio/uni-mp-toutiao": "^2.0.2-3080720230703001",
+    "@dcloudio/uni-mp-vue": "^2.0.2-3080720230703001",
+    "@dcloudio/uni-mp-weixin": "^2.0.2-3080720230703001",
+    "@dcloudio/uni-mp-xhs": "^2.0.2-3080720230703001",
+    "@dcloudio/uni-quickapp-native": "^2.0.2-3080720230703001",
+    "@dcloudio/uni-quickapp-webview": "^2.0.2-3080720230703001",
+    "@dcloudio/uni-stacktracey": "^2.0.2-3080720230703001",
+    "@dcloudio/uni-stat": "^2.0.2-3080720230703001",
+    "@vue/shared": "^3.0.0",
+    "core-js": "^3.8.3",
+    "less": "^4.2.0",
+    "less-loader": "^11.1.3",
+    "vue": ">= 2.6.14 < 2.7",
+    "vuex": "^3.2.0"
+  },
+  "devDependencies": {
+    "@dcloudio/types": "^3.3.2",
+    "@dcloudio/uni-automator": "^2.0.2-3080720230703001",
+    "@dcloudio/uni-cli-i18n": "^2.0.2-3080720230703001",
+    "@dcloudio/uni-cli-shared": "^2.0.2-3080720230703001",
+    "@dcloudio/uni-helper-json": "*",
+    "@dcloudio/uni-migration": "^2.0.2-3080720230703001",
+    "@dcloudio/uni-template-compiler": "^2.0.2-3080720230703001",
+    "@dcloudio/vue-cli-plugin-hbuilderx": "^2.0.2-3080720230703001",
+    "@dcloudio/vue-cli-plugin-uni": "^2.0.2-3080720230703001",
+    "@dcloudio/vue-cli-plugin-uni-optimize": "^2.0.2-3080720230703001",
+    "@dcloudio/webpack-uni-mp-loader": "^2.0.2-3080720230703001",
+    "@dcloudio/webpack-uni-pages-loader": "^2.0.2-3080720230703001",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "babel-plugin-import": "^1.11.0",
+    "cross-env": "^7.0.2",
+    "jest": "^25.4.0",
+    "mini-types": "*",
+    "miniprogram-api-typings": "*",
+    "postcss-comment": "^2.0.0",
+    "vue-template-compiler": ">= 2.6.14 < 2.7"
+  },
+  "browserslist": [
+    "Android >= 4.4",
+    "ios >= 9"
+  ],
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "homepage": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://git.distinctclinic.com/distinct-healthcare-mobile/distinct-ui"
+  },
+  "uni-app": {
+    "scripts": {}
+  }
+}