11

uni_modules/uni-popup/changelog.md

@@ -1,3 +1,37 @@
+## 1.9.11（2025-08-20）
+- 修复 uni-popup-dialog组件设置 borderRadius 不生效的 Bug
+## 1.9.10（2025-07-18）
+- 修复 nvue 下弹窗样式错乱的问题 ，更新依赖 uni-transition 组件
+- 更新 示例取消 borderRadius 属性 ，如需内容圆角，用户应该直接在内容插槽中实现
+## 1.9.9（2025-06-11）
+- 修复 uni-popup-dialog 中 setVal 方法报错的问题
+- 修复 uni-popup-dialog 数据双向绑定问题。
+## 1.9.8（2025-04-16）
+- 修复 更新组件示例 ，解决更新数据或保存项目导致弹窗消失的问题
+## 1.9.7（2025-04-14）
+- 修复 uni-popup-dialog 弹出框在vue3中双向绑定问题
+## 1.9.6（2025-01-08）
+- 修复 示例中过期图片地址
+## 1.9.5（2024-10-15）
+- 修复 微信小程序中的getSystemInfo警告
+## 1.9.2（2024-09-21）
+- 修复 uni-popup在android上的重复点击弹出位置不正确的bug
+## 1.9.1（2024-04-02）
+- 修复 uni-popup-dialog vue3下使用value无法进行绑定的bug(双向绑定兼容旧写法)
+## 1.9.0（2024-03-28）
+- 修复 uni-popup-dialog 双向绑定时初始化逻辑修正
+## 1.8.9（2024-03-20）
+- 修复 uni-popup-dialog 数据输入时修正为双向绑定
+## 1.8.8（2024-02-20）
+- 修复 uni-popup 在微信小程序下出现文字向上闪动的bug
+## 1.8.7（2024-02-02）
+- 新增 uni-popup-dialog 新增属性focus：input模式下，是否自动自动聚焦
+## 1.8.6（2024-01-30）
+- 新增 uni-popup-dialog 新增属性maxLength:限制输入框字数
+## 1.8.5（2024-01-26）
+- 新增 uni-popup-dialog 新增属性showClose:控制关闭按钮的显示
+## 1.8.4（2023-11-15）
+- 新增 uni-popup 支持uni-app-x 注意暂时仅支持 `maskClick` `@open` `@close`
 ## 1.8.3（2023-04-17）
 - 修复 uni-popup 重复打开时的 bug
 ## 1.8.2（2023-02-02）

uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="uni-popup-dialog">
+	<view class="uni-popup-dialog" :style="{ borderRadius }">
 		<view class="uni-dialog-title">
 			<text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{titleText}}</text>
 		</view>
@@ -10,14 +10,15 @@
 		</view>
 		<view v-else class="uni-dialog-content">
 			<slot>
-				<input class="uni-dialog-input" v-model="val" :type="inputType" :placeholder="placeholderText" :focus="focus" >
+				<input class="uni-dialog-input" :maxlength="maxlength" v-model="val" :type="inputType"
+					:placeholder="placeholderText" :focus="focus">
 			</slot>
 		</view>
 		<view class="uni-dialog-button-group">
-			<view class="uni-dialog-button" @click="closeDialog">
+			<view class="uni-dialog-button" v-if="showClose" @click="closeDialog">
 				<text class="uni-dialog-button-text">{{closeText}}</text>
 			</view>
-			<view class="uni-dialog-button uni-border-left" @click="onOk">
+			<view class="uni-dialog-button" :class="showClose?'uni-border-left':''" @click="onOk">
 				<text class="uni-dialog-button-text uni-button-color">{{okText}}</text>
 			</view>
 		</view>
@@ -31,13 +32,16 @@
 		initVueI18n
 	} from '@dcloudio/uni-i18n'
 	import messages from '../uni-popup/i18n/index.js'
-	const {	t } = initVueI18n(messages)
+	const {
+		t
+	} = initVueI18n(messages)
 	/**
 	 * PopUp 弹出层-对话框样式
 	 * @description 弹出层-对话框样式
 	 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
 	 * @property {String} value input 模式下的默认值
 	 * @property {String} placeholder input 模式下输入提示
+	 * @property {Boolean} focus input模式下是否自动聚焦，默认为true
 	 * @property {String} type = [success|warning|info|error] 主题样式
 	 *  @value success 成功
 	 * 	@value warning 提示
@@ -46,8 +50,10 @@
 	 * @property {String} mode = [base|input] 模式、
 	 * 	@value base 基础对话框
 	 * 	@value input 可输入对话框
+	 * @showClose {Boolean} 是否显示关闭按钮
 	 * @property {String} content 对话框内容
 	 * @property {Boolean} beforeClose 是否拦截取消事件
+	 * @property {Number} maxlength 输入
 	 * @event {Function} confirm 点击确认按钮触发
 	 * @event {Function} close 点击取消按钮触发
 	 */
