uview-plus 3.1.51 → 3.2.3

package/components/u-dropdown-item/u-dropdown-item.vue

@@ -1,148 +1,121 @@
-<template>
-	<view class="u-drawdown-item">
-		<u-overlay
-			customStyle="top: 126px"
-			:show="show"
-			:closeOnClickOverlay="closeOnClickOverlay"
-			@click="overlayClick"
-		></u-overlay>
-		<view
-			class="u-drawdown-item__content"
-			:style="[style]"
-			:animation="animationData"
-			ref="animation"
-		>
-			<slot />
-		</view>
-	</view>
-</template>
-
-<script>
-	// #ifdef APP-NVUE
-	const animation = uni.requireNativePlugin('animation')
-	const dom = uni.requireNativePlugin('dom')
-	// #endif
-	import props from './props.js';
-	import mpMixin from '../../libs/mixin/mpMixin.js';
-	import mixin from '../../libs/mixin/mixin.js';
-	/**
-	 * Drawdownitem
-	 * @description 
-	 * @tutorial url
-	 * @property {String}
-	 * @event {Function}
-	 * @example
-	 */
-	export default {
-		name: 'u-drawdown-item',
-		mixins: [mpMixin, mixin, props],
-		data() {
-			return {
-				show: false,
-				top: '126px',
-				// uni.createAnimation的导出数据
-				animationData: {},
-			}
-		},
-		mounted() {
-			this.init()
-		},
-		watch: {
-			// 发生变化时，需要去更新父组件对应的值
-			dataChange(newValue, oldValue) {
-				this.updateParentData()
-			}
-		},
-		computed: {
-			// 监听对应变量的变化
-			dataChange() {
-				return [this.title, this.disabled]
-			},
-			style() {
-				const style = {
-					zIndex: 10071,
-					position: 'fixed',
-					display: 'flex',
-					left: 0,
-					right: 0
-				}
-				style.top = uni.$u.addUnit(this.top)
-				return style
-			}
-		},
-		methods: {
-			init() {
-				this.updateParentData()
-			},
-			// 更新父组件所需的数据
-			updateParentData() {
-				// 获取父组件u-dropdown
-				this.getParentData('u-dropdown')
-				if (!this.parent) uni.$u.error('u-dropdown-item必须配合u-dropdown使用')
-				// 查找父组件menuList数组中对应的标题数据
-				const menuIndex = this.parent.menuList.findIndex(item => item.title === this.title)
-				const menuContent = {
-					title: this.title,
-					disabled: this.disabled
-				}
-				if (menuIndex >= 0) {
-					// 如果能找到，则直接修改
-					this.parent.menuList[menuIndex] = menuContent;
-				} else {
-					// 如果无法找到，则为第一次添加，直接push即可
-					this.parent.menuList.push(menuContent);
-				}
-			},
-			async setContentAnimate(height) {
-				this.animating = true
-				// #ifdef APP-NVUE
-				const ref = this.$refs['animation'].ref
-				animation.transition(ref, {
-					styles: {
-						height: uni.$u.addUnit(height)
-					},
-					duration: this.duration,
-					timingFunction: 'ease-in-out',
-				}, () => {
-					this.animating = false
-				})
-				// #endif
-			
-				// #ifndef APP-NVUE
-				const animation = uni.createAnimation({
-					timingFunction: 'ease-in-out',
-				});
-				animation
-					.height(height)
-					.step({
-						duration: this.duration,
-					})
-					.step()
-				// 导出动画数据给面板的animationData值
-				this.animationData = animation.export()
-				// 标识动画结束
-				uni.$u.sleep(this.duration).then(() => {
-					this.animating = false
-				})
-				// #endif
-			},
-			overlayClick() {
-				this.show = false
-				this.setContentAnimate(0)
-			}
-		},
-	}
-</script>
-
-<style lang="scss" scoped>
-	@import '../../libs/css/components.scss';
-	
-	.u-drawdown-item {
-		
-		&__content {
-			background-color: #FFFFFF;
-			overflow: hidden;
-			height: 0;
-		}
-	}
-</style>
+<template>
+	<view class="u-dropdown-item" v-if="active" @touchmove.stop.prevent="() => {}" @tap.stop.prevent="() => {}">
+		<block v-if="!$slots.default && !$slots.$default">
+			<scroll-view scroll-y="true" :style="{
+				height: $u.addUnit(height)
+			}">
+				<view class="u-dropdown-item__options">
+					<up-cell-group>
+						<up-cell @click="cellClick(item.value)" :arrow="false" :title="item.label" v-for="(item, index) in options"
+						 :key="index" :title-style="{
+							color: modelValue == item.value ? activeColor : inactiveColor
+						}">
+							<up-icon v-if="modelValue == item.value" name="checkbox-mark" :color="activeColor" size="32"></up-icon>
+						</up-cell>
+					</up-cell-group>
+				</view>
+			</scroll-view>
+		</block>
+		<slot v-else />
+	</view>
+</template>
+
+<script>
+    import props from './props.js';
+    import mpMixin from '../../libs/mixin/mpMixin.js';
+	import mixin from '../../libs/mixin/mixin.js';
+	/**
+	 * dropdown-item 下拉菜单
+	 * @description 该组件一般用于向下展开菜单，同时可切换多个选项卡的场景
+	 * @tutorial https://ijry.github.io/uview-plus/components/dropdown.html
+	 * @property {String | Number} v-model 双向绑定选项卡选择值
+	 * @property {String} title 菜单项标题
+	 * @property {Array[Object]} options 选项数据，如果传入了默认slot，此参数无效
+	 * @property {Boolean} disabled 是否禁用此选项卡（默认false）
+	 * @property {String | Number} duration 选项卡展开和收起的过渡时间，单位ms（默认300）
+	 * @property {String | Number} height 弹窗下拉内容的高度(内容超出将会滚动)（默认auto）
+	 * @example <u-dropdown-item title="标题"></u-dropdown-item>
+	 */
+	export default {
+		name: 'u-dropdown-item',
+		mixins: [mpMixin, mixin, props],
+        options: {
+            styleIsolation: 'shared',
+        },
+		data() {
+			return {
+				active: false, // 当前项是否处于展开状态
+				activeColor: '#2979ff', // 激活时左边文字和右边对勾图标的颜色
+				inactiveColor: '#606266', // 未激活时左边文字和右边对勾图标的颜色
+			}
+		},
+		computed: {
+			// 监听props是否发生了变化，有些值需要传递给父组件u-dropdown，无法双向绑定
+			propsChange() {
+				return `${this.title}-${this.disabled}`;
+			}
+		},
+		watch: {
+			propsChange(n) {
+				// 当值变化时，通知父组件重新初始化，让父组件执行每个子组件的init()方法
+				// 将所有子组件数据重新整理一遍
+				if (this.parent) this.parent.init();
+			}
+		},
+		created() {
+			// 父组件的实例
+			this.parent = false;
+		},
+        emits: ['update:modelValue', 'change'],
+		methods: {
+			init() {
+				// 获取父组件u-dropdown
+				let parent = this.$u.$parent.call(this, 'u-dropdown');
+				if (parent) {
+					this.parent = parent;
+					// 将子组件的激活颜色配置为父组件设置的激活和未激活时的颜色
+					this.activeColor = parent.activeColor;
+					this.inactiveColor = parent.inactiveColor;
+					// 将本组件的this，放入到父组件的children数组中，让父组件可以操作本(子)组件的方法和属性
+					// push进去前，显判断是否已经存在了本实例，因为在子组件内部数据变化时，会通过父组件重新初始化子组件
+					let exist = parent.children.find(val => {
+						return this === val;
+					})
+					if (!exist) parent.children.push(this);
+					if (parent.children.length == 1) this.active = true;
+					// 父组件无法监听children的变化，故将子组件的title，传入父组件的menuList数组中
+					parent.menuList.push({
+						title: this.title,
+						disabled: this.disabled
+					});
+				}
+			},
+			// cell被点击
+			cellClick(value) {
+				// 修改通过v-model绑定的值
+                // #ifdef VUE2
+				this.$emit('input', value);
+                // #endif
+		        // #ifdef VUE3
+                this.$emit('update:modelValue', value);
+                // #endif
+				// 通知父组件(u-dropdown)收起菜单
+				this.parent.close();
+				// 发出事件，抛出当前勾选项的value
+				this.$emit('change', value);
+			}
+		},
+		mounted() {
+			this.init();
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import "../../libs/css/components.scss";
+    .u-dropdown-item__options {
+        ::v-deep .u-cell-group {
+            background: #ffffff;
+        }
+    }
+</style>

package/components/u-form/u-form.vue

@@ -23,7 +23,7 @@
 	 * @property {String | Number}				labelWidth		提示文字的宽度，单位px  ( 默认 45 ）
 	 * @property {String}						labelAlign		lable字体的对齐方式   ( 默认 ‘left' ）
 	 * @property {Object}						labelStyle		lable的样式，对象形式
-	 * @example <u--formlabelPosition="left" :model="model1" :rules="rules" ref="form1"></u--form>
+	 * @example <up-formlabelPosition="left" :model="model1" :rules="rules" ref="form1"></up-form>
 	 */
 	export default {
 		name: "u-form",

package/components/u-form-item/props.js

@@ -11,7 +11,7 @@ export default {
             default: () => uni.$u.props.formItem.prop
         },
         // 绑定的规则
-        prop: {
+        rule: {
             type: String,
             default: () => uni.$u.props.formItem.rule
         },
@@ -20,6 +20,11 @@ export default {
             type: [String, Boolean],
             default: () => uni.$u.props.formItem.borderBottom
         },
+        // label的位置，left-左边，top-上边
+        labelPosition: {
+            type: String,
+            default: () => uni.$u.props.formItem.labelPosition
+        },
         // label的宽度，单位px
         labelWidth: {
             type: [String, Number],

package/components/u-form-item/u-form-item.vue

@@ -4,7 +4,7 @@
 			class="u-form-item__body"
 			@tap="clickHandler"
 			:style="[$u.addStyle(customStyle), {
-				flexDirection: parentData.labelPosition === 'left' ? 'row' : 'column'
+                flexDirection: (labelPosition || parentData.labelPosition) === 'left' ? 'row' : 'column'
 			}]"
 		>
 			<!-- 微信小程序中，将一个参数设置空字符串，结果会变成字符串"true" -->

package/components/u-gap/u-gap.vue

@@ -6,6 +6,7 @@
 	import props from './props.js';
 	import mpMixin from '../../libs/mixin/mpMixin.js';
 	import mixin from '../../libs/mixin/mixin.js';
+	import { addStyle, addUnit, deepMerge } from '../../libs/function/index.js';
 	/**
 	 * gap 间隔槽
 	 * @description 该组件一般用于内容块之间的用一个灰色块隔开的场景，方便用户风格统一，减少工作量
@@ -25,11 +26,11 @@
 			gapStyle() {
 				const style = {
 					backgroundColor: this.bgColor,
-					height: uni.$u.addUnit(this.height),
-					marginTop: uni.$u.addUnit(this.marginTop),
-					marginBottom: uni.$u.addUnit(this.marginBottom),
+					height: addUnit(this.height),
+					marginTop: addUnit(this.marginTop),
+					marginBottom: addUnit(this.marginBottom),
 				}
-				return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
+				return deepMerge(style, addStyle(this.customStyle))
 			}
 		}
 	};

package/components/u-grid/u-grid.vue

@@ -71,7 +71,9 @@
 				return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
 			}
 		},
-		emits: ['click'], // 防止事件执行两次
+		emits: ['click'], // 防止事件执行两次
+		    // virtualHost: true ,//将自定义节点设置成虚拟的，更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等
+		},
 		methods: {
 			// 此方法由u-grid-item触发，用于在u-grid发出事件
 			childClick(name) {
@@ -95,6 +97,6 @@
 		justify-content: center;
 		@include flex;
 		flex-wrap: wrap;
-		align-items: center;
+		align-items: center;
 	}
 </style>

package/components/u-grid-item/u-grid-item.vue

@@ -1,7 +1,6 @@
 <template>
-	<!-- #ifndef APP-NVUE -->
-	<view
-		v-if="parentData.col > 0"
+	<!-- #ifndef APP-NVUE -->
+	<view
 	    class="u-grid-item"
 	    hover-class="u-grid-item--hover-class"
 	    :hover-stay-time="200"
@@ -50,6 +49,8 @@
 				},
 				// #ifdef APP-NVUE
 				width: 0, // nvue下才这么计算，vue下放到computed中，否则会因为延时造成闪烁
+				// #endif
+				width: '100%',
 				// #endif
 				classes: [], // 类名集合，用于判断是否显示右边和下边框
 			};
@@ -59,11 +60,11 @@
 		},
 		emits: ['click'],
 		//  微信小程序中 options 选项
-		options: {
-		    virtualHost: true //将自定义节点设置成虚拟的，更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等
-		},
+		// #ifdef MP-WEIXIN
+		    virtualHost: true ,//将自定义节点设置成虚拟的，更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等
+		},
 		computed: {
-			// #ifndef APP-NVUE
+			// #ifndef APP-NVUE || MP-TOUTIAO
 			// vue下放到computed中，否则会因为延时造成闪烁
 			width() {
 				if (this.parentData.col > 0) {

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

@@ -37,7 +37,7 @@
             	    :adjust-position="adjustPosition"
             	    :selection-end="selectionEnd"
             	    :selection-start="selectionStart"
-            	    :password="password || type === 'password' || undefined"
+            	    :password="password || type === 'password' || false"
                     :ignoreCompositionEvent="ignoreCompositionEvent"
             	    @input="onInput"
             	    @blur="onBlur"