uview-plus 3.0.3 → 3.0.4

package/README.md

@@ -12,16 +12,16 @@
 
 ## 说明
 
-uview-plus，是[uni-app](https://uniapp.dcloud.io/)全面兼容nvue的uni-app生态框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水
+uview-plus，是uni-app全面兼容vue3/nvue的uni-app生态框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水。uview-plus是基于uView2.x移植的支持vue3的版本，感谢uView。
 
 ## [官方文档：https://uiadmin.net/uview-plus](https://uiadmin.net/uview-plus)
 
 
 ## 预览
 
-您可以通过**微信**扫码，查看最佳的演示效果。
-<br>
-<br>
+您可以通过**微信**扫码，查看最佳的演示效果。
+<br>
+<br>
 <img src="https://uiadmin.net/uview-plus/common/h5_qrcode.png" width="220" height="220" >
 
 ## 链接

package/changelog.md

@@ -1,3 +1,5 @@
+## 3.0.4（2022-07-10）
+修复u-textarea/u-input/u-datetime-picker/u-number-box/u-radio-group/u-switch/u-rate在vue3下数据绑定
 ## 3.0.3（2022-07-09）
 启用自建演示二维码
 ## 3.0.2（2022-07-09）

package/components/u--input/u--input.vue

@@ -1,6 +1,7 @@
 <template>
 	<uvInput 
 		:value="value"
+		:modelValue="modelValue"
 		:type="type"
 		:fixed="fixed"
 		:disabled="disabled"
@@ -41,6 +42,7 @@
 		@keyboardheightchange="$emit('keyboardheightchange')"
 		@change="e => $emit('change', e)"
 		@input="e => $emit('input', e)"
+		@update:modelValue="e => $emit('update:modelValue', e)"
 		@confirm="e => $emit('confirm', e)"
 		@clear="$emit('clear')"
 		@click="$emit('click')"

package/components/u--textarea/u--textarea.vue

@@ -1,6 +1,7 @@
 <template>
 	<uvTextarea
 		:value="value"
+		:modelValue="modelValue"
 		:placeholder="placeholder"
 		:height="height"
 		:confirmType="confirmType"
@@ -27,6 +28,7 @@
 		@linechange="e => $emit('linechange', e)"
 		@confirm="e => $emit('confirm')"
 		@input="e => $emit('input', e)"
+		@update:modelValue="e => $emit('update:modelValue', e)"
 		@keyboardheightchange="e => $emit('keyboardheightchange')"
 	></uvTextarea>
 </template>

package/components/u-badge/props.js

@@ -10,6 +10,11 @@ export default {
             type: [Number, String],
             default: uni.$u.props.badge.value
         },
+        // 显示的内容
+        modelValue: {
+            type: [Number, String],
+            default: uni.$u.props.badge.modelValue
+        },
         // 是否显示
         show: {
             type: Boolean,

package/components/u-cell/u-cell.vue

@@ -80,6 +80,7 @@
 				return uni.$u.addStyle(this.titleStyle)
 			}
 		},