@@ -55,16 +61,30 @@
 	export default {
 		name: "uniPopupDialog",
 		mixins: [popup],
-		emits:['confirm','close'],
+		emits: ['confirm', 'close', 'update:modelValue', 'input'],
 		props: {
-			inputType:{
+			inputType: {
 				type: String,
 				default: 'text'
 			},
+			showClose: {
+				type: Boolean,
+				default: true
+			},
+			// #ifdef VUE2
 			value: {
 				type: [String, Number],
 				default: ''
 			},
+			// #endif
+			// #ifdef VUE3
+			modelValue: {
+				type: [Number, String],
+				default: ''
+			},
+			// #endif
+
+
 			placeholder: {
 				type: [String, Number],
 				default: ''
@@ -89,19 +109,30 @@
 				type: Boolean,
 				default: false
 			},
-			cancelText:{
+			cancelText: {
 				type: String,
 				default: ''
 			},
-			confirmText:{
+			confirmText: {
 				type: String,
 				default: ''
+			},
+			maxlength: {
+				type: Number,
+				default: -1,
+			},
+			focus: {
+				type: Boolean,
+				default: true,
+			},
+		    borderRadius: {
+				type: String,
+				default: '11px',
 			}
 		},
 		data() {
 			return {
 				dialogType: 'error',
-				focus: false,
 				val: ""
 			}
 		},
@@ -129,7 +160,22 @@
 				}
 			},
 			value(val) {
-				this.val = val
+				this.setVal(val)
+			},
+			// #ifdef VUE3
+			modelValue(val) {
+				this.setVal(val)
+			},
+			// #endif
+			val(val) {
+				// #ifdef VUE2
+				// TODO 兼容 vue2
+				this.$emit('input', val);
+				// #endif
+				// #ifdef VUE3
+				// TODO　兼容　vue3
+				this.$emit('update:modelValue', val);
+				// #endif
 			}
 		},
 		created() {
@@ -138,25 +184,35 @@
 			// this.popup.closeMask()
 			if (this.mode === 'input') {
 				this.dialogType = 'info'
-				this.val = this.value
+				this.val = this.value;
+				// #ifdef VUE3
+				this.val = this.modelValue;
+				// #endif
 			} else {
 				this.dialogType = this.type
 			}
 		},
-		mounted() {
-			// this.focus = true
-		},
 		methods: {
+			/**
+			 * 给val属性赋值
+			 */
+			setVal(val) {
+				if (this.maxlength != -1 && this.mode === 'input') {
+					this.val = val.slice(0, this.maxlength);
+				} else {
+					this.val = val
+				}
+			},
 			/**
 			 * 点击确认按钮
 			 */
 			onOk() {
-				if (this.mode === 'input'){
+				if (this.mode === 'input') {
 					this.$emit('confirm', this.val)
-				}else{
+				} else {
 					this.$emit('confirm')
 				}
-				if(this.beforeClose) return
+				if (this.beforeClose) return
 				this.popup.close()
 			},
 			/**
@@ -164,20 +220,19 @@
 			 */
 			closeDialog() {
 				this.$emit('close')
-				if(this.beforeClose) return
+				if (this.beforeClose) return
 				this.popup.close()
 			},
-			close(){
+			close() {
 				this.popup.close()
 			}
 		}
 	}
 </script>
 
-<style lang="scss" >
+<style lang="scss">
 	.uni-popup-dialog {
 		width: 300px;
-		border-radius: 11px;
 		background-color: #fff;
 	}
 

uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue

@@ -3,14 +3,11 @@
 		<view class="uni-share-title"><text class="uni-share-title-text">{{shareTitleText}}</text></view>
 		<view class="uni-share-content">
 			<view class="uni-share-content-box">
-				<button class="uni-share-content-item" open-type="share" @click.stop="select('0')">
-					<image class="uni-share-image" :src="bottomData[0].icon" mode="aspectFill"></image>
-					<text class="uni-share-text">{{bottomData[0].text}}</text>
-				</button>
-				<button class="uni-share-content-item" @click.stop="select('1')">
-					<image class="uni-share-image" :src="bottomData[1].icon" mode="aspectFill"></image>
-					<text class="uni-share-text">{{bottomData[1].text}}</text>
-				</button>
+				<view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)">
+					<image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
+					<text class="uni-share-text">{{item.text}}</text>
+				</view>
+
 			</view>
 		</view>
 		<view class="uni-share-button-box">
@@ -42,16 +39,37 @@
 		},
 		data() {
 			return {
+				// TODO 替换为自己的图标
 				bottomData: [{
 						text: '微信',
-						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c2b17470-50be-11eb-b680-7980c8a877b8.png',
+						icon: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
 						name: 'wx'
 					},
 					{
-						text: '朋友圈',
-						icon: '/static/images/pyq.png',
-						name: 'pyq'
-					}
+						text: '支付宝',
+						icon: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
+						name: 'ali'
+					},
+					{
+						text: 'QQ',
+						icon: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
+						name: 'qq'
+					},
+					{
+						text: '新浪',
+						icon: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
+						name: 'sina'
+					},
+					// {
+					// 	text: '百度',
+					// 	icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/1ec6e920-50bf-11eb-8a36-ebb87efcf8c0.png',
+					// 	name: 'copy'
+					// },
+					// {
+					// 	text: '其他',
+					// 	icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/2e0fdfe0-50bf-11eb-b997-9918a5dda011.png',
+					// 	name: 'more'
+					// }
 				]
 			}
 		},
