create-uniapps 1.0.0

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

@@ -0,0 +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>
+		<!-- 这里进行空字符串判断，如果仅仅是v-if="label"，可能会出现传递0的时候，结果也无法显示 -->
+		<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>
+	</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)
+				}
+				// 主题色，通过类配置
+				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
+			}
+		},
+		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('https://at.alicdn.com/t/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;
+		}
+
+		&__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 */
+		}
+
+		&__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

@@ -0,0 +1,75 @@
+import config from '../../libs/config/config';
+// 定义高阶函数
+function once(fn) {
+    let called = false;
+    let 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
+    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
+}
+
+export default fontUtil

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

@@ -0,0 +1,30 @@
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 1.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : LQ
+ * @lastTime     : 2021-08-20 17:01:51
+ * @FilePath     : /u-view2.0/uview-ui/libs/config/props/image.js
+ */
+export default {
+    // image组件
+    image: {
+        src: '',
+        mode: 'aspectFill',
+        width: '300',
+        height: '225',
+        shape: 'square',
+        radius: 0,
+        lazyLoad: true,
+        showMenuByLongpress: true,
+        loadingIcon: 'photo',
+        errorIcon: 'error-circle',
+        showLoading: true,
+        showError: true,
+        fade: true,
+        webp: false,
+        duration: 500,
+        bgColor: '#f3f4f6'
+    }
+}

package/template/src/uni_modules/uview-plus/components/u-image/props.js

@@ -0,0 +1,86 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+        // 图片地址
+        src: {
+            type: String,
+            default: () => defProps.image.src
+        },
+        // 裁剪模式
+        mode: {
+            type: String,
+            default: () => defProps.image.mode
+        },
+        // 宽度，单位任意
+        width: {
+            type: [String, Number],
+            default: () => defProps.image.width
+        },
+        // 高度，单位任意
+        height: {
+            type: [String, Number],
+            default: () => defProps.image.height
+        },
+        // 图片形状，circle-圆形，square-方形
+        shape: {
+            type: String,
+            default: () => defProps.image.shape
+        },
+        // 圆角，单位任意
+        radius: {
+            type: [String, Number],
+            default: () => defProps.image.radius
+        },
+        // 是否懒加载，微信小程序、App、百度小程序、字节跳动小程序
+        lazyLoad: {
+            type: Boolean,
+            default: () => defProps.image.lazyLoad
+        },
+        // 开启长按图片显示识别微信小程序码菜单
+        showMenuByLongpress: {
+            type: Boolean,
+            default: () => defProps.image.showMenuByLongpress
+        },
+        // 加载中的图标，或者小图片
+        loadingIcon: {
+            type: String,
+            default: () => defProps.image.loadingIcon
+        },
+        // 加载失败的图标，或者小图片
+        errorIcon: {
+            type: String,
+            default: () => defProps.image.errorIcon
+        },
+        // 是否显示加载中的图标或者自定义的slot
+        showLoading: {
+            type: Boolean,
+            default: () => defProps.image.showLoading
+        },
+        // 是否显示加载错误的图标或者自定义的slot
+        showError: {
+            type: Boolean,
+            default: () => defProps.image.showError
+        },
+        // 是否需要淡入效果
+        fade: {
+            type: Boolean,
+            default: () => defProps.image.fade
+        },
+        // 只支持网络资源，只对微信小程序有效
+        webp: {
+            type: Boolean,
+            default: () => defProps.image.webp
+        },
+        // 过渡时间，单位ms
+        duration: {
+            type: [String, Number],
+            default: () => defProps.image.duration
+        },
+        // 背景颜色，用于深色页面加载图片时，为了和背景色融合
+        bgColor: {
+            type: String,
+            default: () => defProps.image.bgColor
+        }
+    }
+})

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

