uview-plus 3.2.8 → 3.2.9

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

@@ -39,12 +39,12 @@
 	    }
 	    return result
 	}
-	import props from './props.js';
-	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/esm/index'
-
+	import props from './props';
+	import mpMixin from '../../libs/mixin/mpMixin';
+	import mixin from '../../libs/mixin/mixin';
+	import dayjs from 'dayjs/esm/index';
+	import { range, error, padZero } from '../../libs/function/index';
+	import test from '../../libs/function/test';
 	/**
 	 * DatetimePicker 时间日期选择器
 	 * @description 此选择器用于时间日期
@@ -201,12 +201,12 @@
 				let judge = e.match(/\d+/g)
 				//判断是否掺杂数字
 				if(judge.length>1){
-					uni.$u.error("请勿在过滤或格式化函数时添加数字")
+					error("请勿在过滤或格式化函数时添加数字")
 					return 0
 				}else if(type&&judge[0].length==4){//判断是否是年份
 					return judge[0]
 				}else if(judge[0].length>2){
-					uni.$u.error("请勿在过滤或格式化函数时添加数字")
+					error("请勿在过滤或格式化函数时添加数字")
 					return 0
 				}else{
 					return judge[0]
@@ -268,7 +268,7 @@
 			updateIndexs(value) {
 				let values = []
 				const formatter = this.formatter || this.innerFormatter
-				const padZero = uni.$u.padZero
+				const padZero = padZero
 				if (this.mode === 'time') {
 					// 将time模式的时间用:分隔成数组
 				    const timeArr = value.split(':')
@@ -310,7 +310,7 @@
 			    const results = this.getRanges().map(({ type, range }) => {
 			        let values = times(range[1] - range[0] + 1, (index) => {
 			            let value = range[0] + index
-			            value = type === 'year' ? `${value}` : uni.$u.padZero(value)
+			            value = type === 'year' ? `${value}` : padZero(value)
 			            return value
 			        })
 					// 进行过滤
@@ -335,20 +335,20 @@
 			// 得出合法的时间
 			correctValue(value) {
 				const isDateMode = this.mode !== 'time'
-				if (isDateMode && !uni.$u.test.date(value)) {
+				if (isDateMode && !test.date(value)) {
 					// 如果是日期类型，但是又没有设置合法的当前时间的话，使用最小时间为当前时间
 					value = this.minDate
 				} else if (!isDateMode && !value) {
 					// 如果是时间类型，而又没有默认值的话，就用最小时间
-					value = `${uni.$u.padZero(this.minHour)}:${uni.$u.padZero(this.minMinute)}`
+					value = `${padZero(this.minHour)}:${padZero(this.minMinute)}`
 				}
 				// 时间类型
 				if (!isDateMode) {
-					if (String(value).indexOf(':') === -1) return uni.$u.error('时间错误，请传递如12:24的格式')
+					if (String(value).indexOf(':') === -1) return error('时间错误，请传递如12:24的格式')
 					let [hour, minute] = value.split(':')
 					// 对时间补零，同时控制在最小值和最大值之间
-					hour = uni.$u.padZero(uni.$u.range(this.minHour, this.maxHour, Number(hour)))
-					minute = uni.$u.padZero(uni.$u.range(this.minMinute, this.maxMinute, Number(minute)))
+					hour = padZero(range(this.minHour, this.maxHour, Number(hour)))
+					minute = padZero(range(this.minMinute, this.maxMinute, Number(minute)))
 					return `${ hour }:${ minute }`
 				} else {
 					// 如果是日期格式，控制在最小日期和最大日期之间

package/components/u-divider/u-divider.vue

@@ -1,7 +1,7 @@
 <template>
 	<view
 	    class="u-divider"
-	    :style="[$u.addStyle(customStyle)]"
+	    :style="[addStyle(customStyle)]"
 		@tap="click"
 	>
 		<u-line
@@ -29,9 +29,10 @@
 </template>
 
 <script>
-	import props from './props.js';
-	import mpMixin from '../../libs/mixin/mpMixin.js';
-	import mixin from '../../libs/mixin/mixin.js';
+	import props from './props';
+	import mpMixin from '../../libs/mixin/mpMixin';
+	import mixin from '../../libs/mixin/mixin';
+	import { addStyle, addUnit } from '../../libs/function/index';
 	/**
 	 * divider 分割线
 	 * @description 区隔内容的分割线，一般用于页面底部"没有更多"的提示。
@@ -55,7 +56,7 @@
 		computed: {
 			textStyle() {
 				const style = {}
-				style.fontSize = uni.$u.addUnit(this.textSize)
+				style.fontSize = addUnit(this.textSize)
 				style.color = this.textColor
 				return style
 			},
@@ -84,6 +85,7 @@
 		},
 		emits: ["click"],
 		methods: {
+			addStyle,
 			// divider组件被点击时触发
 			click() {
 				this.$emit('click');

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

@@ -1,7 +1,7 @@
 <template>
 	<view class="u-dropdown">
 		<view class="u-dropdown__menu" :style="{
-			height: $u.addUnit(height)
+			height: addUnit(height)
 		}" :class="{
 			'u-border-bottom': borderBottom
 		}">
@@ -9,19 +9,19 @@
 				<view class="u-flex u-flex-row">
 					<text class="u-dropdown__menu__item__text" :style="{
 						color: item.disabled ? '#c0c4cc' : (index === current || highlightIndex == index) ? activeColor : inactiveColor,
-						fontSize: $u.addUnit(titleSize)
+						fontSize: addUnit(titleSize)
 					}">{{item.title}}</text>
 					<view class="u-dropdown__menu__item__arrow" :class="{
 						'u-dropdown__menu__item__arrow--rotate': index === current
 					}">
-						<u-icon :custom-style="{display: 'flex'}" :name="menuIcon" :size="$u.addUnit(menuIconSize)" :color="index === current || highlightIndex == index ? activeColor : '#c0c4cc'"></u-icon>
+						<u-icon :custom-style="{display: 'flex'}" :name="menuIcon" :size="addUnit(menuIconSize)" :color="index === current || highlightIndex == index ? activeColor : '#c0c4cc'"></u-icon>
 					</view>
 				</view>
 			</view>
 		</view>
 		<view class="u-dropdown__content" :style="[contentStyle, {
 			transition: `opacity ${duration / 1000}s linear`,
-			top: $u.addUnit(height),
+			top: addUnit(height),
 			height: contentHeight + 'px'
 		}]"
 		 @tap="maskClick" @touchmove.stop.prevent>
@@ -34,9 +34,10 @@
 </template>
 
 <script>
-    import props from './props.js';
-    import mpMixin from '../../libs/mixin/mpMixin.js';
-	import mixin from '../../libs/mixin/mixin.js';
+    import props from './props';
+    import mpMixin from '../../libs/mixin/mpMixin';
+	import mixin from '../../libs/mixin/mixin';
+	import { addUnit, sys} from '../../libs/function/index';
 	/**
 	 * dropdown 下拉菜单
 	 * @description 该组件一般用于向下展开菜单，同时可切换多个选项卡的场景
@@ -82,7 +83,7 @@
 				// 进行Y轴位移，展开状态时，恢复原位。收齐状态时，往上位移100%，进行隐藏
 				style.transform = `translateY(${this.active ? 0 : '-100%'})`
 				style['transition-duration'] = this.duration / 1000 + 's';
-				style.borderRadius = `0 0 ${this.$u.addUnit(this.borderRadius)} ${this.$u.addUnit(this.borderRadius)}`;
+				style.borderRadius = `0 0 ${addUnit(this.borderRadius)} ${addUnit(this.borderRadius)}`;
 				return style;
 			}
 		},
@@ -95,6 +96,7 @@
 		},
         emits: ['open', 'close'],
 		methods: {
+			addUnit,
 			init() {
 				// 当某个子组件内容变化时，触发父组件的init，父组件再让每一个子组件重新初始化一遍
 				// 以保证数据的正确性
@@ -164,8 +166,8 @@
 			getContentHeight() {
 				// 这里的原理为，因为dropdown组件是相对定位的，它的下拉出来的内容，必须给定一个高度
 				// 才能让遮罩占满菜单一下，直到屏幕底部的高度
-				// this.$u.sys()为uView封装的获取设备信息的方法
-				let windowHeight = this.$u.sys().windowHeight;
+				// sys()为uview-plus封装的获取设备信息的方法
+				let windowHeight = sys().windowHeight;
 				this.$uGetRect('.u-dropdown__menu').then(res => {
 					// 这里获取的是dropdown的尺寸，在H5上，uniapp获取尺寸是有bug的(以前提出修复过，后来又出现了此bug，目前hx2.8.11版本)
 					// H5端bug表现为元素尺寸的top值为导航栏底部到到元素的上边沿的距离，但是元素的bottom值确是导航栏顶部到元素底部的距离

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

@@ -2,7 +2,7 @@
 	<view class="u-dropdown-item" v-if="active" @touchmove.stop.prevent="() => {}" @tap.stop.prevent="() => {}">
 		<block v-if="!$slots.default && !$slots.$default">
 			<scroll-view class="u-dropdown-item__scroll" scroll-y="true" :style="{
-				height: $u.addUnit(height)
+				height: addUnit(height)
 			}">
 				<view class="u-dropdown-item__options">
 					<up-cell-group>
@@ -21,9 +21,10 @@
 </template>
 
 <script>
-    import props from './props.js';
-    import mpMixin from '../../libs/mixin/mpMixin.js';
-	import mixin from '../../libs/mixin/mixin.js';
+    import props from './props';
+    import mpMixin from '../../libs/mixin/mpMixin';
+	import mixin from '../../libs/mixin/mixin';
+	import { addUnit, $parent } from '../../libs/function/index';
 	/**
 	 * dropdown-item 下拉菜单
 	 * @description 该组件一般用于向下展开菜单，同时可切换多个选项卡的场景
@@ -68,9 +69,10 @@
 		},
         emits: ['update:modelValue', 'change'],
 		methods: {
+			addUnit,
 			init() {
 				// 获取父组件u-dropdown
-				let parent = this.$u.$parent.call(this, 'u-dropdown');
+				let parent = $parent.call(this, 'u-dropdown');
 				if (parent) {
 					this.parent = parent;
 					// 将子组件的激活颜色配置为父组件设置的激活和未激活时的颜色

package/components/u-empty/u-empty.vue

@@ -14,8 +14,8 @@
 		<image
 		    v-else
 		    :style="{
-				width: $u.addUnit(width),
-				height: $u.addUnit(height),
+				width: addUnit(width),
+				height: addUnit(height),
 			}"
 		    :src="icon"
 		    mode="widthFix"
@@ -31,9 +31,10 @@
 </template>
 
 <script>
-	import props from './props.js';
-	import mpMixin from '../../libs/mixin/mpMixin.js';
-	import mixin from '../../libs/mixin/mixin.js';
+	import props from './props';
+	import mpMixin from '../../libs/mixin/mpMixin';
+	import mixin from '../../libs/mixin/mixin';
+	import { addUnit, addStyle, deepMerge } from '../../libs/function/index';
 	/**
 	 * empty 内容为空
 	 * @description 该组件用于需要加载内容，但是加载的第一页数据就为空，提示一个"没有内容"的场景， 我们精心挑选了十几个场景的图标，方便您使用。
@@ -83,21 +84,24 @@
 			// 组件样式
 			emptyStyle() {
 				const style = {}
-				style.marginTop = uni.$u.addUnit(this.marginTop)
+				style.marginTop = addUnit(this.marginTop)
 				// 合并customStyle样式，此参数通过mixin中的props传递
-				return uni.$u.deepMerge(uni.$u.addStyle(this.customStyle), style)
+				return deepMerge(addStyle(this.customStyle), style)
 			},
 			// 文本样式
 			textStyle() {
 				const style = {}
 				style.color = this.textColor
-				style.fontSize = uni.$u.addUnit(this.textSize)
+				style.fontSize = addUnit(this.textSize)
 				return style
 			},
 			// 判断icon是否图片路径
 			isSrc() {
 				return this.icon.indexOf('/') >= 0
 			}
+		},
+		methods: {
+			addUnit
 		}
 	}
 </script>

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

@@ -6,9 +6,11 @@
 
 <script>
 	import props from "./props.js";
-	import mpMixin from '../../libs/mixin/mpMixin.js';
-	import mixin from '../../libs/mixin/mixin.js';
+	import mpMixin from '../../libs/mixin/mpMixin';
+	import mixin from '../../libs/mixin/mixin';
 	import Schema from "../../libs/util/async-validator";
+	import { toast, getProperty, setProperty, deepClone, error } from '../../libs/function/index';
+	import test from '../../libs/function/test';
 	// 去除警告信息
 	Schema.warning = function() {};
 	/**
@@ -65,7 +67,7 @@
 				immediate: true,
 				handler(n) {
 					if (!this.originalModel) {
-						this.originalModel = uni.$u.deepClone(n);
+						this.originalModel = deepClone(n);
 					}
 				},
 			},
@@ -93,7 +95,7 @@
 				// 判断是否有规则
 				if (Object.keys(rules).length === 0) return;
 				if (process.env.NODE_ENV === 'development' && Object.keys(this.model).length === 0) {
-					uni.$u.error('设置rules，model必须设置！如果已经设置，请刷新页面。');
+					error('设置rules，model必须设置！如果已经设置，请刷新页面。');
 					return;
 				};
 				this.formRules = rules;
@@ -109,8 +111,8 @@
 				// 历遍所有u-form-item，根据其prop属性，还原model的原始快照
 				this.children.map((child) => {
 					const prop = child?.prop;
-					const value = uni.$u.getProperty(this.originalModel, prop);
-					uni.$u.setProperty(this.model, prop, value);
+					const value = getProperty(this.originalModel, prop);
+					setProperty(this.model, prop, value);
 				});
 			},
 			// 清空校验结果
@@ -137,7 +139,7 @@
 						const childErrors = [];
 						if (value.includes(child.prop)) {
 							// 获取对应的属性，通过类似'a.b.c'的形式
-							const propertyVal = uni.$u.getProperty(
+							const propertyVal = getProperty(
 								this.model,
 								child.prop
 							);
@@ -167,7 +169,7 @@
 										[propertyName]: propertyVal,
 									},
 									(errors, fields) => {
-										if (uni.$u.test.array(errors)) {
+										if (test.array(errors)) {
 											errorsRes.push(...errors);
 											childErrors.push(...errors);
 										}
@@ -186,7 +188,7 @@
 			validate(callback) {
 				// 开发环境才提示，生产环境不会提示
 				if (process.env.NODE_ENV === 'development' && Object.keys(this.formRules).length === 0) {
-					uni.$u.error('未设置rules，请看文档说明！如果已经设置，请刷新页面。');
+					error('未设置rules，请看文档说明！如果已经设置，请刷新页面。');
 					return;
 				}
 				return new Promise((resolve, reject) => {
@@ -199,7 +201,7 @@
 						this.validateField(formItemProps, (errors) => {
 							if(errors.length) {
 								// 如果错误提示方式为toast，则进行提示
-								this.errorType === 'toast' && uni.$u.toast(errors[0].message)
+								this.errorType === 'toast' && toast(errors[0].message)
 								reject(errors)
 							} else {
 								resolve(true)

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

@@ -3,7 +3,7 @@
 		<view
 			class="u-form-item__body"
 			@tap="clickHandler"
-			:style="[$u.addStyle(customStyle), {
+			:style="[addStyle(customStyle), {
                 flexDirection: (labelPosition || parentData.labelPosition) === 'left' ? 'row' : 'column'
 			}]"
 		>
@@ -14,7 +14,7 @@
 					class="u-form-item__body__left"
 					v-if="required || leftIcon || label"
 					:style="{
-						width: $u.addUnit(labelWidth || parentData.labelWidth),
+						width: addUnit(labelWidth || parentData.labelWidth),
 						marginBottom: parentData.labelPosition === 'left' ? 0 : '5px',
 					}"
 				>
@@ -62,22 +62,25 @@
 				v-if="!!message && parentData.errorType === 'message'"
 				class="u-form-item__body__right__message"
 				:style="{
-					marginLeft:  $u.addUnit(parentData.labelPosition === 'top' ? 0 : (labelWidth || parentData.labelWidth))
+					marginLeft:  addUnit(parentData.labelPosition === 'top' ? 0 : (labelWidth || parentData.labelWidth))
 				}"
 			>{{ message }}</text>
 		</slot>
 		<u-line
 			v-if="borderBottom"
-			:color="message && parentData.errorType === 'border-bottom' ? $u.color.error : propsLine.color"
+			:color="message && parentData.errorType === 'border-bottom' ? color.error : propsLine.color"
 			:customStyle="`margin-top: ${message && parentData.errorType === 'message' ? '5px' : 0}`"
 		></u-line>
 	</view>
 </template>
 
 <script>
-	import props from './props.js';
-	import mpMixin from '../../libs/mixin/mpMixin.js';
-	import mixin from '../../libs/mixin/mixin.js';
+	import props from './props';
+	import mpMixin from '../../libs/mixin/mpMixin';
+	import mixin from '../../libs/mixin/mixin';
+	import defProps from '../../libs/config/props.js';
+	import color from '../../libs/config/color';
+	import { addStyle, addUnit, getProperty, setProperty, error } from '../../libs/function/index';
 	/**
 	 * Form 表单
 	 * @description 此组件一般用于表单场景，可以配置Input输入框，Select弹出框，进行表单验证等。
@@ -118,7 +121,7 @@
 		// 组件创建完成时，将当前实例保存到u-form中
 		computed: {
 			propsLine() {
-				return uni.$u.props.line
+				return defProps.line
 			}
 		},
 		mounted() {
@@ -126,11 +129,14 @@
 		},
 		emits: ["click"],
 		methods: {
+			addStyle,
+			addUnit,
+			color,
 			init() {
 				// 父组件的实例
 				this.updateParentData()
 				if (!this.parent) {
-					uni.$u.error('u-form-item需要结合u-form组件使用')
+					error('u-form-item需要结合u-form组件使用')
 				}
 			},
 			// 获取父组件的参数
@@ -145,9 +151,9 @@
 			// 清空当前的组件的校验结果，并重置为初始值
 			resetField() {
 				// 找到原始值
-				const value = uni.$u.getProperty(this.parent.originalModel, this.prop)
+				const value = getProperty(this.parent.originalModel, this.prop)
 				// 将u-form的model的prop属性链还原原始值
-				uni.$u.setProperty(this.parent.model, this.prop, value)
+				setProperty(this.parent.model, this.prop, value)
 				// 移除校验结果
 				this.message = null
 			},

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

@@ -3,9 +3,9 @@
 </template>
 
 <script>
-	import props from './props.js';
-	import mpMixin from '../../libs/mixin/mpMixin.js';
-	import mixin from '../../libs/mixin/mixin.js';
+	import props from './props';
+	import mpMixin from '../../libs/mixin/mpMixin';
+	import mixin from '../../libs/mixin/mixin';
 	import { addStyle, addUnit, deepMerge } from '../../libs/function/index.js';
 	/**
 	 * gap 间隔槽

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

@@ -9,9 +9,10 @@
 </template>
 
 <script>
-	import props from './props.js';
-	import mpMixin from '../../libs/mixin/mpMixin.js';
-	import mixin from '../../libs/mixin/mixin.js';
+	import props from './props';
+	import mpMixin from '../../libs/mixin/mpMixin';
+	import mixin from '../../libs/mixin/mixin';
+	import { addStyle, deepMerge } from '../../libs/function/index';
 	/**
 	 * grid 宫格布局
 	 * @description 宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式。
@@ -68,12 +69,16 @@
 					default:
 						style.justifyContent = 'flex-start';
 				};
-				return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
+				return deepMerge(style, addStyle(this.customStyle));
 			}
 		},
-		emits: ['click'], // 防止事件执行两次
+		emits: ['click'], // 防止事件执行两次
+		// 20240409发现抖音小程序如果开启virtualHost会出现严重问题，几乎所有事件包括created等生命周期事件全部失效。
+		// #ifdef MP-WEIXIN
+		options: {
 		    // virtualHost: true ,//将自定义节点设置成虚拟的，更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等
-		},
+		},
+		// #endif
 		methods: {
 			// 此方法由u-grid-item触发，用于在u-grid发出事件
 			childClick(name) {
@@ -97,6 +102,12 @@
 		justify-content: center;
 		@include flex;
 		flex-wrap: wrap;
-		align-items: center;
+		align-items: center;
+		// 在uni-app中应尽量避免使用flex布局以外的方式,因为nvue/uvue等方案都支持flex布局
+		// 这里使用grid布局使用为目前20240409uni-app在抖音小程序开启virtualHost时有bug，存在事件失效问题。
+		/* #ifdef MP-TOUTIAO */
+		display: grid;
+		grid-template-columns: repeat(v-bind(col), 1fr);
+		/* #endif */
 	}
 </style>

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

