uview-plus组件更新

src/uni_modules/uview-plus/changelog.md

@@ -1,7 +1,9 @@
-## 3.1.31（2023-05-15）
-本地累计修复一些问题提交
-## 3.0.9（2022-07-14）
-修复u-search双向绑定
+## 3.1.34（2023-07-27）
+修复App打包uni.$u.mpMixin方式sdk暂时不支持导致报错
+## 3.1.33（2023-07-13）
+修复弹窗进入动画、模板页面样式等
+## 3.1.31（2023-07-11）
+修复dayjs引用
 ## 3.0.8（2022-07-12）
 修复u-tag默认宽度撑满容器
 ## 3.0.7（2022-07-12）

src/uni_modules/uview-plus/components/u-back-top/u-back-top.vue

@@ -51,7 +51,7 @@
 	 */
 	export default {
 		name: 'u-back-top',
-		mixins: [mpMixin, mixin,props],
+		mixins: [mpMixin, mixin, props],
 		computed: {
 			backTopStyle() {
 				// 动画组件样式

src/uni_modules/uview-plus/components/u-calendar/header.vue

@@ -21,9 +21,11 @@
 </template>
 
 <script>
+	import mpMixin from '../../libs/mixin/mpMixin.js';
+	import mixin from '../../libs/mixin/mixin.js';
 	export default {
 		name: 'u-calendar-header',
-		mixins: [uni.$u.mpMixin, uni.$u.mixin],
+		mixins: [mpMixin, mixin],
 		props: {
 			// 标题
 			title: {

src/uni_modules/uview-plus/components/u-calendar/month.vue

@@ -35,7 +35,7 @@
 	import mixin from '../../libs/mixin/mixin.js';
 	import defprops from '../../libs/config/props';
 	// import dayjs from '../../libs/util/dayjs.js';
-	import dayjs from 'dayjs'
+	import dayjs from 'dayjs/esm/index'
 	export default {
 		name: 'u-calendar-month',
 		mixins: [mpMixin, mixin],

src/uni_modules/uview-plus/components/u-calendar/u-calendar.vue

@@ -69,7 +69,7 @@ import uMonth from './month.vue'
 import props from './props.js'
 import util from './util.js'
 // import dayjs from '../../libs/util/dayjs.min.js'
-import dayjs from 'dayjs'
+import dayjs from 'dayjs/esm/index'
 import Calendar from '../../libs/util/calendar.js'
 import mpMixin from '../../libs/mixin/mpMixin.js'
 import mixin from '../../libs/mixin/mixin.js'

src/uni_modules/uview-plus/components/u-calendar/util.js

@@ -1,4 +1,4 @@
-import dayjs from 'dayjs'
+import dayjs from 'dayjs/esm/index'
 export default {
     methods: {
         // 设置月份数据

src/uni_modules/uview-plus/components/u-datetime-picker/u-datetime-picker.vue

@@ -34,7 +34,7 @@
 	import mpMixin from '../../libs/mixin/mpMixin.js';
 	import mixin from '../../libs/mixin/mixin.js';
 	// import dayjs from '../../libs/util/dayjs.js';
-	import dayjs from 'dayjs'
+	import dayjs from 'dayjs/esm/index'
 
 	/**
 	 * DatetimePicker 时间日期选择器
@@ -188,7 +188,7 @@
 				// 发出change时间，value为当前选中的时间戳
 				this.$emit('change', {
 					value: selectValue,
-					// #ifndef MP-WEIXIN || MP-TOUTIAO
+					// #ifndef MP-WEIXIN
 					// 微信小程序不能传递this实例，会因为循环引用而报错
 					picker: this.$refs.picker,
 					// #endif

src/uni_modules/uview-plus/components/u-list/u-list.vue

@@ -18,7 +18,7 @@
 		class="u-list"
 		:scroll-into-view="scrollIntoView"
 		:style="[listStyle]"
-		scroll-y
+		:scroll-y="scrollable"
 		:scroll-top="Number(scrollTop)"
 		:lower-threshold="Number(lowerThreshold)"
 		:upper-threshold="Number(upperThreshold)"

src/uni_modules/uview-plus/components/u-message-input/u-message-input.vue

@@ -0,0 +1,318 @@
+<template>
+	<view class="u-char-box">
+		<view class="u-char-flex">
+			<input :disabled="disabledKeyboard" :value="valueModel" type="number" :focus="focus" :maxlength="maxlength" class="u-input" @input="getVal"/>
+			<view v-for="(item, index) in loopCharArr" :key="index">
+				<view :class="[breathe && charArrLength == index ? 'u-breathe' : '', 'u-char-item',
+				charArrLength === index && mode == 'box' ? 'u-box-active' : '',
+				mode === 'box' ? 'u-box' : '']" :style="{
+					fontWeight: bold ? 'bold' : 'normal',
+					fontSize: fontSize + 'rpx',
+					width: width + 'rpx',
+					height: width + 'rpx',
+					color: inactiveColor,
+					borderColor: charArrLength === index && mode == 'box' ? activeColor : inactiveColor
+				}">
+					<view class="u-placeholder-line" :style="{
+							display: charArrLength === index ? 'block' : 'none',
+							height: width * 0.5 +'rpx'
+						}"
+						v-if="mode !== 'middleLine'"
+					></view>
+					<view v-if="mode === 'middleLine' && charArrLength <= index" :class="[breathe && charArrLength == index ? 'u-breathe' : '', charArrLength === index ? 'u-middle-line-active' : '']"
+					 class="u-middle-line" :style="{height: bold ? '4px' : '2px', background: charArrLength === index ? activeColor : inactiveColor}"></view>
+					<view v-if="mode === 'bottomLine'" :class="[breathe && charArrLength == index ? 'u-breathe' : '', charArrLength === index ? 'u-bottom-line-active' : '']"
+					 class="u-bottom-line" :style="{height: bold ? '4px' : '2px', background: charArrLength === index ? activeColor : inactiveColor}"></view>
+					<block v-if="!dotFill"> {{ charArr[index] ? charArr[index] : ''}}</block>
+					<block v-else>
+						<text class="u-dot">{{ charArr[index] ? '●' : ''}}</text>
+					</block>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * messageInput 验证码输入框
+	 * @description 该组件一般用于验证用户短信验证码的场景，也可以结合uView的键盘组件使用
+	 * @tutorial https://www.uviewui.com/components/messageInput.html
+	 * @property {String Number} maxlength 输入字符个数（默认4）
+	 * @property {Boolean} dot-fill 是否用圆点填充（默认false）
+	 * @property {String} mode 模式选择，见上方"基本使用"说明（默认box）
+	 * @property {String Number} value 预置值
+	 * @property {Boolean} breathe 是否开启呼吸效果，见上方说明（默认true）
+	 * @property {Boolean} focus 是否自动获取焦点（默认false）
+	 * @property {Boolean} bold 字体和输入横线是否加粗（默认true）
+	 * @property {String Number} font-size 字体大小，单位rpx（默认60）
+	 * @property {String} active-color 当前激活输入框的样式（默认#2979ff）
+	 * @property {String} inactive-color 非激活输入框的样式，文字颜色同此值（默认#606266）
+	 * @property {String | Number} width 输入框宽度，单位rpx，高等于宽（默认80）
+	 * @property {Boolean} disabled-keyboard 禁止点击输入框唤起系统键盘（默认false）
+	 * @event {Function} change 输入内容发生改变时触发，具体见官网说明
+	 * @event {Function} finish 输入字符个数达maxlength值时触发，见官网说明
+	 * @example <u-message-input mode="bottomLine"></u-message-input>
+	 */
+	export default {
+		name: "u-message-input",
+		props: {
+			// 最大输入长度
+			maxlength: {
+				type: [Number, String],
+				default: 4
+			},
+			// 是否用圆点填充
+			dotFill: {
+				type: Boolean,
+				default: false
+			},
+			// 显示模式，box-盒子模式，bottomLine-横线在底部模式，middleLine-横线在中部模式
+			mode: {
+				type: String,
+				default: "box"
+			},
+			// 预置值
+			modelValue: {
+				type: [String, Number],
+				default: ''
+			},
+			// 当前激活输入item，是否带有呼吸效果
+			breathe: {
+				type: Boolean,
+				default: true
+			},
+			// 是否自动获取焦点
+			focus: {
+				type: Boolean,
+				default: false
+			},
+			// 字体是否加粗
+			bold: {
+				type: Boolean,
+				default: false
+			},
+			// 字体大小
+			fontSize: {
+				type: [String, Number],
+				default: 60
+			},
+			// 激活样式
+			activeColor: {
+				type: String,
+				default: '#2979ff'
+			},
+			// 未激活的样式
+			inactiveColor: {
+				type: String,
+				default: '#606266'
+			},
+			// 输入框的大小，单位rpx，宽等于高
+			width: {
+				type: [Number, String],
+				default: '80'
+			},
+			// 是否隐藏原生键盘，如果想用自定义键盘的话，需设置此参数为true
+			disabledKeyboard: {
+				type: Boolean,
+				default: false
+			}
+		},
+		watch: {
+			// maxlength: {
+			// 	// 此值设置为true，会在组件加载后无需maxlength变化就会执行一次本监听函数，无需再created生命周期中处理
+			// 	immediate: true,
+			// 	handler(val) {
+			// 		this.maxlength = Number(val);
+			// 	}
+			// }, 
+			modelValue: {
+				immediate: true,
+				handler(val) {
+					// 转为字符串
+					val = String(val);
+					// 超出部分截掉
+					this.valueModel = val.substring(0, this.maxlength);
+				}
+			},
+		},
+		data() {
+			return {
+				valueModel: ""
+			}
+		},
+		emits: ['change', 'finish'],
+		computed: {
+			// 是否显示呼吸灯效果
+			animationClass() {
+				return (index) => {
+					if (this.breathe && this.charArr.length == index) return 'u-breathe';
+					else return '';
+				}
+			},
+			// 用于显示字符
+			charArr() {
+				return this.valueModel.split('');
+			},
+			charArrLength() {
+				return this.charArr.length;
+			},
+			// 根据长度，循环输入框的个数，因为头条小程序数值不能用于v-for
+			loopCharArr() {
+				return new Array(this.maxlength);
+			}
+		},
+		methods: {
+			getVal(e) {
+				let {
+					value
+				} = e.detail
+				this.valueModel = value;
+				// 判断长度是否超出了maxlength值，理论上不会发生，因为input组件设置了maxlength属性值
+				if (String(value).length > this.maxlength) return;
+				// 未达到maxlength之前，发送change事件，达到后发送finish事件
+				this.$emit('change', value);
+				if (String(value).length == this.maxlength) {
+					this.$emit('finish', value);
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	// 定义混入指令，用于在非nvue环境下的flex定义，因为nvue没有display属性，会报错
+	@mixin vue-flex($direction: row) {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		flex-direction: $direction;
+		/* #endif */
+	}
+
+	@keyframes breathe {
+		0% {
+			opacity: 0.3;
+		}
+
+		50% {
+			opacity: 1;
+		}
+
+		100% {
+			opacity: 0.3;
+		}
+	}
+
+	.u-char-box {
+		text-align: center;
+	}
+
+	.u-char-flex {
+		@include vue-flex;
+		justify-content: center;
+		flex-wrap: wrap;
+		position: relative;
+	}
+
+	.u-input {
+		position: absolute;
+		top: 0;
+		left: -100%;
+		width: 200%;
+		height: 100%;
+		text-align: left;
+		z-index: 9;
+		opacity: 0;
+		background: none;
+	}
+
+	.u-char-item {
+		position: relative;
+		width: 90rpx;
+		height: 90rpx;
+		margin: 10rpx 10rpx;
+		font-size: 60rpx;
+		font-weight: bold;
+		color: $u-main-color;
+		line-height: 90rpx;
+		@include vue-flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.u-middle-line {
+		border: none;
+	}
+
+	.u-box {
+		box-sizing: border-box;
+		border: 2rpx solid #cccccc;
+		border-radius: 6rpx;
+	}
+
+	.u-box-active {
+		overflow: hidden;
+		animation-timing-function: ease-in-out;
+		animation-duration: 1500ms;
+		animation-iteration-count: infinite;
+		animation-direction: alternate;
+		border: 2rpx solid $u-primary;
+	}
+
+	.u-middle-line-active {
+		background: $u-primary;
+	}
+
+	.u-breathe {
+		animation: breathe 2s infinite ease;
+	}
+
+	.u-placeholder-line {
+		/* #ifndef APP-NVUE */
+		display: none;
+		/* #endif */
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		width: 2rpx;
+		height: 40rpx;
+		background: #333333;
+		animation: twinkling 1.5s infinite ease;
+	}
+
+	.u-animation-breathe {
+		animation-name: breathe;
+	}
+
+	.u-dot {
+		font-size: 34rpx;
+		line-height: 34rpx;
+	}
+
+	.u-middle-line {
+		height: 4px;
+		background: #000000;
+		width: 80%;
+		position: absolute;
+		border-radius: 2px;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+	}
+
+	.u-bottom-line-active {
+		background: $u-primary;
+	}
+
+	.u-bottom-line {
+		height: 4px;
+		background: #000000;
+		width: 80%;
+		position: absolute;
+		border-radius: 2px;
+		bottom: 0;
+		left: 50%;
+		transform: translate(-50%);
+	}
+</style>

src/uni_modules/uview-plus/components/u-picker/u-picker.vue

@@ -164,7 +164,7 @@ export default {
 			this.setIndexs(value)
 
 			this.$emit('change', {
-				// #ifndef MP-WEIXIN || MP-LARK || MP-TOUTIAO
+				// #ifndef MP-WEIXIN || MP-LARK
 				// 微信小程序不能传递this，会因为循环引用而报错
 				picker: this,
 				// #endif

src/uni_modules/uview-plus/components/u-scroll-list/u-scroll-list.vue

@@ -106,7 +106,7 @@ export default {
 	mixins: [mpMixin, mixin, props],
 	// #endif
 	// #ifdef APP-NVUE
-	mixins: [uni.$u.mpMixin, uni.$u.mixin, nvueMixin, props],
+	mixins: [mpMixin, mixin, nvueMixin, props],
 	// #endif
 	data() {
 		return {

src/uni_modules/uview-plus/components/u-sticky/u-sticky.vue

@@ -153,7 +153,7 @@
 				}
 
 				// APP-Vue和微信平台，通过computedStyle判断是否支持css sticky
-				// #ifdef APP-VUE || MP-WEIXIN
+				// #ifdef APP-VUE || MP-WEIXIN || MP-TOUTIAO
 				this.cssSticky = await this.checkComputedStyle()
 				// #endif
 
@@ -170,7 +170,7 @@
 			// 在APP和微信小程序上，通过uni.createSelectorQuery可以判断是否支持css sticky
 			checkComputedStyle() {
 				// 方法内进行判断，避免在其他平台生成无用代码
-				// #ifdef APP-VUE || MP-WEIXIN
+				// #ifdef APP-VUE || MP-WEIXIN || MP-TOUTIAO
 				return new Promise(resolve => {
 					uni.createSelectorQuery().in(this).select('.u-sticky').fields({
 						computedStyle: ["position"]
@@ -206,7 +206,7 @@
 
 <style lang="scss" scoped>
 	.u-sticky {
-		/* #ifdef APP-VUE || MP-WEIXIN */
+		/* #ifdef APP-VUE || MP-WEIXIN || MP-TOUTIAO */
 		// 此处默认写sticky属性，是为了给微信和APP通过uni.createSelectorQuery查询是否支持css sticky使用
 		position: sticky;
 		/* #endif */

src/uni_modules/uview-plus/components/u-tabbar/u-tabbar.vue

@@ -122,7 +122,6 @@
 		@include flex(column);
 		flex: 1;
 		justify-content: center;
-		box-shadow: 1px 1px 20px rgb(26 26 26 / 10%);
 		
 		&__content {
 			@include flex(column);

src/uni_modules/uview-plus/components/u-transition/transition.js

@@ -1,5 +1,5 @@
 // 定义一个一定时间后自动成功的promise，让调用nextTick方法处，进入下一个then方法
-const nextTick = () => new Promise(resolve => setTimeout(resolve, 1000 / 50))
+const waitTick = () => new Promise(resolve => setTimeout(resolve, 1000 / 50))
 // nvue动画模块实现细节抽离在外部文件
 // #ifdef APP-NVUE
 import animationMap from './nvue-ani-map.js'
@@ -22,6 +22,8 @@ const animation = uni.requireNativePlugin('animation')
 const getStyle = (name) => animationMap[name]
 // #endif
 
+import { nextTick } from 'vue'
+
 export default {
     methods: {
         // 组件被点击发出事件
@@ -30,7 +32,7 @@ export default {
         },
         // #ifndef APP-NVUE
         // vue版本的组件进场处理
-         vueEnter() {
+        async vueEnter() {
             // 动画进入时的类名
             const classNames = getClassNames(this.mode)
             // 定义状态和发出动画进入前事件
@@ -39,7 +41,8 @@ export default {
             this.inited = true
             this.display = true
             this.classes = classNames.enter
-            this.$nextTick(async () => {
+			await nextTick();
+			{
 				// #ifdef H5
 				await uni.$u.sleep(20)
 				// #endif
@@ -50,10 +53,10 @@ export default {
                 this.$emit('afterEnter')
                 // 赋予组件enter-to类名
                 this.classes = classNames['enter-to']
-            })
+            }
         },
         // 动画离场处理
-        vueLeave() {
+        async vueLeave() {
             // 如果不是展示状态，无需执行逻辑
             if (!this.display) return
             const classNames = getClassNames(this.mode)
@@ -63,19 +66,20 @@ export default {
             // 获得类名
             this.classes = classNames.leave
 
-            this.$nextTick(() => {
+            await nextTick();
+			{
                // 动画正在离场的状态
                this.transitionEnded = false
                this.$emit('leave')
                 // 组件执行动画，到了执行的执行时间后，执行一些额外处理
                 setTimeout(this.onTransitionEnd, this.duration)
                 this.classes = classNames['leave-to']
-            })
+            }
         },
         // #endif
         // #ifdef APP-NVUE
         // nvue版本动画进场
-        nvueEnter() {
+        async nvueEnter() {
             // 获得样式的名称
             const currentStyle = getStyle(this.mode)
             // 组件动画状态和发出事件
@@ -90,11 +94,12 @@ export default {
                 opacity: 0
             }
             // 等待弹窗内容渲染完成
-            this.$nextTick(() => {
+            await nextTick();
+			{
                 // 合并样式
                 this.viewStyle = currentStyle.enter
                 Promise.resolve()
-                    .then(nextTick)
+                    .then(waitTick)
                     .then(() => {
                         // 组件开始进入前的事件
                         this.$emit('enter')
@@ -111,7 +116,7 @@ export default {
                         })
                     })
                     .catch(() => {})
-            })
+            }
         },
         nvueLeave() {
             if (!this.display) {
@@ -125,7 +130,7 @@ export default {
             this.viewStyle = currentStyle.leave
             // 放到promise中处理执行过程
             Promise.resolve()
-                .then(nextTick) // 等待几十ms
+                .then(waitTick) // 等待几十ms
                 .then(() => {
                     this.transitionEnded = false
                     // 动画正在离场的状态

src/uni_modules/uview-plus/components/u-transition/u-transition.vue

@@ -47,6 +47,7 @@ export default {
 			classes: '', // 应用的类名
 		}
 	},
+	emits: ['click', 'beforeEnter', 'enter', 'afterEnter', 'beforeLeave', 'leave', 'afterLeave'],
 	computed: {
 	    mergeStyle() {
 	        const { viewStyle, customStyle } = this

src/uni_modules/uview-plus/components/u-upload/u-upload.vue

@@ -181,7 +181,6 @@
 		watch: {
 			// 监听文件列表的变化，重新整理内部数据
 			fileList: {
-				immediate: true,
 				handler() {
 					this.formatFileList()
 				},

src/uni_modules/uview-plus/index.scss

@@ -1,5 +1,6 @@
 // 引入公共基础类
 @import "./libs/css/common.scss";
+@import "./libs/css/flex.scss";
 @import "./libs/css/color.scss";
 
 // 非nvue的样式

src/uni_modules/uview-plus/libs/config/props.js

@@ -93,7 +93,6 @@ import Toolbar from './props/toolbar'
 import Tooltip from './props/tooltip'
 import Transition from './props/transition'
 import Upload from './props/upload'
-import drawer from './props/drawer'
 
 const {
     color
@@ -187,6 +186,5 @@ export default {
     ...Toolbar,
     ...Tooltip,
     ...Transition,
-    ...Upload,
-    ...drawer,
+    ...Upload
 }

src/uni_modules/uview-plus/libs/css/flex.scss

@@ -255,3 +255,42 @@
 	flex-shrink: 1
 }
 
+// 定义内外边距，历遍1-80
+@for $i from 0 through 80 {
+	// 只要双数和能被5除尽的数
+	@if $i % 2 == 0 or $i % 5 == 0 {
+		// 得出：u-margin-30或者u-m-30
+		.u-margin-#{$i}, .u-m-#{$i} {
+			margin: $i + rpx!important;
+		}
+		
+		// 得出：u-padding-30或者u-p-30
+		.u-padding-#{$i}, .u-p-#{$i} {
+			padding: $i + rpx!important;
+		}
+		
+		@each $short, $long in l left, t top, r right, b bottom {
+			// 缩写版，结果如： u-m-l-30
+			// 定义外边距
+			.u-m-#{$short}-#{$i} {
+				margin-#{$long}: $i + rpx!important;
+			}
+			
+			// 定义内边距
+			.u-p-#{$short}-#{$i} {
+				padding-#{$long}: $i + rpx!important;
+			}
+			
+			// 完整版，结果如：u-margin-left-30
+			// 定义外边距
+			.u-margin-#{$long}-#{$i} {
+				margin-#{$long}: $i + rpx!important;
+			}
+			
+			// 定义内边距
+			.u-padding-#{$long}-#{$i} {
+				padding-#{$long}: $i + rpx!important;
+			}
+		}
+	}
+}

src/uni_modules/uview-plus/libs/function/platform.js

@@ -28,6 +28,10 @@ platform = 'nvue'
 platform = 'h5'
 // #endif
 
+// #ifdef MP
+platform = 'mp'
+// #endif
+
 // #ifdef MP-WEIXIN
 platform = 'weixin'
 // #endif
@@ -56,10 +60,6 @@ platform = 'kuaishou'
 platform = '360'
 // #endif
 
-// #ifdef MP
-platform = 'mp'
-// #endif
-
 // #ifdef QUICKAPP-WEBVIEW
 platform = 'quickapp-webview'
 // #endif

src/uni_modules/uview-plus/package.json

@@ -2,7 +2,7 @@
 	"id": "uview-plus",
 	"name": "uview-plus",
 	"displayName": "uview-plus3.0重磅发布，全面的Vue3移动组件库。",
-	"version": "3.1.31",
+	"version": "3.1.34",
 	"description": "uview-plus已兼容vue3，全面的组件和便捷的工具会让您信手拈来，如鱼得水",
 	"keywords": [
         "uview",