uview-ultra 4.5.46

package/components/up-icon/up-icon.vue

@@ -0,0 +1,259 @@
+<template>
+	<view
+	    class="up-icon"
+	    @tap="clickHandler"
+	    :class="['up-icon--' + labelPos]"
+	>
+		<image
+		    class="up-icon__img"
+		    v-if="isImg"
+		    :src="name"
+		    :mode="imgMode"
+		    :style="[imgStyle, addStyle(customStyle)]"
+		></image>
+		<text
+		    v-else
+		    class="up-icon__icon"
+		    :class="uClasses"
+		    :style="[iconStyle, addStyle(customStyle)]"
+		    :hover-class="hoverClass"
+		>{{icon}}</text>
+		<!-- 这里进行空字符串判断，如果仅仅是v-if="label"，可能会出现传递0的时候，结果也无法显示 -->
+		<text
+		    v-if="label !== ''" 
+		    class="up-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 setup>
+	import { computed } from 'vue'
+	// #ifdef APP-VUE
+	import { onMounted } from 'vue'
+	// #endif
+
+	// 引入图标名称，已经对应的unicode
+	import icons from './icons.js'
+	import fontUtil from './util.js'
+	import { propsIcon } from './props.js'
+	import { commonProps, useUltraUI } from '../../libs/composable/useUltraUI.js'
+	import { addUnit, addStyle } from '../../libs/function/index.js'
+	import config from '../../libs/config/config.js'
+	/**
+	 * icon 图标
+	 * @description 基于字体的图标集，包含了大多数常见场景的图标。
+	 * @tutorial https://ijry.github.io/uview-plus/components/icon.html
+	 * @property {String}			name			图标名称，见示例图标集
+	 * @property {String}			color			图标颜色,可接受主题色 （默认 color['up-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	自定义扩展前缀，方便用户扩展自己的图标库 （默认 'upicon' ）
+	 * @property {String | Number}	label			图标右侧的label文字
+	 * @property {String}			labelPos		label相对于图标的位置，只能right或bottom （默认 'right' ）
+	 * @property {String | Number}	labelSize		label字体大小，单位px （默认 '15px' ）
+	 * @property {String}			labelColor		图标右侧的label文字颜色 （ 默认 color['up-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 <up-icon name="photo" color="#2979ff" size="28"></up-icon>
+	 */
+	defineOptions({
+		name: 'up-icon',
+		// #ifdef MP-WEIXIN
+		options: {
+			virtualHost: true
+		}
+		// #endif
+	})
+
+	const props = defineProps({
+		...commonProps,
+		...propsIcon.props
+	})
+	const emit = defineEmits(['click'])
+	const { preventEvent } = useUltraUI(props)
+
+	// #ifndef APP-VUE
+	if (!fontUtil.isLoaded()) {
+		fontUtil.loadFont()
+	}
+	// #endif
+
+	// #ifdef APP-VUE
+	// App Vue 的字体注册只对当前页面 WebView 生效，页面未挂载时取不到 getCurrentPages，需等 mounted
+	onMounted(() => {
+		if (!fontUtil.isLoaded()) {
+			fontUtil.loadFont()
+		}
+	})
+	// #endif
+
+	const uClasses = computed(() => {
+		let classes = []
+		classes.push(props.customPrefix + '-' + props.name)
+		// uview-plus的自定义图标类名为up-iconfont
+		if (props.customPrefix == 'upicon') {
+			classes.push('up-iconfont')
+		} else {
+			// 不能缺少这一步，否则自定义图标会无效
+			classes.push(props.customPrefix)
+		}
+		// 主题色，通过类配置
+		if (props.color && config.type.includes(props.color)) classes.push('up-icon__icon--' + props.color)
+		// 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
+		// 故需将其拆成一个字符串的形式，通过空格隔开各个类名
+		//#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
+		classes = classes.join(' ')
+		//#endif
+		return classes
+	})
+
+	const iconStyle = computed(() => {
+		const style = {
+			fontSize: addUnit(props.size),
+			lineHeight: addUnit(props.size),
+			fontWeight: props.bold ? 'bold' : 'normal',
+			// 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
+			top: addUnit(props.top)
+		}
+		if (props.customPrefix !== 'upicon') {
+			style.fontFamily = props.customPrefix
+		}
+		// 非主题色值时，才当作颜色值
+		if (props.color && !config.type.includes(props.color)) style.color = props.color
+
+		return style
+	})
+
+	// 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
+	const isImg = computed(() => {
+		return props.name.indexOf('/') !== -1
+	})
+
+	const imgStyle = computed(() => {
+		const style = {}
+		// 如果设置width和height属性，则优先使用，否则使用size属性
+		style.width = props.width ? addUnit(props.width) : addUnit(props.size)
+		style.height = props.height ? addUnit(props.height) : addUnit(props.size)
+		return style
+	})
+
+	// 通过图标名，查找对应的图标
+	const icon = computed(() => {
+		// 使用自定义图标的时候页面上会把name属性也展示出来，所以在这里处理一下
+		if (props.customPrefix !== 'upicon') {
+			return config.customIcons[props.name] || props.name
+		}
+		// 如果内置的图标中找不到对应的图标，就直接返回name值，因为用户可能传入的是unicode代码
+		return icons['upicon-' + props.name] || props.name
+	})
+
+	function clickHandler(e) {
+		emit('click', props.index)
+		// 是否阻止事件冒泡
+		props.stop && preventEvent(e)
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	// 变量定义
+	$up-icon-primary: $up-primary !default;
+	$up-icon-success: $up-success !default;
+	$up-icon-info: $up-info !default;
+	$up-icon-warning: $up-warning !default;
+	$up-icon-error: $up-error !default;
+	$up-icon-label-line-height:1 !default;
+
+	/* #ifdef MP-QQ || MP-TOUTIAO || MP-BAIDU || MP-KUAISHOU || MP-XHS */
+	// App端通过 uni.loadFontFace 加载包内本地字体，避免远程字体阻塞页面渲染。
+	@font-face {
+		font-family: 'upicon-iconfont';
+		src: url('https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf') format('truetype');
+	}
+	/* #endif */
+
+	.up-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: upicon-iconfont;
+			position: relative;
+			@include flex;
+			align-items: center;
+
+			&--primary {
+				color: $up-icon-primary;
+			}
+
+			&--success {
+				color: $up-icon-success;
+			}
+
+			&--error {
+				color: $up-icon-error;
+			}
+
+			&--warning {
+				color: $up-icon-warning;
+			}
+
+			&--info {
+				color: $up-icon-info;
+			}
+		}
+
+		&__img {
+			/* #ifndef APP-NVUE */
+			height: auto;
+			will-change: transform;
+			/* #endif */
+		}
+
+		&__label {
+			/* #ifndef APP-NVUE */
+			line-height: $up-icon-label-line-height;
+			/* #endif */
+		}
+	}
+</style>