@@ -68,18 +86,11 @@
 			/**
 			 * 选择内容
 			 */
-			select(index) {
-				if(index == 1){
-					uni.showModal({
-						title: "提示",
-						content: "请点击右上角“...”转发朋友圈"
-					})
-				}else{
+			select(item, index) {
 				this.$emit('select', {
+					item,
 					index
 				})
-				}
-				
 				this.close()
 
 			},

uni_modules/uni-popup/components/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>

uni_modules/uni-popup/components/uni-popup/uni-popup.vue

@@ -5,7 +5,7 @@
 				:duration="duration" :show="showTrans" @click="onTap" />
 			<uni-transition key="2" :mode-class="ani" name="content" :styles="transClass" :duration="duration"
 				: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>
@@ -39,6 +39,7 @@
 	 * @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 点击遮罩触发
@@ -86,6 +87,9 @@
 				type: String,
 				default: 'rgba(0, 0, 0, 0.4)'
 			},
+			borderRadius:{
+				type: String,
+			}
 		},
 
 		watch: {
@@ -157,16 +161,25 @@
 					backgroundColor: 'rgba(0, 0, 0, 0.4)'
 				},
 				transClass: {
+					backgroundColor: 'transparent',
+					borderRadius: this.borderRadius || "0",
 					position: 'fixed',
 					left: 0,
 					right: 0
 				},
 				maskShow: true,
 				mkclick: true,
-				popupstyle: this.isDesktop ? 'fixforpc-top' : 'top'
+				popupstyle: 'top'
 			}
 		},
 		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
 			},
@@ -179,6 +192,17 @@
 		},
 		mounted() {
 			const fixSize = () => {
+				// #ifdef MP-WEIXIN
+				const {
+					windowWidth,
+					windowHeight,
+					windowTop,
+					safeArea,
+					screenHeight,
+					safeAreaInsets
+				} = uni.getWindowInfo()
+				// #endif
+				// #ifndef MP-WEIXIN
 				const {
 					windowWidth,
 					windowHeight,
@@ -187,6 +211,7 @@
 					screenHeight,
 					safeAreaInsets
 				} = uni.getSystemInfoSync()
+				// #endif
 				this.popupWidth = windowWidth
 				this.popupHeight = windowHeight + (windowTop || 0)
 				// TODO fix by mehaotian 是否适配底部安全区 ,目前微信ios 、和 app ios 计算有差异，需要框架修复
@@ -221,6 +246,12 @@
 			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) {
@@ -240,10 +271,10 @@
 			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
 			},
 			/**
@@ -323,13 +354,15 @@
 					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()
 					}
@@ -347,19 +380,25 @@
 					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 */
@@ -371,12 +410,12 @@
 					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'
@@ -387,6 +426,7 @@
 					bottom: 0,
 					top: 0,
 					backgroundColor: this.bg,
+					borderRadius:this.borderRadius || "0",
 					/* #ifndef APP-NVUE */
 					display: 'flex',
 					flexDirection: 'column'
@@ -394,8 +434,7 @@
 				}
 				// TODO 兼容 type 属性 ，后续会废弃
 				if (type) return
