@10yun/cv-mobile-ui 0.5.53 → 0.5.55

package/uni-ui/lib/uni-popup/package.json

@@ -0,0 +1,107 @@
+{
+  "id": "uni-popup",
+  "displayName": "uni-popup 弹出层",
+  "version": "1.9.11",
+  "description": " Popup 组件，提供常用的弹层",
+  "keywords": [
+    "uni-ui",
+    "弹出层",
+    "弹窗",
+    "popup",
+    "弹框"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": "",
+    "uni-app": "^4.07",
+    "uni-app-x": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue",
+    "darkmode": "x",
+    "i18n": "x",
+    "widescreen": "x"
+  },
+  "uni_modules": {
+    "dependencies": [
+      "uni-scss",
+      "uni-transition"
+    ],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "x",
+        "aliyun": "x",
+        "alipay": "x"
+      },
+      "client": {
+        "uni-app": {
+          "vue": {
+            "vue2": "√",
+            "vue3": "√"
+          },
+          "web": {
+            "safari": "√",
+            "chrome": "√"
+          },
+          "app": {
+            "vue": "√",
+            "nvue": "√",
+            "android": "√",
+            "ios": "√",
+            "harmony": "√"
+          },
+          "mp": {
+            "weixin": "√",
+            "alipay": "√",
+            "toutiao": "√",
+            "baidu": "√",
+            "kuaishou": "-",
+            "jd": "-",
+            "harmony": "-",
+            "qq": "√",
+            "lark": "-"
+          },
+          "quickapp": {
+            "huawei": "-",
+            "union": "-"
+          }
+        },
+        "uni-app-x": {
+          "web": {
+            "safari": "√",
+            "chrome": "√"
+          },
+          "app": {
+            "android": "√",
+            "ios": "√",
+            "harmony": "√"
+          },
+          "mp": {
+            "weixin": "√"
+          }
+        }
+      }
+    }
+  }
+}

package/uni-ui/lib/uni-popup/readme.md

@@ -0,0 +1,15 @@
+
+
+## Popup 弹出层
+> **组件名：uni-popup**
+> 代码块： `uPopup`
+> 关联组件：`uni-transition`
+
+
+弹出层组件，在应用中弹出一个消息提示窗口、提示框等
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-popup)
+
+
+
+

package/uni-ui/lib/uni-popup/uni-popup.uvue

@@ -0,0 +1,90 @@
+<template>
+  <view class="popup-root" v-if="isOpen" v-show="isShow" @click="clickMask">
+    <view @click.stop>
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+  type CloseCallBack = ()=> void;
+  let closeCallBack:CloseCallBack = () :void => {};
+  export default {
+    emits:["close","clickMask"],
+    data() {
+      return {
+        isShow:false,
+        isOpen:false
+      }
+    },
+    props: {
+      maskClick: {
+        type: Boolean,
+        default: true
+      },
+    },
+    watch: {
+      // 设置show = true 时，如果没有 open 需要设置为 open
+      isShow:{
+        handler(isShow) {
+          // console.log("isShow",isShow)
+          if(isShow && this.isOpen == false){
+            this.isOpen = true
+          }
+        },
+        immediate:true
+      },
+      // 设置isOpen = true 时，如果没有 isShow 需要设置为 isShow
+      isOpen:{
+        handler(isOpen) {
+          // console.log("isOpen",isOpen)
+          if(isOpen && this.isShow == false){
+            this.isShow = true
+          }
+        },
+        immediate:true
+      }
+    },
+    methods:{
+      open(){
+        // ...funs : CloseCallBack[]
+        // if(funs.length > 0){
+        //   closeCallBack = funs[0]
+        // }
+        this.isOpen = true;
+      },
+      clickMask(){
+        if(this.maskClick == true){
+          this.$emit('clickMask')
+          this.close()
+        }
+      },
+      close(): void{
+        this.isOpen = false;
+        this.$emit('close')
+        closeCallBack()
+      },
+      hiden(){
+        this.isShow = false
+      },
+      show(){
+        this.isShow = true
+      }
+    }
+  }
+</script>
+
+<style>
+.popup-root {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 750rpx;
+  height: 100%;
+  flex: 1;
+  background-color: rgba(0, 0, 0, 0.3);
+  justify-content: center;
+  align-items: center;
+  z-index: 99;
+}
+</style>

package/uni-ui/lib/uni-popup/uni-popup.vue

@@ -20,7 +20,7 @@
         :show="showTrans"
         @click="onTap"
       >