+		emits: ['click'],
 		methods: {
 			// 点击cell
 			clickHandler(e) {

package/components/u-datetime-picker/props.js

@@ -10,11 +10,20 @@ export default {
             type: Boolean,
             default: uni.$u.props.datetimePicker.showToolbar
         },
+        // #ifdef VUE2
         // 绑定值
         value: {
             type: [String, Number],
             default: uni.$u.props.datetimePicker.value
         },
+        // #endif
+        // #ifdef VUE3
+        // 绑定值
+        modelValue: {
+            type: [String, Number],
+            default: uni.$u.props.datetimePicker.value
+        },
+        // #endif
         // 顶部标题
         title: {
             type: String,

package/components/u-datetime-picker/u-datetime-picker.vue

@@ -95,9 +95,17 @@
 		mounted() {
 			this.init()
 		},
+		// #ifdef VUE3
+		emits: ['close', 'canel', 'confirm', 'change'],
+		// #endif
 		methods: {
 			init() {
+				// #ifdef VUE3
+				this.innerValue = this.correctValue(this.modelValue)
+				// #endif
+				// #ifdef VUE2
 				this.innerValue = this.correctValue(this.value)
+				// #endif
 				this.updateColumnValue(this.innerValue)
 			},
 			// 在微信小程序中，不支持将函数当做props参数，故只能通过ref形式调用
@@ -120,7 +128,12 @@
 					value: this.innerValue,
 					mode: this.mode
 				})
+				// #ifdef VUE3
+				this.$emit('update:modelValue', this.innerValue)
+				// #endif
+				// #ifdef VUE2
 				this.$emit('input', this.innerValue)
+				// #endif
 			},
 			//用正则截取输出值,当出现多组数字时,抛出错误
 			intercept(e,type){

package/components/u-input/props.js

@@ -5,6 +5,10 @@ export default {
 			type: [String, Number],
 			default: uni.$u.props.input.value
 		},
+		modelValue: {
+			type: [String, Number],
+			default: uni.$u.props.input.value
+		},
 		// 输入框类型
 		// number-数字输入键盘，app-vue下可以输入浮点数，app-nvue和小程序平台下只能输入整数
 		// idcard-身份证输入键盘，微信、支付宝、百度、QQ小程序

package/components/u-input/u-input.vue

@@ -136,6 +136,27 @@ export default {
         };
     },
     watch: {
+        // #ifdef VUE3
+        modelValue: {
+            immediate: true,
+            handler(newVal, oldVal) {
+                this.innerValue = newVal;
+                /* #ifdef H5 */
+                // 在H5中，外部value变化后，修改input中的值，不会触发@input事件，此时手动调用值变化方法
+                if (
+                    this.firstChange === false &&
+                    this.changeFromInner === false
+                ) {
+                    this.valueChange();
+                }
+                /* #endif */
+                this.firstChange = false;
+                // 重置changeFromInner的值为false，标识下一次引起默认为外部引起的
+                this.changeFromInner = false;
+            },
+        },
+        // #endif
+        // #ifdef VUE2
         value: {
             immediate: true,
             handler(newVal, oldVal) {
@@ -154,6 +175,7 @@ export default {
                 this.changeFromInner = false;
             },
         },
+        // #endif
     },
     computed: {
         // 是否显示清除控件
@@ -204,6 +226,9 @@ export default {
             return style;
         },
     },
+    // #ifdef VUE3
+    emits: ['update:modelValue', 'focus', 'blur', 'change', 'confirm', 'clear', 'keyboardheightchange'],
+    // #endif
     methods: {
 		// 在微信小程序中，不支持将函数当做props参数，故只能通过ref形式调用
 		setFormatter(e) {
@@ -251,7 +276,12 @@ export default {
         valueChange() {
             const value = this.innerValue;
             this.$nextTick(() => {
+                // #ifdef VUE3
+                this.$emit("update:modelValue", value);
+                // #endif
+                // #ifdef VUE2
                 this.$emit("input", value);
+                // #endif
                 // 标识value值的变化是由内部引起的
                 this.changeFromInner = true;
                 this.$emit("change", value);

package/components/u-number-box/props.js

@@ -5,11 +5,20 @@ export default {
             type: [String, Number],
             default: uni.$u.props.numberBox.name
         },
+        // #ifdef VUE2
         // 用于双向绑定的值，初始化时设置设为默认min值(最小值)
         value: {
             type: [String, Number],
             default: uni.$u.props.numberBox.value
         },
+        // #endif
+        // #ifdef VUE3
+        // 用于双向绑定的值，初始化时设置设为默认min值(最小值)
+        modelValue: {
+            type: [String, Number],
+            default: uni.$u.props.numberBox.value
+        },
+        // #endif
         // 最小值
         min: {
             type: [String, Number],

package/components/u-number-box/u-number-box.vue

@@ -124,12 +124,22 @@
 			watchChange(n) {
 				this.check()
 			},
+			// #ifdef VUE2
 			// 监听v-mode的变化，重新初始化内部的值
 			value(n) {
 				if (n !== this.currentValue) {
 					this.currentValue = this.format(this.value)
 				}
+			},
+			// #endif
+			// #ifdef VUE3
+			// 监听v-mode的变化，重新初始化内部的值
+			modelValue(n) {
+				if (n !== this.currentValue) {
+					this.currentValue = this.format(this.modelValue)
+				}
 			}
+			// #endif
 		},
 		computed: {
 			getCursorSpacing() {
@@ -187,9 +197,17 @@
 		mounted() {
 			this.init()
 		},
+		// #ifdef VUE3
+		emits: ['update:modelValue', 'focus', 'blur', 'overlimit'],
+		// #endif
 		methods: {
 			init() {
+				// #ifdef VUE3
+				this.currentValue = this.format(this.modelValue)
+				// #endif
+				// #ifdef VUE2
 				this.currentValue = this.format(this.value)
+				// #endif
 			},
 			// 格式化整理数据，限制范围
 			format(value) {
@@ -278,7 +296,12 @@
 				// 如果开启了异步变更值，则不修改内部的值，需要用户手动在外部通过v-model变更
 				if (!this.asyncChange) {
 					this.$nextTick(() => {
+						// #ifdef VUE3
+						this.$emit('update:modelValue', value)
+						// #endif
+						// #ifdef VUE2
 						this.$emit('input', value)
+						// #endif
 						this.currentValue = value
 						this.$forceUpdate()
 					})

package/components/u-radio/u-radio.vue

@@ -74,6 +74,7 @@
 					inactiveColor: null,
 					size: 18,
 					value: null,
+					modelValue: null,
 					iconColor: null,
 					placement: 'row',
 					borderBottom: false,
@@ -177,6 +178,7 @@
 		mounted() {
 			this.init()
 		},
+
 		methods: {
 			init() {
 				// 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环引用
@@ -185,7 +187,12 @@
 					uni.$u.error('u-radio必须搭配u-radio-group组件使用')
 				}
 				// 设置初始化时，是否默认选中的状态
+				// #ifdef VUE3
+				this.checked = this.name === this.parentData.modelValue
+				// #endif
+        		// #ifdef VUE2
 				this.checked = this.name === this.parentData.value
+				// #endif
 			},
 			updateParentData() {
 				this.getParentData('u-radio-group')

package/components/u-radio-group/props.js

@@ -1,11 +1,19 @@
 export default {
     props: {
+        // #ifdef VUE3
+        // 绑定的值
+        modelValue: {
+            type: [String, Number, Boolean],
+            default: uni.$u.props.radioGroup.value
+        },
+        // #endif
+        // #ifdef VUE2
         // 绑定的值
         value: {
             type: [String, Number, Boolean],
             default: uni.$u.props.radioGroup.value
         },
-
+        // #endif
         // 是否禁用全部radio
         disabled: {
             type: Boolean,

package/components/u-radio-group/u-radio-group.vue

@@ -42,9 +42,17 @@
 			// 所以需要手动通知子组件，这里返回一个parentData变量，供watch监听，在其中去通知每一个子组件重新从父组件(u-radio-group)
 			// 拉取父组件新的变化后的参数
 			parentData() {
-				return [this.value, this.disabled, this.inactiveColor, this.activeColor, this.size, this.labelDisabled, this.shape,
+				// #ifdef VUE3
+                return [this.modelValue, this.disabled, this.inactiveColor, this.activeColor, this.size, this.labelDisabled, this.shape,
 					this.iconSize, this.borderBottom, this.placement
 				]
+                // #endif
+                // #ifdef VUE2
+                return [this.value, this.disabled, this.inactiveColor, this.activeColor, this.size, this.labelDisabled, this.shape,
+					this.iconSize, this.borderBottom, this.placement
+				]
+				// #endif
+				
 			},
 			bemClass() {
 				// this.bem为一个computed变量，在mixin中
@@ -64,12 +72,14 @@
 		},
 		data() {
 			return {
-
 			}
 		},
 		created() {
 			this.children = []
 		},
+		// #ifdef VUE3
+		emits: ['update:modelValue', 'change'],
+    	// #endif
 		methods: {
 			// 将其他的radio设置为未选中的状态
 			unCheckedOther(childInstance) {
@@ -83,7 +93,12 @@
 					name
 				} = childInstance
 				// 通过emit事件，设置父组件通过v-model双向绑定的值
-				this.$emit('input', name)
+				// #ifdef VUE3
+                this.$emit("update:modelValue", name);
+                // #endif
+                // #ifdef VUE2
+                this.$emit("input", name);
+				// #endif
 				// 发出事件
 				this.$emit('change', name)
 			},

package/components/u-rate/props.js

@@ -1,10 +1,19 @@
 export default {
     props: {
+        // #ifdef VUE3
+        // 用于v-model双向绑定选中的星星数量
+        modelValue: {
+            type: [String, Number],
+            default: uni.$u.props.rate.value
+        },
+        // #endif
+        // #ifdef VUE2
         // 用于v-model双向绑定选中的星星数量
         value: {
             type: [String, Number],
             default: uni.$u.props.rate.value
         },
+        // #endif
         // 要显示的星星数量
         count: {
             type: [String, Number],

package/components/u-rate/u-rate.vue

@@ -116,11 +116,21 @@
 			};
 		},
 		watch: {
+			// #ifdef VUE3
+			modelValue(val) {
+				this.activeIndex = val;
+			},
+			// #endif
+        	// #ifdef VUE2
 			value(val) {
 				this.activeIndex = val;
 			},
+			// #endif
 			activeIndex: 'emitEvent'
 		},
+		// #ifdef VUE3
+		emits: ['update:modelValue', 'change'],
+    	// #endif
 		methods: {
 			init() {
 				uni.$u.sleep().then(() => {
@@ -202,8 +212,13 @@
 			emitEvent() {
 				// 发出change事件
 				this.$emit("change", this.activeIndex);
-				// 同时修改双向绑定的value的值
+				// 同时修改双向绑定的值
+				// #ifdef VUE3
+                this.$emit("update:modelValue", this.activeIndex);
+                // #endif
+                // #ifdef VUE2
 				this.$emit("input", this.activeIndex);
+				// #endif
 			},
 			// 获取当前激活的评分图标
 			getActiveIndex(x,isClick = false) {

package/components/u-switch/props.js

@@ -26,10 +26,18 @@ export default {
             default: uni.$u.props.switch.inactiveColor
         },
         // 通过v-model双向绑定的值
+        // #ifdef VUE3
+        modelValue: {
+            type: [Boolean, String, Number],
+            default: uni.$u.props.switch.value
+        },
+        // #endif
+        // #ifdef VUE2
         value: {
             type: [Boolean, String, Number],
             default: uni.$u.props.switch.value
         },
+        // #endif
         // switch打开时的值
         activeValue: {
             type: [String, Number, Boolean],

package/components/u-switch/u-switch.vue

@@ -52,6 +52,17 @@
 		name: "u-switch",
 		mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
 		watch: {
+			// #ifdef VUE3
+			modelValue: {
+				immediate: true,
+				handler(n) {
+					if(n !== this.inactiveValue && n !== this.activeValue) {
+						uni.$u.error('v-model绑定的值必须为inactiveValue、activeValue二者之一')
+					}
+				}
+			},
+			// #endif
+        	// #ifdef VUE2
 			value: {
 				immediate: true,
 				handler(n) {
@@ -60,6 +71,7 @@
 					}
 				}
 			}
+			// #endif
 		},
 		data() {
 			return {
@@ -68,7 +80,12 @@
 		},
 		computed: {
 			isActive(){
+				// #ifdef VUE3
+				return this.modelValue === this.activeValue;
+				// #endif
+        		// #ifdef VUE2
 				return this.value === this.activeValue;
+				// #endif
 			},
 			switchStyle() {
 				let style = {}
@@ -108,12 +125,20 @@
 				return this.inactiveColor !== '#fff' && this.inactiveColor !== '#ffffff'
 			}
 		},
+		// #ifdef VUE3
+		emits: ['update:modelValue', 'change'],
+    	// #endif
 		methods: {
 			clickHandler() {
 				if (!this.disabled && !this.loading) {
 					const oldValue = this.isActive ? this.inactiveValue : this.activeValue
 					if(!this.asyncChange) {
-						this.$emit('input', oldValue)
+						// #ifdef VUE3
+						this.$emit("update:modelValue", oldValue);
+						// #endif
+						// #ifdef VUE2
+						this.$emit("input", oldValue);
+						// #endif
 					}
 					// 放到下一个生命周期，因为双向绑定的value修改父组件状态需要时间，且是异步的
 					this.$nextTick(() => {

package/components/u-textarea/props.js

@@ -5,6 +5,11 @@ export default {
 			type: [String, Number],
 			default: uni.$u.props.textarea.value
 		},
+		// 输入框的内容
+		modelValue: {
+			type: [String, Number],
+			default: uni.$u.props.textarea.value
+		},
 		// 输入框为空时占位符
 		placeholder: {
 			type: [String, Number],

package/components/u-textarea/u-textarea.vue

@@ -97,6 +97,7 @@ export default {
 		}
 	},
 	watch: {
+        // #ifdef VUE2
 	    value: {
 	        immediate: true,
 	        handler(newVal, oldVal) {
@@ -115,6 +116,27 @@ export default {
 	            this.changeFromInner = false;
 	        },
 	    },
+        // #endif
+        // #ifdef VUE3
+        modelValue: {
+	        immediate: true,
+	        handler(newVal, oldVal) {
+	            this.innerValue = newVal;
+	            /* #ifdef H5 */
+	            // 在H5中，外部value变化后，修改input中的值，不会触发@input事件，此时手动调用值变化方法
+	            if (
+	                this.firstChange === false &&
+	                this.changeFromInner === false
+	            ) {
+	                this.valueChange();
+	            }
+	            /* #endif */
+	            this.firstChange = false;
+	            // 重置changeFromInner的值为false，标识下一次引起默认为外部引起的
+	            this.changeFromInner = false;
+	        },
+	    }
+        // #endif
 	},
     computed: {
         // 组件的类名
@@ -146,6 +168,9 @@ export default {
             return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
         },
     },
+    // #ifdef VUE3
+    emits: ['update:modelValue', 'linechange', 'focus', 'blur', 'change', 'confirm', 'keyboardheightchange'],
+    // #endif
     methods: {
 		// 在微信小程序中，不支持将函数当做props参数，故只能通过ref形式调用
 		setFormatter(e) {
@@ -178,7 +203,12 @@ export default {
 		valueChange() {
 		    const value = this.innerValue;
 		    this.$nextTick(() => {
-		        this.$emit("input", value);
+                // #ifdef VUE3
+                this.$emit("update:modelValue", value);
+                // #endif
+                // #ifdef VUE2
+                this.$emit("input", value);
+                // #endif
 		        // 标识value值的变化是由内部引起的
 		        this.changeFromInner = true;
 		        this.$emit("change", value);

package/components/u-upload/u-upload.vue

@@ -185,6 +185,9 @@
 				}
 			},
 		},
+		// #ifdef VUE3
+		emits: ['error', 'beforeRead', 'oversize', 'afterRead', 'delete', 'clickPreview'],
+		// #endif
 		methods: {
 			formatFileList() {
 				const {

package/index.js

@@ -68,6 +68,9 @@ const install = (Vue) => {
     // #ifndef APP-NVUE
     // 只有vue，挂载到Vue.prototype才有意义，因为nvue中全局Vue.prototype和Vue.mixin是无效的
     Vue.config.globalProperties.$u = $u
+    Vue.config.globalProperties.$nextTick = (cb) => {
+        cb();
+    }
     Vue.mixin(mixin)
     // #endif
 }

package/package.json

@@ -2,8 +2,8 @@
 	"id": "uview-plus",
 	"name": "uview-plus",
 	"displayName": "uview-plus3.0重磅发布，利剑出鞘，一统江湖",
-	"version": "3.0.3",
-	"description": "uview-plus已完美兼容nvue，全面的组件和便捷的工具会让您信手拈来，如鱼得水",
+	"version": "3.0.4",
+	"description": "uview-plus已兼容vue3，全面的组件和便捷的工具会让您信手拈来，如鱼得水",
 	"keywords": [
         "uview",
         "uview-plus",