-				this.showPopup = true
-				this.showTrans = true
+				this.showPoptrans()
 			},
 			right(type) {
 				this.popupstyle = 'right'
@@ -406,6 +445,7 @@
 					right: 0,
 					top: 0,
 					backgroundColor: this.bg,
+					borderRadius:this.borderRadius || "0",
 					/* #ifndef APP-NVUE */
 					display: 'flex',
 					flexDirection: 'column'
@@ -413,8 +453,13 @@
 				}
 				// TODO 兼容 type 属性 ，后续会废弃
 				if (type) return
+				this.showPoptrans()
+			},
+			showPoptrans(){
+				this.$nextTick(()=>{
 					this.showPopup = true
 					this.showTrans = true
+				})
 			}
 		}
 	}
@@ -424,6 +469,7 @@
 		position: fixed;
 		/* #ifndef APP-NVUE */
 		z-index: 99;
+
 		/* #endif */
 		&.top,
 		&.left,
@@ -439,7 +485,6 @@
 		.uni-popup__wrapper {
 			/* #ifndef APP-NVUE */
 			display: block;
-			border-radius: 10px;
 			/* #endif */
 			position: relative;
 

uni_modules/uni-popup/package.json

@@ -1,7 +1,7 @@
 {
   "id": "uni-popup",
   "displayName": "uni-popup 弹出层",
-	"version": "1.8.3",
+  "version": "1.9.11",
   "description": " Popup 组件，提供常用的弹层",
   "keywords": [
     "uni-ui",
@@ -9,10 +9,12 @@
     "弹窗",
     "popup",
     "弹框"
-    ],
+],
   "repository": "https://github.com/dcloudio/uni-ui",
   "engines": {
-		"HBuilderX": ""
+    "HBuilderX": "",
+    "uni-app": "^4.07",
+    "uni-app-x": ""
   },
   "directories": {
     "example": "../../temps/example_temps"
@@ -35,7 +37,10 @@
       "permissions": "无"
     },
     "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
-        "type": "component-vue"
+    "type": "component-vue",
+    "darkmode": "x",
+    "i18n": "x",
+    "widescreen": "x"
   },
   "uni_modules": {
     "dependencies": [
@@ -45,41 +50,56 @@
     "encrypt": [],
     "platforms": {
       "cloud": {
-				"tcb": "y",
-				"aliyun": "y"
+        "tcb": "x",
+        "aliyun": "x",
+        "alipay": "x"
       },
       "client": {
-				"App": {
-					"app-vue": "y",
-					"app-nvue": "y"
+        "uni-app": {
+          "vue": {
+            "vue2": "√",
+            "vue3": "√"
+          },
+          "web": {
+            "safari": "√",
+            "chrome": "√"
           },
-				"H5-mobile": {
-					"Safari": "y",
-					"Android Browser": "y",
-					"微信浏览器(Android)": "y",
-					"QQ浏览器(Android)": "y"
+          "app": {
+            "vue": "√",
+            "nvue": "√",
+            "android": "√",
+            "ios": "√",
+            "harmony": "√"
           },
-				"H5-pc": {
-					"Chrome": "y",
-					"IE": "y",
-					"Edge": "y",
-					"Firefox": "y",
-					"Safari": "y"
+          "mp": {
+            "weixin": "√",
+            "alipay": "√",
+            "toutiao": "√",
+            "baidu": "√",
+            "kuaishou": "-",
+            "jd": "-",
+            "harmony": "-",
+            "qq": "√",
+            "lark": "-"
           },
-				"小程序": {
-					"微信": "y",
-					"阿里": "y",
-					"百度": "y",
-					"字节跳动": "y",
-					"QQ": "y"
+          "quickapp": {
+            "huawei": "-",
+            "union": "-"
+          }
         },
-				"快应用": {
-					"华为": "u",
-					"联盟": "u"
+        "uni-app-x": {
+          "web": {
+            "safari": "√",
+            "chrome": "√"
           },
-                "Vue": {
-                    "vue2": "y",
-                    "vue3": "y"
+          "app": {
+            "android": "√",
+            "ios": "√",
+            "harmony": "√"
+          },
+          "mp": {
+            "weixin": "√"
+          }
         }
       }
     }