-        <view class="uni-popup__wrapper" :style="{ backgroundColor: bg }" :class="[popupstyle]" @click="clear">
+        <view class="uni-popup__wrapper" :style="getStyles" :class="[popupstyle]" @click="clear">
           <slot />
         </view>
       </uni-transition>
@@ -30,10 +30,12 @@
     <!-- #endif -->
   </view>
 </template>
+
 <script>
 // #ifdef H5
 import keypress from './keypress.js';
 // #endif
+
 /**
  * PopUp 弹出层
  * @description 弹出层组件，为了解决遮罩弹层的问题
@@ -52,10 +54,12 @@ import keypress from './keypress.js';
  * @property {Boolean} isMaskClick = [true|false] 蒙版点击是否关闭弹窗
  * @property {String}  backgroundColor 主窗口背景色
  * @property {String}  maskBackgroundColor 蒙版颜色
+ * @property {String}  borderRadius 设置圆角(左上、右上、右下和左下) 示例:"10px 10px 10px 10px"
  * @property {Boolean} safeArea		   是否适配底部安全区
  * @event {Function} change 打开关闭弹窗触发，e={show: false}
  * @event {Function} maskClick 点击遮罩触发
  */
+
 export default {
   name: 'uniPopup',
   components: {
@@ -97,8 +101,12 @@ export default {
     maskBackgroundColor: {
       type: String,
       default: 'rgba(0, 0, 0, 0.4)'
+    },
+    borderRadius: {
+      type: String
     }
   },
+
   watch: {
     /**
      * 监听type类型
@@ -168,6 +176,8 @@ export default {
         backgroundColor: 'rgba(0, 0, 0, 0.4)'
       },
       transClass: {
+        backgroundColor: 'transparent',
+        borderRadius: this.borderRadius || '0',
         position: 'fixed',
         left: 0,
         right: 0
@@ -178,6 +188,13 @@ export default {
     };
   },
   computed: {
+    getStyles() {
+      let res = { backgroundColor: this.bg };
+      if (this.borderRadius || '0') {
+        res = Object.assign(res, { borderRadius: this.borderRadius });
+      }
+      return res;
+    },
     isDesktop() {
       return this.popupWidth >= 500 && this.popupHeight >= 500;
     },
@@ -190,7 +207,12 @@ export default {
   },
   mounted() {
     const fixSize = () => {
+      // #ifdef MP-WEIXIN
+      const { windowWidth, windowHeight, windowTop, safeArea, screenHeight, safeAreaInsets } = uni.getWindowInfo();
+      // #endif
+      // #ifndef MP-WEIXIN
       const { windowWidth, windowHeight, windowTop, safeArea, screenHeight, safeAreaInsets } = uni.getSystemInfoSync();
+      // #endif
       this.popupWidth = windowWidth;
       this.popupHeight = windowHeight + (windowTop || 0);
       // TODO fix by mehaotian 是否适配底部安全区 ,目前微信ios 、和 app ios 计算有差异，需要框架修复
@@ -225,6 +247,12 @@ export default {
     this.setH5Visible();
   },
   // #endif
+  activated() {
+    this.setH5Visible(!this.showPopup);
+  },
+  deactivated() {
+    this.setH5Visible(true);
+  },
   created() {
     // this.mkclick =  this.isMaskClick || this.maskClick
     if (this.isMaskClick === null && this.maskClick === null) {
@@ -244,10 +272,10 @@ export default {
     this.maskClass.backgroundColor = this.maskBackgroundColor;
   },
   methods: {
-    setH5Visible() {
+    setH5Visible(visible = true) {
       // #ifdef H5
       // fix by mehaotian 处理 h5 滚动穿透的问题
-      document.getElementsByTagName('body')[0].style.overflow = 'visible';
+      document.getElementsByTagName('body')[0].style.overflow = visible ? 'visible' : 'hidden';
       // #endif
     },
     /**
@@ -269,6 +297,7 @@ export default {
       // #endif
       this.clearPropagation = true;
     },
+
     open(direction) {
       // fix by mehaotian 处理快速打开关闭的情况
       if (this.showPopup) {
@@ -305,6 +334,7 @@ export default {
     touchstart() {
       this.clearPropagation = false;
     },
+
     onTap() {
       if (this.clearPropagation) {
         // fix by mehaotian 兼容 nvue
@@ -325,13 +355,15 @@ export default {
         position: 'fixed',
         left: 0,
         right: 0,
-        backgroundColor: this.bg
+        backgroundColor: this.bg,
+        borderRadius: this.borderRadius || '0'
       };
       // TODO 兼容 type 属性 ，后续会废弃
       if (type) return;
       this.showPopup = true;
       this.showTrans = true;
       this.$nextTick(() => {
+        this.showPoptrans();
         if (this.messageChild && this.type === 'message') {
           this.messageChild.timerClose();
         }
@@ -349,19 +381,25 @@ export default {
         right: 0,
         bottom: 0,
         paddingBottom: this.safeAreaInsets + 'px',
-        backgroundColor: this.bg
+        backgroundColor: this.bg,
+        borderRadius: this.borderRadius || '0'
       };
       // TODO 兼容 type 属性 ，后续会废弃
       if (type) return;
-      this.showPopup = true;
-      this.showTrans = true;
+      this.showPoptrans();
     },
     /**
      * 中间弹出样式处理
      */
     center(type) {
       this.popupstyle = 'center';
+      //微信小程序下，组合动画会出现文字向上闪动问题，再此做特殊处理
+      // #ifdef MP-WEIXIN
+      this.ani = ['fade'];
+      // #endif
+      // #ifndef MP-WEIXIN
       this.ani = ['zoom-out', 'fade'];
+      // #endif
       this.transClass = {
         position: 'fixed',
         /* #ifndef APP-NVUE */
@@ -373,12 +411,12 @@ export default {
         right: 0,
         top: 0,
         justifyContent: 'center',
-        alignItems: 'center'
+        alignItems: 'center',
+        borderRadius: this.borderRadius || '0'
       };
       // TODO 兼容 type 属性 ，后续会废弃
       if (type) return;
-      this.showPopup = true;
-      this.showTrans = true;
+      this.showPoptrans();
     },
     left(type) {
       this.popupstyle = 'left';
@@ -389,6 +427,7 @@ export default {
         bottom: 0,
         top: 0,
         backgroundColor: this.bg,
+        borderRadius: this.borderRadius || '0',
         /* #ifndef APP-NVUE */
         display: 'flex',
         flexDirection: 'column'
@@ -396,8 +435,7 @@ export default {
       };
       // TODO 兼容 type 属性 ，后续会废弃
       if (type) return;
-      this.showPopup = true;
-      this.showTrans = true;
+      this.showPoptrans();
     },
     right(type) {
       this.popupstyle = 'right';
@@ -408,6 +446,7 @@ export default {
         right: 0,
         top: 0,
         backgroundColor: this.bg,
+        borderRadius: this.borderRadius || '0',
         /* #ifndef APP-NVUE */
         display: 'flex',
         flexDirection: 'column'
@@ -415,12 +454,66 @@ export default {
       };
       // TODO 兼容 type 属性 ，后续会废弃
       if (type) return;
-      this.showPopup = true;
-      this.showTrans = true;
+      this.showPoptrans();
+    },
+    showPoptrans() {
+      this.$nextTick(() => {
+        this.showPopup = true;
+        this.showTrans = true;
+      });
     }
   }
 };
 </script>
 <style>
-@import 'style.css';
+.uni-popup {
+  position: fixed;
+  /* #ifndef APP-NVUE */
+  z-index: 99;
+
+  /* #endif */
+}
+.uni-popup.top,
+.uni-popup.left,
+.uni-popup.right {
+  /* #ifdef H5 */
+  top: var(--window-top);
+  /* #endif */
+  /* #ifndef H5 */
+  top: 0;
+  /* #endif */
+}
+
+.uni-popup .uni-popup__wrapper {
+  /* #ifndef APP-NVUE */
+  display: block;
+  /* #endif */
+  position: relative;
+
+  /* iphonex 等安全区设置，底部安全区适配 */
+  /* #ifndef APP-NVUE */
+  /* padding-bottom: constant(safe-area-inset-bottom); */
+  /* padding-bottom: env(safe-area-inset-bottom); */
+  /* #endif */
+}
+.uni-popup .uni-popup__wrapper.left,
+.uni-popup .uni-popup__wrapper.right {
+  /* #ifdef H5 */
+  padding-top: var(--window-top);
+  /* #endif */
+  /* #ifndef H5 */
+  padding-top: 0;
+  /* #endif */
+  flex: 1;
+}
+
+.fixforpc-z-index {
+  /* #ifndef APP-NVUE */
+  z-index: 999;
+  /* #endif */
+}
+
+.fixforpc-top {
+  top: 0;
+}
 </style>