package/components/up-icon/util.js

@@ -0,0 +1,212 @@
+import config from '../../libs/config/config.js'
+
+const iconFontFamily = 'upicon-iconfont'
+const appIconFontUrl = '_www/static/app-plus/uview-ultra/upicon.ttf'
+// App 端默认优先加载随包分发的本地字体，图标不再依赖 CDN。
+// 项目没有本地字体（未启用本地字体构建插件、或没拷贝 static/app-plus/uview-ultra/upicon.ttf）时：
+// App-Vue 在 uni.loadFontFace 失败后回退 config.iconUrl，App-nvue 先探测字体文件是否存在再决定字体地址。
+const useAppStaticIconFont = true
+// 字体加载失败后的重试上限与重试基础间隔。重试只能由定时器驱动，不能由“新建u-icon”驱动：
+// u-search、u-input的清除按钮仅在输入框聚焦时才创建，若在那一刻补发字体请求，
+// 微信开发者工具里正在聚焦的input会立即失去焦点，表现为输入内容后再也无法聚焦、无法删除内容。
+// https://github.com/ijry/uview-plus/issues/844
+const maxFontRetryTimes = 3
+const fontRetryDelay = 2000
+let fontRetryTimes = 0
+
+const params = {
+	loaded: false,
+	loading: false
+}
+
+// #ifdef APP-VUE
+const appVueLoadedPages = new WeakSet()
+const appVueLoadingPages = new WeakSet()
+// 本地字体加载失败后回退远程字体，每个页面只回退一次，避免反复请求不存在的本地字体
+const appVueFallbackPages = new WeakSet()
+// #endif
+
+const getCurrentAppVuePage = () => {
+	// #ifdef APP-VUE
+	try {
+		if (typeof getCurrentPages !== 'function') return null
+		const pages = getCurrentPages()
+		if (!Array.isArray(pages) || pages.length === 0) return null
+		const page = pages[pages.length - 1]
+		return page && (typeof page === 'object' || typeof page === 'function') ? page : null
+	} catch (e) {
+		return null
+	}
+	// #endif
+	return null
+}
+
+const isLoaded = () => {
+	// #ifdef APP-VUE
+	const page = getCurrentAppVuePage()
+	return !!page && appVueLoadedPages.has(page)
+	// #endif
+	return params.loaded
+}
+
+const getAppIconUrl = () => {
+	// #ifdef APP || APP-NVUE
+	if (!useAppStaticIconFont) {
+		return config.iconUrl
+	}
+	if (typeof plus !== 'undefined' && plus.io && typeof plus.io.convertLocalFileSystemURL === 'function') {
+		const iconFontPath = plus.io.convertLocalFileSystemURL(appIconFontUrl)
+		return iconFontPath && iconFontPath.startsWith('file://') ? iconFontPath : 'file://' + iconFontPath
+	}
+	return appIconFontUrl
+	// #endif
+	return ''
+}
+
+const getIconUrl = () => {
+	// #ifdef APP || APP-NVUE
+	return getAppIconUrl()
+	// #endif
+	return config.iconUrl
+}
+
+const markFontLoaded = () => {
+	// App Vue的字体注册只对当前页面WebView生效，由页面级状态在成功回调中记录。
+	// #ifdef APP-VUE
+	return
+	// #endif
+	params.loading = false
+	// #ifdef APP-NVUE
+	params.loaded = true
+	return
+	// #endif
+	// 非App Vue平台由loadFontOnce决定成功后是否复用本次加载结果。
+	if (config.loadFontOnce) {
+		params.loaded = true
+	}
+}
+
+// #ifdef APP-NVUE
+const addNvueFontRule = (family, url) => {
+	const domModule = weex.requireModule('dom')
+	domModule.addRule('fontFace', {
+		'fontFamily': family,
+		'src': `url('${url}')`
+	})
+}
+
+// nvue的dom.addRule没有失败回调，注册前先探测本地字体文件是否存在，不存在时回退远程字体
+const registerNvueFontFace = (iconUrl) => {
+	const addFontFace = (url) => {
+		addNvueFontRule(iconFontFamily, url)
+		if (config.customIcon && config.customIcon.family) {
+			addNvueFontRule(config.customIcon.family, config.customIcon.url)
+		}
+		markFontLoaded()
+	}
+	if (!useAppStaticIconFont || iconUrl === config.iconUrl) {
+		addFontFace(iconUrl)
+		return
+	}
+	if (typeof plus === 'undefined' || !plus.io || typeof plus.io.resolveLocalFileSystemURL !== 'function') {
+		addFontFace(iconUrl)
+		return
+	}
+	const localFontPath = typeof plus.io.convertLocalFileSystemURL === 'function'
+		? plus.io.convertLocalFileSystemURL(appIconFontUrl)
+		: appIconFontUrl
+	try {
+		plus.io.resolveLocalFileSystemURL(localFontPath, () => addFontFace(iconUrl), () => addFontFace(config.iconUrl))
+	} catch (e) {
+		addFontFace(iconUrl)
+	}
+}
+// #endif
+
+// #ifdef APP-VUE
+const registerAppVueFontFace = (iconUrl, appVuePage) => {
+	uni.loadFontFace({
+		global: true,
+		family: iconFontFamily,
+		source: 'url("' + iconUrl + '")',
+		success() {
+			appVueLoadingPages.delete(appVuePage)
+			appVueLoadedPages.add(appVuePage)
+			markFontLoaded()
+		},
+		fail() {
+			// 本地字体缺失时回退远程字体，保证未启用本地字体的老项目仍可显示图标
+			if (iconUrl !== config.iconUrl && !appVueFallbackPages.has(appVuePage)) {
+				appVueFallbackPages.add(appVuePage)
+				registerAppVueFontFace(config.iconUrl, appVuePage)
+				return
+			}
+			appVueLoadingPages.delete(appVuePage)
+		}
+	})
+}
+// #endif
+
+function loadFont() {
+	// #ifdef APP-VUE
+	const appVuePage = getCurrentAppVuePage()
+	if (!appVuePage || appVueLoadedPages.has(appVuePage) || appVueLoadingPages.has(appVuePage)) {
+		return false
+	}
+	appVueLoadingPages.add(appVuePage)
+	// #endif
+	// #ifndef APP-VUE
+	if (params.loaded || params.loading) {
+		return false
+	}
+	params.loading = true
+	// #endif
+	const iconUrl = getIconUrl()
+	// #ifdef APP-NVUE
+	// nvue通过weex的dom模块引入字体，相关文档地址如下：
+	// https://weex.apache.org/zh/docs/modules/dom.html#addrule
+	registerNvueFontFace(iconUrl)
+	// #endif
+	// #ifdef APP-VUE
+	registerAppVueFontFace(iconUrl, appVuePage)
+	// #endif
+	// #ifdef H5 || MP-WEIXIN || MP-ALIPAY
+	uni.loadFontFace({
+		global: true,
+		family: iconFontFamily,
+		source: 'url("' + iconUrl + '")',
+		success() {
+			markFontLoaded()
+		},
+		fail() {
+			// 失败后不立刻释放请求锁，改由定时器重试有限次数，
+			// 避免此后每创建一个u-icon都立刻补发一次字体请求。
+			if (fontRetryTimes < maxFontRetryTimes) {
+				fontRetryTimes++
+				setTimeout(() => {
+					params.loading = false
+					loadFont()
+				}, fontRetryDelay * fontRetryTimes)
+			}
+		}
+	})
+	// #endif
+	// #ifdef APP-VUE || H5 || MP-WEIXIN || MP-ALIPAY
+	if (config.customIcon && config.customIcon.family) {
+		uni.loadFontFace({
+			global: true,
+			family: config.customIcon.family,
+			source: 'url("' + config.customIcon.url + '")',
+			success() {},
+			fail() {}
+		})
+	}
+	// #endif
+	return true
+}
+
+export default {
+	params,
+	isLoaded,
+	loadFont
+}

package/components/up-image/image.js

@@ -0,0 +1,30 @@
+/*
+ * @Author       : LQ,jry
+ * @Description  :
+ * @version      : 3.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-08-20 14:20:58
+ * @FilePath     : /uview-ultra/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/components/up-image/image.uts

@@ -0,0 +1,30 @@
+/*
+ * @Author       : jry
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2024-04-22 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-08-28 11:01:51
+ * @FilePath     : /uview-ultra/libs/config/props/image.js
+ */
+export default {
+    // image组件
+    image: {
+        src: '',
+        mode: 'aspectFill',
+        width: '300',
+        height: '225',
+        shape: 'square',
+        radius: '0',
+        lazyLoad: false,
+        showMenuByLongpress: true,
+        loadingIcon: 'photo',
+        errorIcon: 'error-circle',
+        showLoading: true,
+        showError: true,
+        fade: true,
+        webp: false,
+        duration: 500,
+        bgColor: '#f3f4f6'
+    }
+} as UTSJSONObject

package/components/up-image/props.js

@@ -0,0 +1,87 @@
+import { defineMixin } from '../../libs/vue.js'
+import defProps from '../../libs/config/props.js'
+
+export const propsImage = 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
+        }
+    }
+})