@@ -0,0 +1,267 @@
+<template>
+	<u-transition
+		mode="fade"
+		:show="show"
+		:style="transStyle"
+		:duration="fade ? 1000 : 0"
+	>
+		<view
+			class="u-image box-border"
+			@tap="onClick"
+			:style="[wrapStyle, backgroundStyle]"
+		>
+			<image
+				v-if="!isError"
+				:src="src"
+				:mode="mode"
+				@error="onErrorHandler"
+				@load="onLoadHandler"
+				:show-menu-by-longpress="showMenuByLongpress"
+				:lazy-load="lazyLoad"
+				class="u-image__image"
+				:style="{
+					width: addUnit(width),
+					height: addUnit(height),
+					borderRadius: shape == 'circle' ? '10000px' : addUnit(radius)
+				}"
+			></image>
+			<view
+				v-if="showLoading && loading"
+				class="u-image__loading"
+				:style="{
+					borderRadius: shape == 'circle' ? '50%' : addUnit(radius),
+					backgroundColor: this.bgColor,
+					width: addUnit(width),
+					height: addUnit(height)
+				}"
+			>
+				<slot name="loading">
+					<u-icon
+						:name="loadingIcon"
+					></u-icon>
+				</slot>
+			</view>
+			<view
+				v-if="showError && isError && !loading"
+				class="u-image__error"
+				:style="{
+					borderRadius: shape == 'circle' ? '50%' : addUnit(radius),
+					backgroundColor: this.bgColor,
+					width: addUnit(width),
+					height: addUnit(height)
+				}"
+			>
+				<slot name="error">
+					<u-icon
+						:name="errorIcon"
+					></u-icon>
+				</slot>
+			</view>
+		</view>
+	</u-transition>
+</template>
+
+<script>
+	import { props } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { addUnit, addStyle, deepMerge } from '../../libs/function/index';
+	/**
+	 * Image 图片
+	 * @description 此组件为uni-app的image组件的加强版，在继承了原有功能外，还支持淡入动画、加载中、加载失败提示、圆角值和形状等。
+	 * @tutorial https://uview-plus.jiangruyi.com/components/image.html
+	 * @property {String}			src 				图片地址
+	 * @property {String}			mode 				裁剪模式，见官网说明 （默认 'aspectFill' ）
+	 * @property {String | Number}	width 				宽度，单位任意，如果为数值，则为px单位 （默认 '300' ）
+	 * @property {String | Number}	height 				高度，单位任意，如果为数值，则为px单位 （默认 '225' ）
+	 * @property {String}			shape 				图片形状，circle-圆形，square-方形 （默认 'square' ）
+	 * @property {String | Number}	radius		 		圆角值，单位任意，如果为数值，则为px单位 （默认 0 ）
+	 * @property {Boolean}			lazyLoad			是否懒加载，仅微信小程序、App、百度小程序、字节跳动小程序有效 （默认 true ）
+	 * @property {Boolean}			showMenuByLongpress	是否开启长按图片显示识别小程序码菜单，仅微信小程序有效 （默认 true ）
+	 * @property {String}			loadingIcon 		加载中的图标，或者小图片 （默认 'photo' ）
+	 * @property {String}			errorIcon 			加载失败的图标，或者小图片 （默认 'error-circle' ）
+	 * @property {Boolean}			showLoading 		是否显示加载中的图标或者自定义的slot （默认 true ）
+	 * @property {Boolean}			showError 			是否显示加载错误的图标或者自定义的slot （默认 true ）
+	 * @property {Boolean}			fade 				是否需要淡入效果 （默认 true ）
+	 * @property {Boolean}			webp 				只支持网络资源，只对微信小程序有效 （默认 false ）
+	 * @property {String | Number}	duration 			搭配fade参数的过渡时间，单位ms （默认 500 ）
+	 * @property {String}			bgColor 			背景颜色，用于深色页面加载图片时，为了和背景色融合  (默认 '#f3f4f6' )
+	 * @property {Object}			customStyle  		定义需要用到的外部样式
+	 * @event {Function}	click	点击图片时触发
+	 * @event {Function}	error	图片加载失败时触发
+	 * @event {Function} load 图片加载成功时触发
+	 * @example <u-image width="100%" height="300px" :src="src"></u-image>
+	 */
+	export default {
+		name: 'u-image',
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				// 图片是否加载错误，如果是，则显示错误占位图
+				isError: false,
+				// 初始化组件时，默认为加载中状态
+				loading: true,
+				// 不透明度，为了实现淡入淡出的效果
+				opacity: 1,
+				// 过渡时间，因为props的值无法修改，故需要一个中间值
+				durationTime: this.duration,
+				// 图片加载完成时，去掉背景颜色，因为如果是png图片，就会显示灰色的背景
+				backgroundStyle: {},
+				// 用于fade模式的控制组件显示与否
+				show: false
+			};
+		},
+		watch: {
+			src: {
+				immediate: true,
+				handler(n) {
+					if (!n) {
+						// 如果传入null或者''，或者false，或者undefined，标记为错误状态
+						this.isError = true
+					} else {
+						this.isError = false;
+						this.loading = true;
+					}
+				}
+			}
+		},
+		computed: {
+			transStyle() {
+				let style = {};
+				// 通过调用addUnit()方法，如果有单位，如百分比，px单位等，直接返回，如果是纯粹的数值，则加上rpx单位
+				// #ifdef APP-NVUE
+				style.width = addUnit(this.width);
+				style.height = addUnit(this.height);
+				// #endif
+				// #ifndef APP-NVUE
+				if (this.loading || this.isError || this.width == '100%' || this.mode != 'heightFix') {
+					style.width = addUnit(this.width);
+				} else {
+					style.width = 'fit-content';
+				}
+				if (this.loading || this.isError || this.height == '100%' || this.mode != 'widthFix') {
+					style.height = addUnit(this.height);
+				} else {
+					style.height = 'fit-content';
+				}
+				// #endif
+				return style;
+			},
+			wrapStyle() {
+				let style = {};
+				// 通过调用addUnit()方法，如果有单位，如百分比，px单位等，直接返回，如果是纯粹的数值，则加上rpx单位
+				// #ifdef APP-NVUE
+				style.width = addUnit(this.width);
+				style.height = addUnit(this.height);
+				// #endif
+				// #ifndef APP-NVUE
+				if (this.loading || this.isError || this.width == '100%' || this.mode != 'heightFix') {
+					style.width = addUnit(this.width);
+				} else {
+					style.width = 'fit-content';
+				}
+				if (this.loading || this.isError || this.height == '100%' || this.mode != 'widthFix') {
+					style.height = addUnit(this.height);
+				} else {
+					style.height = 'fit-content';
+				}
+				// #endif
+				// 如果是显示圆形，设置一个很多的半径值即可
+				style.borderRadius = this.shape == 'circle' ? '10000px' : addUnit(this.radius)
+				// 如果设置圆角，必须要有hidden，否则可能圆角无效
+				style.overflow = this.radius > 0 ? 'hidden' : 'visible'
+				// if (this.fade) {
+				// 	style.opacity = this.opacity
+				// 	// nvue下，这几个属性必须要分开写
+				// 	style.transitionDuration = `${this.durationTime}ms`
+				// 	style.transitionTimingFunction = 'ease-in-out'
+				// 	style.transitionProperty = 'opacity'
+				// }
+				return deepMerge(style, addStyle(this.customStyle));
+
+			}
+		},
+		mounted() {
+			this.show = true
+		},
+		emits: ['click', 'error', 'load'],
+		methods: {
+			addUnit,
+			// 点击图片
+			onClick(e) {
+				this.$emit('click', e)
+			},
+			// 图片加载失败
+			onErrorHandler(err) {
+				this.loading = false
+				this.isError = true
+				this.$emit('error', err)
+			},
+			// 图片加载完成，标记loading结束
+			onLoadHandler(event) {
+				this.loading = false
+				this.isError = false
+				this.$emit('load', event)
+				this.removeBgColor()
+				// 如果不需要动画效果，就不执行下方代码，同时移除加载时的背景颜色
+				// 否则无需fade效果时，png图片依然能看到下方的背景色
+				// if (!this.fade) return this.removeBgColor();
+				// // 原来opacity为1(不透明，是为了显示占位图)，改成0(透明，意味着该元素显示的是背景颜色，默认的灰色)，再改成1，是为了获得过渡效果
+				// this.opacity = 0;
+				// // 这里设置为0，是为了图片展示到背景全透明这个过程时间为0，延时之后延时之后重新设置为duration，是为了获得背景透明(灰色)
+				// // 到图片展示的过程中的淡入效果
+				// this.durationTime = 0;
+				// // 延时50ms，否则在浏览器H5，过渡效果无效
+				// setTimeout(() => {
+				// 	this.durationTime = this.duration;
+				// 	this.opacity = 1;
+				// 	setTimeout(() => {
+				// 		this.removeBgColor();
+				// 	}, this.durationTime);
+				// }, 50);
+			},
+			// 移除图片的背景色
+			removeBgColor() {
+				// 淡入动画过渡完成后，将背景设置为透明色，否则png图片会看到灰色的背景
+				// this.backgroundStyle = {
+				// 	backgroundColor: this.bgColor || '#ffffff'
+				// };
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	$u-image-error-top:0px !default;
+	$u-image-error-left:0px !default;
+	$u-image-error-width:100% !default;
+	$u-image-error-hight:100% !default;
+	$u-image-error-background-color:$u-bg-color !default;
+	$u-image-error-color:$u-tips-color !default;
+	$u-image-error-font-size: 46rpx !default;
+
+	.u-image {
+		position: relative;
+		transition: opacity 0.5s ease-in-out;
+
+		&__image {
+			width: 100%;
+			height: 100%;
+		}
+
+		&__loading,
+		&__error {
+			position: absolute;
+			top: $u-image-error-top;
+			left: $u-image-error-left;
+			width: $u-image-error-width;
+			height: $u-image-error-hight;
+			@include flex;
+			align-items: center;
+			justify-content: center;
+			background-color: $u-image-error-background-color;
+			color: $u-image-error-color;
+			font-size: $u-image-error-font-size;
+		}
+	}
+</style>