create-uniapps 1.0.4 → 1.0.5

package/template/src/uni_modules/uview-plus/components/u-icon/u-icon.vue

@@ -1,219 +1,237 @@
 <template>
-	<view class="u-icon" @tap="clickHandler" :class="['u-icon--' + labelPos]">
-		<image class="u-icon__img" v-if="isImg" :src="name" :mode="imgMode" :style="[imgStyle, addStyle(customStyle)]">
-		</image>
-		<text v-else class="u-icon__icon" :class="uClasses" :style="[iconStyle, addStyle(customStyle)]"
-			:hover-class="hoverClass">{{ icon }}</text>
+	<view
+	    class="u-icon"
+	    @tap="clickHandler"
+	    :class="['u-icon--' + labelPos]"
+	>
+		<image
+		    class="u-icon__img"
+		    v-if="isImg"
+		    :src="name"
+		    :mode="imgMode"
+		    :style="[imgStyle, addStyle(customStyle)]"
+		></image>
+		<text
+		    v-else
+		    class="u-icon__icon"
+		    :class="uClasses"
+		    :style="[iconStyle, addStyle(customStyle)]"
+		    :hover-class="hoverClass"
+		>{{icon}}</text>
 		<!-- 这里进行空字符串判断，如果仅仅是v-if="label"，可能会出现传递0的时候，结果也无法显示 -->
-		<text v-if="label !== ''" class="u-icon__label" :style="{
+		<text
+		    v-if="label !== ''" 
+		    class="u-icon__label"
+		    :style="{
 			color: labelColor,
 			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>
+		}"
+		>{{ label }}</text>
 	</view>
 </template>
 
 <script>