@@ -1,6 +1,7 @@
 <template>
-	<!-- #ifndef APP-NVUE -->
-	<view
+	<!-- #ifndef APP-NVUE -->
+	<view
+		v-if="parentData.col > 0"
 	    class="u-grid-item"
 	    hover-class="u-grid-item--hover-class"
 	    :hover-stay-time="200"
@@ -25,9 +26,10 @@
 </template>
 
 <script>
-	import props from './props.js';
-	import mpMixin from '../../libs/mixin/mpMixin.js';
-	import mixin from '../../libs/mixin/mixin.js';
+	import props from './props';
+	import mpMixin from '../../libs/mixin/mpMixin';
+	import mixin from '../../libs/mixin/mixin';
+	import { addStyle, deepMerge } from '../../libs/function/index';
 	/**
 	 * gridItem 提示
 	 * @description 宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式。搭配u-grid使用
@@ -49,7 +51,8 @@
 				},
 				// #ifdef APP-NVUE
 				width: 0, // nvue下才这么计算，vue下放到computed中，否则会因为延时造成闪烁
-				// #endif
+				// #endif
+				// #ifdef MP-TOUTIAO
 				width: '100%',
 				// #endif
 				classes: [], // 类名集合，用于判断是否显示右边和下边框
@@ -60,9 +63,11 @@
 		},
 		emits: ['click'],
 		//  微信小程序中 options 选项
-		// #ifdef MP-WEIXIN
+		// #ifdef MP-WEIXIN
+		options: {
 		    virtualHost: true ,//将自定义节点设置成虚拟的，更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等
-		},
+		},
+		// #endif
 		computed: {
 			// #ifndef APP-NVUE || MP-TOUTIAO
 			// vue下放到computed中，否则会因为延时造成闪烁
@@ -79,7 +84,7 @@
 					background: this.bgColor,
 					width: this.width
 				}
-				return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
+				return deepMerge(style, addStyle(this.customStyle))
 			}
 		},
 		methods: {

package/components/u-icon/u-icon.vue

@@ -9,13 +9,13 @@
 		    v-if="isImg"
 		    :src="name"
 		    :mode="imgMode"
-		    :style="[imgStyle, $u.addStyle(customStyle)]"
+		    :style="[imgStyle, addStyle(customStyle)]"
 		></image>
 		<text
 		    v-else
 		    class="u-icon__icon"
 		    :class="uClasses"
-		    :style="[iconStyle, $u.addStyle(customStyle)]"
+		    :style="[iconStyle, addStyle(customStyle)]"
 		    :hover-class="hoverClass"
 		>{{icon}}</text>
 		<!-- 这里进行空字符串判断，如果仅仅是v-if="label"，可能会出现传递0的时候，结果也无法显示 -->
@@ -24,11 +24,11 @@
 		    class="u-icon__label"
 		    :style="{
 			color: labelColor,
-			fontSize: $u.addUnit(labelSize),
-			marginLeft: labelPos == 'right' ? $u.addUnit(space) : 0,
-			marginTop: labelPos == 'bottom' ? $u.addUnit(space) : 0,
-			marginRight: labelPos == 'left' ? $u.addUnit(space) : 0,
-			marginBottom: labelPos == 'top' ? $u.addUnit(space) : 0,
+			fontSize: addUnit(labelSize),
+			marginLeft: labelPos == 'right' ? addUnit(space) : 0,
+			marginTop: labelPos == 'bottom' ? addUnit(space) : 0,
+			marginRight: labelPos == 'left' ? addUnit(space) : 0,
+			marginBottom: labelPos == 'top' ? addUnit(space) : 0,
 		}"
 		>{{ label }}</text>
 	</view>
@@ -48,11 +48,11 @@
 
 	// 引入图标名称，已经对应的unicode
 	import icons from './icons'
-	
-	import props from './props.js';
-	import mpMixin from '../../libs/mixin/mpMixin.js';
-	import mixin from '../../libs/mixin/mixin.js';
-
+	import props from './props';
+	import mpMixin from '../../libs/mixin/mpMixin';
+	import mixin from '../../libs/mixin/mixin';
+	import { addUnit, addStyle } from '../../libs/function/index';
+	import config from '../../libs/config/config';
 	/**
 	 * icon 图标
 	 * @description 基于字体的图标集，包含了大多数常见场景的图标。
@@ -100,7 +100,7 @@
 					classes.push(this.customPrefix)
 				}
 				// 主题色，通过类配置
-				if (this.color && uni.$u.config.type.includes(this.color)) classes.push('u-icon__icon--' + this.color)
+				if (this.color && config.type.includes(this.color)) classes.push('u-icon__icon--' + this.color)
 				// 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
 				// 故需将其拆成一个字符串的形式，通过空格隔开各个类名
 				//#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
@@ -111,14 +111,14 @@
 			iconStyle() {
 				let style = {}
 				style = {
-					fontSize: uni.$u.addUnit(this.size),
-					lineHeight: uni.$u.addUnit(this.size),
+					fontSize: addUnit(this.size),
+					lineHeight: addUnit(this.size),
 					fontWeight: this.bold ? 'bold' : 'normal',
 					// 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
-					top: uni.$u.addUnit(this.top)
+					top: addUnit(this.top)
 				}
 				// 非主题色值时，才当作颜色值
-				if (this.color && !uni.$u.config.type.includes(this.color)) style.color = this.color
+				if (this.color && !config.type.includes(this.color)) style.color = this.color
 
 				return style
 			},
@@ -129,8 +129,8 @@
 			imgStyle() {
 				let style = {}
 				// 如果设置width和height属性，则优先使用，否则使用size属性
-				style.width = this.width ? uni.$u.addUnit(this.width) : uni.$u.addUnit(this.size)
-				style.height = this.height ? uni.$u.addUnit(this.height) : uni.$u.addUnit(this.size)
+				style.width = this.width ? addUnit(this.width) : addUnit(this.size)
+				style.height = this.height ? addUnit(this.height) : addUnit(this.size)
 				return style
 			},
 			// 通过图标名，查找对应的图标
@@ -142,6 +142,8 @@
 			}
 		},
 		methods: {
+			addStyle,
+			addUnit,
 			clickHandler(e) {
 				this.$emit('click', this.index)
 				// 是否阻止事件冒泡