-// 引入图标名称，已经对应的unicode
-import icons from './icons';
-import { props } from './props';
-import config from '../../libs/config/config';
-import { mpMixin } from '../../libs/mixin/mpMixin';
-import { mixin } from '../../libs/mixin/mixin';
-import { addUnit, addStyle } from '../../libs/function/index';
-import fontUtil from './util';
-/**
- * icon 图标
- * @description 基于字体的图标集，包含了大多数常见场景的图标。
- * @tutorial https://ijry.github.io/uview-plus/components/icon.html
- * @property {String}			name			图标名称，见示例图标集
- * @property {String}			color			图标颜色,可接受主题色 （默认 color['u-content-color'] ）
- * @property {String | Number}	size			图标字体大小，单位px （默认 '16px' ）
- * @property {Boolean}			bold			是否显示粗体 （默认 false ）
- * @property {String | Number}	index			点击图标的时候传递事件出去的index（用于区分点击了哪一个）
- * @property {String}			hoverClass		图标按下去的样式类，用法同uni的view组件的hoverClass参数，详情见官网
- * @property {String}			customPrefix	自定义扩展前缀，方便用户扩展自己的图标库 （默认 'uicon' ）
- * @property {String | Number}	label			图标右侧的label文字
- * @property {String}			labelPos		label相对于图标的位置，只能right或bottom （默认 'right' ）
- * @property {String | Number}	labelSize		label字体大小，单位px （默认 '15px' ）
- * @property {String}			labelColor		图标右侧的label文字颜色 （ 默认 color['u-content-color'] ）
- * @property {String | Number}	space			label与图标的距离，单位px （默认 '3px' ）
- * @property {String}			imgMode			图片的mode
- * @property {String | Number}	width			显示图片小图标时的宽度
- * @property {String | Number}	height			显示图片小图标时的高度
- * @property {String | Number}	top				图标在垂直方向上的定位 用于解决某些情况下，让图标垂直居中的用途  （默认 0 ）
- * @property {Boolean}			stop			是否阻止事件传播 （默认 false ）
- * @property {Object}			customStyle		icon的样式，对象形式
- * @event {Function} click 点击图标时触发
- * @event {Function} touchstart 事件触摸时触发
- * @example <u-icon name="photo" color="#2979ff" size="28"></u-icon>
- */
-export default {
-	name: 'u-icon',
-	beforeCreate() {
-		fontUtil.loadFont();
-	},
-	data() {
-		return {
-		}
-	},
-	emits: ['click'],
-	mixins: [mpMixin, mixin, props],
-	computed: {
-		uClasses() {
-			let classes = []
-			classes.push(this.customPrefix + '-' + this.name)
-			// uview-plus内置图标类名为u-iconfont
-			if (this.customPrefix == 'uicon') {
-				classes.push('u-iconfont')
-			} else {
-				// 不能缺少这一步，否则自定义图标会无效
-				classes.push(this.customPrefix)
+	// 引入图标名称，已经对应的unicode
+	import icons from './icons';
+	import { props } from './props';
+	import config from '../../libs/config/config';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { addUnit, addStyle } from '../../libs/function/index';
+	import fontUtil from './util';
+	/**
+	 * icon 图标
+	 * @description 基于字体的图标集，包含了大多数常见场景的图标。
+	 * @tutorial https://ijry.github.io/uview-plus/components/icon.html
+	 * @property {String}			name			图标名称，见示例图标集
+	 * @property {String}			color			图标颜色,可接受主题色 （默认 color['u-content-color'] ）
+	 * @property {String | Number}	size			图标字体大小，单位px （默认 '16px' ）
+	 * @property {Boolean}			bold			是否显示粗体 （默认 false ）
+	 * @property {String | Number}	index			点击图标的时候传递事件出去的index（用于区分点击了哪一个）
+	 * @property {String}			hoverClass		图标按下去的样式类，用法同uni的view组件的hoverClass参数，详情见官网
+	 * @property {String}			customPrefix	自定义扩展前缀，方便用户扩展自己的图标库 （默认 'uicon' ）
+	 * @property {String | Number}	label			图标右侧的label文字
+	 * @property {String}			labelPos		label相对于图标的位置，只能right或bottom （默认 'right' ）
+	 * @property {String | Number}	labelSize		label字体大小，单位px （默认 '15px' ）
+	 * @property {String}			labelColor		图标右侧的label文字颜色 （ 默认 color['u-content-color'] ）
+	 * @property {String | Number}	space			label与图标的距离，单位px （默认 '3px' ）
+	 * @property {String}			imgMode			图片的mode
+	 * @property {String | Number}	width			显示图片小图标时的宽度
+	 * @property {String | Number}	height			显示图片小图标时的高度
+	 * @property {String | Number}	top				图标在垂直方向上的定位 用于解决某些情况下，让图标垂直居中的用途  （默认 0 ）
+	 * @property {Boolean}			stop			是否阻止事件传播 （默认 false ）
+	 * @property {Object}			customStyle		icon的样式，对象形式
+	 * @event {Function} click 点击图标时触发
+	 * @event {Function} touchstart 事件触摸时触发
+	 * @example <u-icon name="photo" color="#2979ff" size="28"></u-icon>
+	 */
+	export default {
+		name: 'u-icon',
+		beforeCreate() {
+			fontUtil.loadFont();
+    	},
+		data() {
+			return {
 			}
-			// 主题色，通过类配置
-			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
-			classes = classes.join(' ')
-			//#endif
-			return classes
 		},
-		iconStyle() {
-			let style = {}
-			style = {
-				fontSize: addUnit(this.size),
-				lineHeight: addUnit(this.size),
-				fontWeight: this.bold ? 'bold' : 'normal',
-				// 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
-				top: addUnit(this.top)
-			}
-			if (this.customPrefix !== 'uicon') {
-				style.fontFamily = this.customPrefix
+		emits: ['click'],
+		mixins: [mpMixin, mixin, props],
+		computed: {
+			uClasses() {
+				let classes = []
+				classes.push(this.customPrefix + '-' + this.name)
+				// uview-plus内置图标类名为u-iconfont
+				if (this.customPrefix == 'uicon') {
+					classes.push('u-iconfont')
+				} else {
+					// 不能缺少这一步，否则自定义图标会无效
+					classes.push(this.customPrefix)
+				}
+				// 主题色，通过类配置
+				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
+				classes = classes.join(' ')
+				//#endif
+				return classes
+			},
+			iconStyle() {
+				let style = {}
+				style = {
+					fontSize: addUnit(this.size),
+					lineHeight: addUnit(this.size),
+					fontWeight: this.bold ? 'bold' : 'normal',
+					// 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
+					top: addUnit(this.top)
+				}
+				if (this.customPrefix !== 'uicon') {
+					style.fontFamily = this.customPrefix
+				}
+				// 非主题色值时，才当作颜色值
+				if (this.color && !config.type.includes(this.color)) style.color = this.color
+
+				return style
+			},
+			// 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
+			isImg() {
+				return this.name.indexOf('/') !== -1
+			},
+			imgStyle() {
+				let style = {}
+				// 如果设置width和height属性，则优先使用，否则使用size属性
+				style.width = this.width ? addUnit(this.width) : addUnit(this.size)
+				style.height = this.height ? addUnit(this.height) : addUnit(this.size)
+				return style
+			},
+			// 通过图标名，查找对应的图标
+			icon() {
+				// 使用自定义图标的时候页面上会把name属性也展示出来，所以在这里处理一下
+				if (this.customPrefix !== "uicon") {
+					return config.customIcons[this.name] || this.name;
+				}
+				// 如果内置的图标中找不到对应的图标，就直接返回name值，因为用户可能传入的是unicode代码
+				return icons['uicon-' + this.name] || this.name
 			}
-			// 非主题色值时，才当作颜色值
-			if (this.color && !config.type.includes(this.color)) style.color = this.color
-
-			return style
-		},
-		// 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
-		isImg() {
-			return this.name.indexOf('/') !== -1
-		},
-		imgStyle() {
-			let style = {}
-			// 如果设置width和height属性，则优先使用，否则使用size属性
-			style.width = this.width ? addUnit(this.width) : addUnit(this.size)
-			style.height = this.height ? addUnit(this.height) : addUnit(this.size)
-			return style
 		},
-		// 通过图标名，查找对应的图标
-		icon() {
-			// 使用自定义图标的时候页面上会把name属性也展示出来，所以在这里处理一下
-			if (this.customPrefix !== "uicon") {
-				return config.customIcons[this.name] || this.name;
+		methods: {
+			addStyle,
+			addUnit,
+			clickHandler(e) {
+				this.$emit('click', this.index, e)
+				// 是否阻止事件冒泡
+				this.stop && this.preventEvent(e)
 			}
-			// 如果内置的图标中找不到对应的图标，就直接返回name值，因为用户可能传入的是unicode代码
-			return icons['uicon-' + this.name] || this.name
-		}
-	},
-	methods: {
-		addStyle,
-		addUnit,
-		clickHandler(e) {
-			this.$emit('click', this.index, e)
-			// 是否阻止事件冒泡
-			this.stop && this.preventEvent(e)
 		}
 	}
-}
 </script>
 
 <style lang="scss" scoped>
-// 变量定义
-$u-icon-primary: $u-primary !default;
-$u-icon-success: $u-success !default;
-$u-icon-info: $u-info !default;
-$u-icon-warning: $u-warning !default;
-$u-icon-error: $u-error !default;
-$u-icon-label-line-height: 1 !default;
-
-/* #ifdef MP-QQ || MP-TOUTIAO || MP-BAIDU || MP-KUAISHOU || MP-XHS */
-// 2025/04/09在App/微信/支付宝/鸿蒙元服务已改用uni.loadFontFace加载字体
-@font-face {
-	font-family: 'uicon-iconfont';
-	src: url('./font_2225171_8kdcwk4po24.ttf') format('truetype');
-}
-
-/* #endif */
-
-.u-icon {
-	/* #ifndef APP-NVUE */
-	display: flex;
-	/* #endif */
-	align-items: center;
-
-	&--left {
-		flex-direction: row-reverse;
-		align-items: center;
-	}
 
-	&--right {
-		flex-direction: row;
-		align-items: center;
-	}
-
-	&--top {
-		flex-direction: column-reverse;
-		justify-content: center;
-	}
-
-	&--bottom {
-		flex-direction: column;
-		justify-content: center;
+	// 变量定义
+	$u-icon-primary: $u-primary !default;
+	$u-icon-success: $u-success !default;
+	$u-icon-info: $u-info !default;
+	$u-icon-warning: $u-warning !default;
+	$u-icon-error: $u-error !default;
+	$u-icon-label-line-height:1 !default;
+
+	/* #ifdef MP-QQ || MP-TOUTIAO || MP-BAIDU || MP-KUAISHOU || MP-XHS */
+	// 2025/04/09在App/微信/支付宝/鸿蒙元服务已改用uni.loadFontFace加载字体
+	@font-face {
+		font-family: 'uicon-iconfont';
+		src: url('https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf') format('truetype');
 	}
+	/* #endif */
 
-	&__icon {
-		font-family: uicon-iconfont;
-		position: relative;
-		@include flex;
+	.u-icon {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
 		align-items: center;
 
-		&--primary {
-			color: $u-icon-primary;
+		&--left {
+			flex-direction: row-reverse;
+			align-items: center;
 		}
 
-		&--success {
-			color: $u-icon-success;
+		&--right {
+			flex-direction: row;
+			align-items: center;
 		}
 
-		&--error {
-			color: $u-icon-error;
+		&--top {
+			flex-direction: column-reverse;
+			justify-content: center;
 		}
 
-		&--warning {
-			color: $u-icon-warning;
+		&--bottom {
+			flex-direction: column;
+			justify-content: center;
 		}
 
-		&--info {
-			color: $u-icon-info;
+		&__icon {
+			font-family: uicon-iconfont;
+			position: relative;
+			@include flex;
+			align-items: center;
+
+			&--primary {
+				color: $u-icon-primary;
+			}
+
+			&--success {
+				color: $u-icon-success;
+			}
+
+			&--error {
+				color: $u-icon-error;
+			}
+
+			&--warning {
+				color: $u-icon-warning;
+			}
+
+			&--info {
+				color: $u-icon-info;
+			}
 		}
-	}
 
-	&__img {
-		/* #ifndef APP-NVUE */
-		height: auto;
-		will-change: transform;
-		/* #endif */
-	}
+		&__img {
+			/* #ifndef APP-NVUE */
+			height: auto;
+			will-change: transform;
+			/* #endif */
+		}
 
-	&__label {
-		/* #ifndef APP-NVUE */
-		line-height: $u-icon-label-line-height;
-		/* #endif */
+		&__label {
+			/* #ifndef APP-NVUE */
+			line-height: $u-icon-label-line-height;
+			/* #endif */
+		}
 	}
-}
 </style>

package/template/src/uni_modules/uview-plus/components/u-icon/util.js

@@ -1,90 +1,75 @@
 import config from '../../libs/config/config';
 // 定义高阶函数
 function once(fn) {
-	let called = false;
-	let result;
+    let called = false;
+    let result;
 
-	return function (...args) {
-		if (!called) {
-			result = fn.apply(this, args);
-			called = true;
-		}
-		return result;
-	};
+    return function(...args) {
+        if (!called) {
+            result = fn.apply(this, args);
+            called = true;
+        }
+        return result;
+    };
 }
 
 // 使用高阶函数
 const loadFont = once(() => {
-	// console.log('这个函数只能执行一次');
-	// #ifdef APP-NVUE
-	// nvue通过weex的dom模块引入字体，相关文档地址如下：
-	// https://weex.apache.org/zh/docs/modules/dom.html#addrule
-	const domModule = weex.requireModule('dom');
-	domModule.addRule('fontFace', {
-		'fontFamily': "uicon-iconfont",
-		'src': `url('${config.iconUrl}')`
-	});
-	if (config.customIcon.family) {
-		domModule.addRule('fontFace', {
-			'fontFamily': config.customIcon.family,
-			'src': `url('${config.customIcon.url}')`
-		});
-	}
-	// #endif
-	// #ifdef APP || H5 || MP-WEIXIN || MP-ALIPAY
-	console.log('📦 开始加载 uView Plus 字体:', config.iconUrl);
-	uni.loadFontFace({
-		global: true, // 是否全局生效。微信小程序 '2.10.0'起支持全局生效，需在 app.vue 中调用。
-		family: 'uicon-iconfont',
-		source: 'url("' + config.iconUrl + '")',
-		success() {
-			console.log('✅ uView Plus 字体加载成功:', config.iconUrl);
-		},
-		fail(err) {
-			console.error('❌ uView Plus 字体加载失败:', config.iconUrl, err);
-			// 如果主路径失败，尝试备用路径
-			const fallbackUrl = 'https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf';
-			console.log('🔄 尝试备用字体路径:', fallbackUrl);
-			uni.loadFontFace({
-				global: true,
-				family: 'uicon-iconfont',
-				source: 'url("' + fallbackUrl + '")',
-				success() {
-					console.log('✅ 备用字体加载成功:', fallbackUrl);
-				},
-				fail(fallbackErr) {
-					console.error('❌ 备用字体也加载失败:', fallbackUrl, fallbackErr);
-				}
-			});
-		}
-	});
-	if (config.customIcon.family) {
-		uni.loadFontFace({
-			global: true, // 是否全局生效。微信小程序 '2.10.0'起支持全局生效，需在 app.vue 中调用。
-			family: config.customIcon.family,
-			source: 'url("' + config.customIcon.url + '")',
-			success() {
-				// console.log('扩展字体图标加载成功');
-			},
-			fail() {
-				// console.error('扩展字体图标加载出错');
-			}
-		});
-	}
-	// #endif
-	// #ifdef APP-NVUE
-	if (this.customFontFamily) {
-		domModule.addRule('fontFace', {
-			'fontFamily': `${this.customPrefix}-${this.customFontFamily}`,
-			'src': `url('${this.customFontUrl}')`
-		})
-	}
-	// #endif
-	return true;
+    // console.log('这个函数只能执行一次');
+    // #ifdef APP-NVUE
+    // nvue通过weex的dom模块引入字体，相关文档地址如下：
+    // https://weex.apache.org/zh/docs/modules/dom.html#addrule
+    const domModule = weex.requireModule('dom');
+    domModule.addRule('fontFace', {
+        'fontFamily': "uicon-iconfont",
+        'src': `url('${config.iconUrl}')`
+    });
+    if (config.customIcon.family) {
+        domModule.addRule('fontFace', {
+            'fontFamily': config.customIcon.family,
+            'src': `url('${config.customIcon.url}')`
+        });
+    }
+    // #endif
+    // #ifdef APP || H5 || MP-WEIXIN || MP-ALIPAY
+    uni.loadFontFace({
+        global: true, // 是否全局生效。微信小程序 '2.10.0'起支持全局生效，需在 app.vue 中调用。
+        family: 'uicon-iconfont',
+        source: 'url("' + config.iconUrl + '")',
+        success() {
+            // console.log('内置字体图标加载成功');
+        },
+        fail() {
+            // console.error('内置字体图标加载出错');
+        }
+    });
+    if (config.customIcon.family) {
+        uni.loadFontFace({
+            global: true, // 是否全局生效。微信小程序 '2.10.0'起支持全局生效，需在 app.vue 中调用。
+            family: config.customIcon.family,
+            source: 'url("' + config.customIcon.url + '")',
+            success() {
+                // console.log('扩展字体图标加载成功');
+            },
+            fail() {
+                // console.error('扩展字体图标加载出错');
+            }
+        });
+    }
+    // #endif
+    // #ifdef APP-NVUE
+    if (this.customFontFamily) {
+        domModule.addRule('fontFace', {
+            'fontFamily': `${this.customPrefix}-${this.customFontFamily}`,
+            'src': `url('${this.customFontUrl}')`
+        })
+    }
+    // #endif
+    return true;
 });
 
 let fontUtil = {
-	loadFont
+    loadFont
 }
 
 export default fontUtil

package/template/src/uni_modules/uview-plus/libs/config/config.js

@@ -6,45 +6,45 @@ if (process.env.NODE_ENV === 'development') {
 }
 
 export default {
-	v: version,
-	version,
-	// 主题名称
-	type: [
-		'primary',
-		'success',
-		'info',
-		'error',
-		'warning'
-	],
-	// 颜色部分，本来可以通过scss的:export导出供js使用，但是奈何nvue不支持
-	color: {
-		'u-primary': '#2979ff',
-		'u-warning': '#ff9900',
-		'u-success': '#19be6b',
-		'u-error': '#fa3534',
-		'u-info': '#909399',
-		'u-main-color': '#303133',
-		'u-content-color': '#606266',
-		'u-tips-color': '#909399',
-		'u-light-color': '#c0c4cc',
-		'up-primary': '#2979ff',
-		'up-warning': '#ff9900',
-		'up-success': '#19be6b',
-		'up-error': '#fa3534',
-		'up-info': '#909399',
-		'up-main-color': '#303133',
-		'up-content-color': '#606266',
-		'up-tips-color': '#909399',
-		'up-light-color': '#c0c4cc'
-	},
-	// 字体图标地址
-	iconUrl: '/static/font_2225171_8kdcwk4po24.ttf',
-	// 自定义图标
-	customIcon: {
-		family: '',
-		url: ''
-	},
-	customIcons: {}, // 自定义图标与unicode对应关系
+    v: version,
+    version,
+    // 主题名称
+    type: [
+        'primary',
+        'success',
+        'info',
+        'error',
+        'warning'
+    ],
+    // 颜色部分，本来可以通过scss的:export导出供js使用，但是奈何nvue不支持
+    color: {
+        'u-primary': '#2979ff',
+        'u-warning': '#ff9900',
+        'u-success': '#19be6b',
+        'u-error': '#fa3534',
+        'u-info': '#909399',
+        'u-main-color': '#303133',
+        'u-content-color': '#606266',
+        'u-tips-color': '#909399',
+        'u-light-color': '#c0c4cc',
+        'up-primary': '#2979ff',
+        'up-warning': '#ff9900',
+        'up-success': '#19be6b',
+        'up-error': '#fa3534',
+        'up-info': '#909399',
+        'up-main-color': '#303133',
+        'up-content-color': '#606266',
+        'up-tips-color': '#909399',
+        'up-light-color': '#c0c4cc'
+    },
+    // 字体图标地址
+    iconUrl: 'https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf',
+     // 自定义图标
+    customIcon: {
+        family: '',
+        url: ''
+    },
+    customIcons: {}, // 自定义图标与unicode对应关系
 	// 默认单位，可以通过配置为rpx，那么在用于传入组件大小参数为数值时，就默认为rpx
 	unit: 'px',
 	// 拦截器