uview-plus 3.5.5 → 3.5.10

package/changelog.md

@@ -1,3 +1,19 @@
+## 3.5.10（2025-08-22）
+feat: 新增poster海报生成组件
+
+
+## 3.5.9（2025-08-22）
+feat: 优化qrcode组件支持toTempFilePath方法
+
+## 3.5.8（2025-08-22）
+fix: 优化rpx下calendar高度计算强制px
+
+## 3.5.7（2025-08-22）
+feat: input和search新增onlyClearableOnFocused参数支持控制是否仅聚焦时显示清除按钮
+
+## 3.5.6（2025-08-21）
+feat: picker弹窗及datetime-picker组件支持页面内模式
+
 ## 3.5.5（2025-08-21）
 feat: popup弹窗及canlendar组件支持页面内插入无弹窗模式
 

package/components/u-calendar/month.vue

@@ -169,7 +169,7 @@
 					// #ifdef APP-NVUE
 					style.width = addUnit(dayWidth, 'px')
 					// #endif
-					style.height = addUnit(this.rowHeight)
+					style.height = addUnit(this.rowHeight, 'px')
 					if (index2 === 0) {
 						// 获取当前为星期几，如果为0，则为星期天，减一为每月第一天时，需要向左偏移的item个数
 						week = (week === 0 ? 7 : week) - 1

package/components/u-calendar/u-calendar.vue

@@ -18,7 +18,7 @@
 			></uHeader>
 			<scroll-view
 				:style="{
-                    height: addUnit(listHeight)
+                    height: addUnit(listHeight, 'px')
                 }"
 				scroll-y
 				@scroll="onScroll"
@@ -77,7 +77,7 @@ import dayjs from '../u-datetime-picker/dayjs.esm.min.js';
 import Calendar from '../../libs/util/calendar.js'
 import { mpMixin } from '../../libs/mixin/mpMixin.js'
 import { mixin } from '../../libs/mixin/mixin.js'
-import { addUnit, range, error, padZero } from '../../libs/function/index';
+import { addUnit, getPx, range, error, padZero } from '../../libs/function/index';
 import test from '../../libs/function/test';
 /**
  * Calendar 日历

package/components/u-datetime-picker/datetimePicker.js

@@ -39,5 +39,6 @@ export default {
         disabledColor: '',
         placeholder: t("up.common.pleaseChoose"),
         inputProps: {},
+        pageInline: false
     }
 }

package/components/u-datetime-picker/props.js

@@ -163,6 +163,11 @@ export const props = defineMixin({
         defaultIndex: {
             type: Array,
             default: () => defProps.datetimePicker.defaultIndex
+        },
+        // 是否页面内展示
+        pageInline:{
+            type: Boolean,
+            default: () => defProps.datetimePicker.pageInline
         }
     }
 })

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

@@ -9,13 +9,13 @@
 					v-model="inputValue"
 					v-bind="inputPropsInner"
 				></up-input>
-				<div class="input-cover">
-				</div>
+				<view class="input-cover">
+				</view>
 			</slot>
         </view>
         <u-picker
             ref="picker"
-            :show="show || (hasInput && showByClickInput)"
+            :show="pageInline || show || (hasInput && showByClickInput)"
             :popupMode="popupMode"
             :closeOnClickOverlay="closeOnClickOverlay"
             :columns="columns"
@@ -29,6 +29,7 @@
             :cancelColor="cancelColor"
             :confirmColor="confirmColor"
             :toolbarRightSlot="toolbarRightSlot"
+			:pageInline="pageInline"
             @close="close"
             @cancel="cancel"
             @confirm="confirm"

package/components/u-input/props.js

@@ -44,7 +44,12 @@ export const props = defineMixin({
 		// 是否显示清除控件
 		clearable: {
 			type: Boolean,
-			default: () => defProps.input.clearable
+			default: false
+		},
+		// 是否仅在聚焦时显示清除控件
+		onlyClearableOnFocused: {
+			type: Boolean,
+			default: true
 		},
 		// 是否密码类型
 		password: {

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

@@ -205,8 +205,15 @@ export default {
         },
         // 是否显示清除控件
         isShowClear() {
-            const { clearable, readonly, focused, innerValue } = this;
-            return !!clearable && !readonly && !!focused && innerValue !== "";
+            const { clearable, readonly, focused, innerValue, onlyClearableOnFocused } = this;
+            if (!clearable || readonly) {
+                return false;
+            }
+            if (onlyClearableOnFocused) {
+                return !!focused && innerValue !== "";
+            } else {
+                return innerValue !== "";
+            }
         },
         // 组件的类名
         inputClass() {

package/components/u-picker/picker.js

@@ -36,6 +36,7 @@ export default {
         bgColor: '',
         round: 0,
         duration: 300,
-        overlayOpacity: 0.5
+        overlayOpacity: 0.5,
+        pageInline: false
     }
 }

package/components/u-picker/props.js

@@ -142,6 +142,11 @@ export const props = defineMixin({
         overlayOpacity: {
             type: [Number, String],
             default: () => defProps.picker.overlayOpacity
-        }
+        },
+        // 是否页面内展示
+        pageInline:{
+			type: Boolean,
+			default: () => defProps.picker.pageInline
+		}
     }
 })

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

@@ -11,7 +11,7 @@
 				v-model="inputLabel"
 				v-bind="inputPropsInner">
 			</up-input>
-			<div class="input-cover"></div>
+			<view class="input-cover"></view>
 		</view>
 		<u-popup
 			:show="show || (hasInput && showByClickInput)"
@@ -20,6 +20,7 @@
 			:bgColor="bgColor"
 			:round="round"
 			:duration="duration"
+			:pageInline="pageInline"
 			:overlayOpacity="overlayOpacity"
 			@close="closeHandler"
 		>

package/components/u-popup/props.js

@@ -80,7 +80,7 @@ export const props = defineMixin({
         // 是否页面内展示
         pageInline:{
 			type: Boolean,
-			default: defProps.popup.pageInline
-		},
+			default: () => defProps.popup.pageInline
+		}
     }
 })

package/components/u-poster/u-poster.vue

@@ -0,0 +1,622 @@
+<template>
+	<view class="up-poster">
+		<!-- canvas用于绘制海报 -->
+		<canvas 
+			v-if="showCanvas" 
+			class="up-poster__hidden-canvas" 
+			:canvas-id="canvasId" 
+			:id="canvasId"
+			:style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }">
+		</canvas>
+		<!-- 隐藏的二维码组件，用于生成二维码图片 -->
+		<up-qrcode 
+			ref="qrCode" 
+			:val="qrCodeValue" 
+			:size="qrCodeSize" 
+			:margin="0" 
+            :loadMake="false"
+			background="#ffffff"
+			foreground="#000000"
+			:class="['up-poster__hidden-qrcode', qrCodeShow ? '' : 'up-poster__hidden-qrcode--hidden']"
+		/>
+	</view>
+</template>
+
+<script>
+/**
+ * Poster 海报组件
+ * @description 用于生成海报的组件，支持文本、图片、二维码等元素
+ * @tutorial https://ijry.github.io/uview-plus/components/poster.html
+ * 
+ * @property {Object} json 海报配置JSON数据
+ * @property {Object} json.css 海报容器样式
+ * @property {Array}  json.views 海报元素列表
+ * @property {String} json.views.type 元素类型(text/image/qrcode/view)
+ * @property {String} json.views.text 文本内容(仅text类型)
+ * @property {String} json.views.src 图片地址(仅image/qrcode类型)
+ * @property {Object} json.views.css 元素样式
+ * 
+ * @example <up-poster :json="posterJson"></up-poster>
+ */
+export default {
+	name: 'up-poster',
+	props: {
+		json: {
+			type: Object,
+			default: () => ({})
+		}
+	},
+	data() {
+		return {
+			canvasId: 'u-poster-canvas-' + Date.now(),
+			showCanvas: false,
+			canvasWidth: 0,
+			canvasHeight: 0,
+			// 二维码相关数据
+			qrCodeValue: '',
+			qrCodeSize: 200,
+			qrCodeShow: false,
+			// 存储多个二维码的数据
+			qrCodeMap: new Map()
+		}
+	},
+	computed: {
+		// 根据传入的css生成文本样式
+		getTextStyle() {
+			return (css) => {
+				const style = {};
+				if (css.color) style.color = css.color;
+				if (css.fontSize) style.fontSize = css.fontSize;
+				if (css.fontWeight) style.fontWeight = css.fontWeight;
+				if (css.lineHeight) style.lineHeight = css.lineHeight;
+				if (css.textAlign) style.textAlign = css.textAlign;
+				return style;
+			}
+		}
+	},
+	methods: {
+		/**
+		 * 导出海报图片
+		 * @description 根据json配置生成海报并导出为临时图片路径
+		 * @returns {Promise<Object>} 返回包含图片信息的对象
+		 * @author jry ijry@qq.com
+		 */
+		async exportImage() {
+			return new Promise(async(resolve, reject) => {
+                try {
+                    // 获取海报尺寸信息
+                    const posterSize = this.json.css;
+                    // 将rpx转换为px
+                    const width = this.convertRpxToPx(posterSize.width || '750rpx');
+                    const height = this.convertRpxToPx(posterSize.height || '1114rpx');
+                    
+                    // 设置canvas尺寸
+                    this.canvasWidth = width;
+                    this.canvasHeight = height;
+                    this.showCanvas = true;
+                    
+                    // 等待DOM更新
+                    await this.$nextTick();
+                    
+                    // 创建canvas上下文
+                    const ctx = uni.createCanvasContext(this.canvasId, this);
+                    
+                    // 绘制背景
+                    if (posterSize.background) {
+                        // 支持渐变背景色
+						if (posterSize.background.includes('linear-gradient') || posterSize.background.includes('radial-gradient')) {
+							this.drawGradientBackground(ctx, posterSize, 0, 0, width, height);
+						} else {
+							ctx.setFillStyle(posterSize.background);
+                            ctx.fillRect(0, 0, width, height);
+						}
+                    }
+                    
+                    // 绘制所有元素
+                    for (const item of this.json.views) {
+                        await this.drawItem(ctx, item, width, height);
+                    }
+                    
+                    // 绘制到canvas
+                    ctx.draw(false, () => {
+                        // 等待绘制完成
+                        setTimeout(() => {
+                            // 导出图片
+                            uni.canvasToTempFilePath({
+                                canvasId: this.canvasId,
+                                success: (res) => {
+                                    // 隐藏canvas
+                                    this.showCanvas = false;
+                                    // 返回图片路径
+                                    resolve({
+                                        width: width,
+                                        height: height,
+                                        path: res.tempFilePath,
+                                        // H5下添加blob格式
+                                        blob: this.dataURLToBlob(res.tempFilePath)
+                                    });
+                                },
+                                fail: (err) => {
+                                    // 隐藏canvas
+                                    this.showCanvas = false;
+                                    reject(new Error('导出图片失败: ' + JSON.stringify(err)));
+                                }
+                            }, this);
+                        }, 300);
+                    });
+                    
+                    // 超时处理
+                    setTimeout(() => {
+                        this.showCanvas = false;
+                        reject(new Error('导出图片超时'));
+                    }, 10000);
+                } catch (error) {
+                    this.showCanvas = false;
+                    reject(error);
+                }
+			});
+		},
+		
+		/**
+		 * 绘制单个元素
+		 * @description 根据元素类型绘制文本、图片、矩形或二维码到canvas
+		 * @param {Object} ctx canvas上下文
+		 * @param {Object} item 元素配置信息
+		 * @param {Number} canvasWidth canvas宽度
+		 * @param {Number} canvasHeight canvas高度
+		 * @returns {Promise} 绘制完成的Promise
+		 * @author jry ijry@qq.com
+		 */
+		async drawItem(ctx, item, canvasWidth, canvasHeight) {
+			const css = item.css || {};
+			const left = this.convertRpxToPx(css.left || '0rpx');
+			const top = this.convertRpxToPx(css.top || '0rpx');
+			const width = this.convertRpxToPx(css.width || '0rpx');
+			const height = this.convertRpxToPx(css.height || '0rpx');
+			
+			switch (item.type) {
+				case 'view':
+					// 绘制矩形背景
+					if (css.background) {
+						// 支持渐变背景色
+						if (css.background.includes('linear-gradient') || css.background.includes('radial-gradient')) {
+							this.drawGradientBackground(ctx, css, left, top, width, height);
+						} else {
+							ctx.setFillStyle(css.background);
+							// 处理圆角
+							if (css.radius) {
+								const radius = this.convertRpxToPx(css.radius);
+								this.drawRoundRect(ctx, left, top, width, height, radius, css.background);
+							} else {
+								ctx.fillRect(left, top, width, height);
+							}
+						}
+					}
+					break;
+					
+				case 'text':
+					// 设置文本样式
+					if (css.color) ctx.setFillStyle(css.color);
+					if (css.fontSize) {
+						const fontSize = this.convertRpxToPx(css.fontSize);
+						ctx.setFontSize(fontSize);
+					}
+					if (css.fontWeight) {
+						ctx.setLineWidth(css.fontWeight === 'bold' ? 2 : 1);
+					}
+					
+					// 处理文本换行
+					if (css.lineClamp) {
+						this.drawTextWithLineClamp(ctx, item.text, left, top, width, css);
+					} else {
+						// 修复：文本垂直居中对齐问题
+						const textBaseLine = css.fontSize ? this.convertRpxToPx(css.fontSize) / 2 : 10;
+						ctx.fillText(item.text, left, top + textBaseLine);
+					}
+					break;
+					
+				case 'image':
+					// 绘制图片
+					return new Promise((resolve) => {
+						uni.getImageInfo({
+							src: item.src,
+							success: (res) => {
+								// 处理圆角
+								if (css.radius) {
+									const radius = this.convertRpxToPx(css.radius);
+									this.clipRoundRect(ctx, left, top, width, height, radius);
+								}
+								ctx.drawImage(item.src, left, top, width, height);
+								// 恢复剪切区域
+								ctx.restore();
+								resolve();
+							},
+							fail: () => {
+								// 图片加载失败时绘制占位符
+								ctx.setFillStyle('#f5f5f5');
+								ctx.fillRect(left, top, width, height);
+								resolve();
+							}
+						});
+					});
+					
+				case 'qrcode':
+					// 绘制二维码
+					if (item.text) {
+						// 使用u-qrcode生成二维码图片
+						const qrCodeImageUrl = await this.generateQRCode(item.text, width, height);
+						return new Promise((resolve) => {
+							uni.getImageInfo({
+								src: qrCodeImageUrl,
+								success: (res) => {
+									ctx.drawImage(res.path, left, top, width, height);
+									resolve();
+								},
+								fail: () => {
+									// 二维码加载失败时绘制占位符
+									ctx.setFillStyle('#f5f5f5');
+									ctx.fillRect(left, top, width, height);
+									ctx.setFillStyle('#999');
+									ctx.setFontSize(12);
+									ctx.setTextAlign('center');
+									ctx.fillText('QR', left + width/2, top + height/2);
+									ctx.setTextAlign('left');
+									resolve();
+								}
+							});
+						});
+					} else {
+						// 绘制二维码占位符
+						ctx.setFillStyle('#f5f5f5');
+						ctx.fillRect(left, top, width, height);
+						ctx.setFillStyle('#999');
+						ctx.setFontSize(12);
+						ctx.setTextAlign('center');
+						ctx.fillText('QR', left + width/2, top + height/2);
+						ctx.setTextAlign('left');
+					}
+					break;
+			}
+		},
+		
+		/**
+		 * 绘制圆角矩形
+		 * @description 绘制指定位置和尺寸的圆角矩形
+		 * @param {Object} ctx canvas上下文
+		 * @param {Number} x x坐标
+		 * @param {Number} y y坐标
+		 * @param {Number} width 宽度
+		 * @param {Number} height 高度
+		 * @param {Number} radius 圆角半径
+		 * @param {String} fillColor 填充颜色
+		 * @author jry ijry@qq.com
+		 */
+		drawRoundRect(ctx, x, y, width, height, radius, fillColor) {
+			ctx.save();
+			ctx.beginPath();
+			ctx.moveTo(x + radius, y);
+			ctx.lineTo(x + width - radius, y);
+			ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+			ctx.lineTo(x + width, y + height - radius);
+			ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+			ctx.lineTo(x + radius, y + height);
+			ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+			ctx.lineTo(x, y + radius);
+			ctx.quadraticCurveTo(x, y, x + radius, y);
+			ctx.closePath();
+			if (fillColor) {
+				ctx.setFillStyle(fillColor);
+				ctx.fill();
+			}
+			ctx.restore();
+		},
+		
+		/**
+		 * 裁剪圆角矩形区域
+		 * @description 在canvas上创建圆角矩形裁剪区域
+		 * @param {Object} ctx canvas上下文
+		 * @param {Number} x x坐标
+		 * @param {Number} y y坐标
+		 * @param {Number} width 宽度
+		 * @param {Number} height 高度
+		 * @param {Number} radius 圆角半径
+		 * @author jry ijry@qq.com
+		 */
+		clipRoundRect(ctx, x, y, width, height, radius) {
+			ctx.save();
+			ctx.beginPath();
+			ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 1.5);
+			ctx.lineTo(x + width - radius, y);
+			ctx.arc(x + width - radius, y + radius, radius, Math.PI * 1.5, Math.PI * 2);
+			ctx.lineTo(x + width, y + height - radius);
+			ctx.arc(x + width - radius, y + height - radius, radius, 0, Math.PI * 0.5);
+			ctx.lineTo(x + radius, y + height);
+			ctx.arc(x + radius, y + height - radius, radius, Math.PI * 0.5, Math.PI);
+			ctx.closePath();
+			ctx.clip();
+		},
+		
+		/**
+		 * 绘制带行数限制的文本
+		 * @description 绘制可控制最大行数的文本，超出部分显示省略号
+		 * @param {Object} ctx canvas上下文
+		 * @param {String} text 文本内容
+		 * @param {Number} x x坐标
+		 * @param {Number} y y坐标
+		 * @param {Number} maxWidth 最大宽度
+		 * @param {Object} css 样式配置
+		 * @author jry ijry@qq.com
+		 */
+		drawTextWithLineClamp(ctx, text, x, y, maxWidth, css) {
+            const lineClamp = parseInt(css.lineClamp) || 1;
+            const lineHeight = css.lineHeight ? this.convertRpxToPx(css.lineHeight) : 20;
+            const lines = [];
+            let currentLine = '';
+            
+            for (let i = 0; i < text.length; i++) {
+                const char = text[i];
+                const testLine = currentLine + char;
+                const metrics = ctx.measureText(testLine);
+                
+                if (metrics.width > maxWidth && currentLine !== '') {
+                    lines.push(currentLine);
+                    currentLine = char;
+                    
+                    // 如果已达最大行数，添加省略号并结束
+                    if (lines.length === lineClamp) {
+                        if (metrics.width > maxWidth) {
+                            // 添加省略号
+                            let fitLine = currentLine.substring(0, currentLine.length - 1);
+                            while (ctx.measureText(fitLine + '...').width > maxWidth && fitLine.length > 0) {
+                                fitLine = fitLine.substring(0, fitLine.length - 1);
+                            }
+                            lines[lines.length - 1] = fitLine + '...';
+                        }
+                        break;
+                    }
+                } else {
+                    currentLine = testLine;
+                }
+                
+                // 处理最后一行
+                if (i === text.length - 1 && lines.length < lineClamp) {
+                    lines.push(currentLine);
+                }
+            }
+            
+            // 绘制每一行
+            for (let i = 0; i < lines.length; i++) {
+                // 修复：正确计算文本垂直位置
+                const textBaseLine = css.fontSize ? this.convertRpxToPx(css.fontSize) / 2 : 10;
+                ctx.fillText(lines[i], x, y + (i * lineHeight) + textBaseLine);
+            }
+        },
+		
+		/**
+		 * 生成二维码图片
+		 * @description 根据文本内容生成二维码图片URL
+		 * @param {String} text 二维码内容
+		 * @param {Number} width 二维码宽度
+		 * @param {Number} height 二维码高度
+		 * @returns {Promise<String>} 二维码图片URL
+		 * @author jry ijry@qq.com
+		 */
+		generateQRCode(text, width, height) {
+			return new Promise((resolve) => {
+				// 为每个二维码生成唯一标识
+				const qrCodeKey = `${text}_${width}_${height}`;
+				
+				// 检查是否已经生成过该二维码
+				if (this.qrCodeMap.has(qrCodeKey)) {
+					resolve(this.qrCodeMap.get(qrCodeKey));
+					return;
+				}
+				
+				// 使用 u-qrcode 组件生成二维码
+				try {
+					// 设置二维码参数
+					this.qrCodeValue = text;
+					this.qrCodeSize = Math.max(width, height);
+					this.qrCodeShow = true;
+					
+					// 等待DOM更新
+					this.$nextTick(() => {
+						// 获取二维码组件实例并导出图片
+						if (this.$refs.qrCode) {
+							// 延迟一点时间确保二维码渲染完成
+							setTimeout(() => {
+								// 调用 u-qrcode 的 toTempFilePath 方法导出图片
+								this.$refs.qrCode.toTempFilePath({
+									success: (res) => {
+										// 缓存二维码图片路径
+										this.qrCodeMap.set(qrCodeKey, res.tempFilePath);
+										this.qrCodeShow = false;
+										resolve(res.tempFilePath);
+									},
+									fail: (err) => {
+										console.error('二维码生成失败:', err);
+										this.qrCodeShow = false;
+									}
+								});
+							}, 300);
+						} else {
+							// 如果没有 u-qrcode 组件，返回占位符
+							this.qrCodeShow = false;
+						}
+					});
+				} catch (error) {
+					console.error('生成二维码出错:', error);
+					this.qrCodeShow = false;
+				}
+			});
+		},
+		
+		/**
+		 * 将rpx单位转换为px
+		 * @description 根据屏幕密度将rpx单位转换为px单位
+		 * @param {String|Number} rpxValue rpx值
+		 * @returns {Number} 转换后的px值
+		 * @author jry ijry@qq.com
+		 */
+		convertRpxToPx(rpxValue) {
+			if (typeof rpxValue === 'number') return rpxValue;
+			
+			// 使用uni-app自带的uni.rpx2px方法
+			if (typeof rpxValue === 'string' && rpxValue.endsWith('rpx')) {
+				const value = parseFloat(rpxValue);
+				return uni.rpx2px(value);
+			}
+			
+			return parseFloat(rpxValue) || 0;
+		},
+		
+		/**
+		 * 绘制渐变背景
+		 * @description 绘制线性渐变或径向渐变背景
+		 * @param {Object} ctx canvas上下文
+		 * @param {Object} css 样式配置
+		 * @param {Number} left 左边距
+		 * @param {Number} top 上边距
+		 * @param {Number} width 宽度
+		 * @param {Number} height 高度
+		 * @author jry ijry@qq.com
+		 */
+		drawGradientBackground(ctx, css, left, top, width, height) {
+			const background = css.background;
+			let gradient = null;
+			
+			// 处理线性渐变
+			if (background.includes('linear-gradient')) {
+				// 解析线性渐变角度和颜色
+				const angleMatch = background.match(/linear-gradient\((\d+)deg/);
+				const angle = angleMatch ? parseInt(angleMatch[1]) : 135;
+				
+				// 根据角度计算渐变起点和终点
+				let startX = left, startY = top, endX = left + width, endY = top + height;
+				
+				// 简化的角度处理（支持常见角度）
+				if (angle === 0) {
+					startX = left;
+					startY = top + height;
+					endX = left;
+					endY = top;
+				} else if (angle === 90) {
+					startX = left;
+					startY = top;
+					endX = left + width;
+					endY = top;
+				} else if (angle === 180) {
+					startX = left;
+					startY = top;
+					endX = left;
+					endY = top + height;
+				} else if (angle === 270) {
+					startX = left + width;
+					startY = top;
+					endX = left;
+					endY = top;
+				}
+				
+				gradient = ctx.createLinearGradient(startX, startY, endX, endY);
+				
+				// 解析颜色值
+				const colorMatches = background.match(/#[0-9a-fA-F]+|rgba?\([^)]+\)/g);
+				if (colorMatches && colorMatches.length >= 2) {
+					// 添加渐变色点
+					colorMatches.forEach((color, index) => {
+						const stop = index / (colorMatches.length - 1);
+						gradient.addColorStop(stop, color);
+					});
+				}
+			} 
+			// 处理径向渐变
+			else if (background.includes('radial-gradient')) {
+				// 径向渐变从中心开始
+				const centerX = left + width / 2;
+				const centerY = top + height / 2;
+				const radius = Math.min(width, height) / 2;
+				
+				gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, radius);
+				
+				// 解析颜色值
+				const colorMatches = background.match(/#[0-9a-fA-F]+|rgba?\([^)]+\)/g);
+				if (colorMatches && colorMatches.length >= 2) {
+					// 添加渐变色点
+					colorMatches.forEach((color, index) => {
+						const stop = index / (colorMatches.length - 1);
+						gradient.addColorStop(stop, color);
+					});
+				}
+			}
+			
+			if (gradient) {
+				ctx.setFillStyle(gradient);
+				// 处理圆角
+				if (css.radius) {
+					const radius = this.convertRpxToPx(css.radius);
+					this.drawRoundRect(ctx, left, top, width, height, radius, gradient);
+				} else {
+					ctx.fillRect(left, top, width, height);
+				}
+			}
+		},
+		
+		/**
+		 * 将dataURL转换为Blob
+		 * @description H5环境下将base64格式的dataURL转换为Blob对象
+		 * @param {String} dataURL base64格式的图片数据
+		 * @returns {Blob} Blob对象
+		 * @author jry ijry@qq.com
+		 */
+		dataURLToBlob(dataURL) {
+			// 检查是否为H5环境且是base64数据
+			// #ifdef H5
+			if (dataURL && dataURL.startsWith('data:image')) {
+				const parts = dataURL.split(';base64,');
+				const contentType = parts[0].split(':')[1];
+				const raw = window.atob(parts[1]);
+				const rawLength = raw.length;
+				const uInt8Array = new Uint8Array(rawLength);
+				
+				for (let i = 0; i < rawLength; ++i) {
+					uInt8Array[i] = raw.charCodeAt(i);
+				}
+				
+				return new Blob([uInt8Array], { type: contentType });
+			}
+			// #endif
+			
+			return null;
+		},
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.up-poster {
+	position: relative;
+	
+	&__canvas {
+		position: relative;
+		overflow: hidden;
+	}
+	
+	&__hidden-canvas {
+		position: fixed;
+		top: -10000px;
+		left: -10000px;
+		z-index: -1;
+	}
+	
+	&__hidden-qrcode {
+		position: fixed;
+		top: -10000px;
+		left: -10000px;
+		z-index: -1;
+		
+		&--hidden {
+			display: none;
+		}
+	}
+}
+</style>

package/components/u-qrcode/u-qrcode.vue

@@ -260,7 +260,7 @@ export default {
                 url: this.result
             }, e)
         },
-        async longpress() {
+        async toTempFilePath({success, fail}) {
             if (this.context) {
                 this.ctx.toTempFilePath(
                     0,
@@ -272,14 +272,15 @@ export default {
                     "",
                     1,
                     res => {
-                        this.$emit('longpressCallback', res.tempFilePath)
+                        success(res)
                     }
                 );
             }
             else {
-
                 // #ifdef MP-TOUTIAO || H5
-                this.$emit('longpressCallback', this.ctx.canvas.toDataURL("image/png", 1));
+                success({
+                    tempFilePath: this.ctx.canvas.toDataURL("image/png", 1)
+                })
                 // #endif
 
                 // #ifdef APP-PLUS
@@ -287,10 +288,9 @@ export default {
                     {
                         canvasId: this.cid,
                         success :res => {
-                            this.$emit('longpressCallback', res.tempFilePath)
+                            success(res)
                         },
-                        fail: err =>{
-                        }
+                        fail: fail
                     },
                     this)
                 // #endif
@@ -301,16 +301,22 @@ export default {
                     {
                         canvas,
                         success :res => {
-                            this.$emit('longpressCallback', res.tempFilePath)
+                            success(res)
                         },
-                        fail: err =>{
-                        }
+                        fail: fail
                     },
                     this)
                 // #endif
-
             }
-
+        },
+        async longpress() {
+            this.toTempFilePath({
+                success: res => {
+                    this.$emit('longpressCallback', res.tempFilePath)
+                },
+                fail: err => {
+                }
+            })
         },
 
         /**

package/components/u-search/props.js

@@ -1,138 +1,156 @@
 import { defineMixin } from '../../libs/vue'
 import defProps from '../../libs/config/props.js'
+
 export const props = defineMixin({
-    props: {
-        // 搜索框形状，round-圆形，square-方形
-        shape: {
-            type: String,
-            default: () => defProps.search.shape
-        },
-        // 搜索框背景色，默认值#f2f2f2
-        bgColor: {
-            type: String,
-            default: () => defProps.search.bgColor
-        },
-        // 占位提示文字
-        placeholder: {
-            type: String,
-            default: () => defProps.search.placeholder
-        },
-        // 是否启用清除控件
-        clearabled: {
-            type: Boolean,
-            default: () => defProps.search.clearabled
-        },
-        // 是否自动聚焦
-        focus: {
-            type: Boolean,
-            default: () => defProps.search.focus
-        },
-        // 是否在搜索框右侧显示取消按钮
-        showAction: {
-            type: Boolean,
-            default: () => defProps.search.showAction
-        },
-        // 右边控件的样式
-        actionStyle: {
-            type: Object,
-            default: () => defProps.search.actionStyle
-        },
-        // 取消按钮文字
-        actionText: {
-            type: String,
-            default: () => defProps.search.actionText
-        },
-        // 输入框内容对齐方式，可选值为 left|center|right
-        inputAlign: {
-            type: String,
-            default: () => defProps.search.inputAlign
-        },
-        // input输入框的样式，可以定义文字颜色，大小等，对象形式
-        inputStyle: {
-            type: Object,
-            default: () => defProps.search.inputStyle
-        },
-        // 是否启用输入框
-        disabled: {
-            type: Boolean,
-            default: () => defProps.search.disabled
-        },
-        // 边框颜色
-        borderColor: {
-            type: String,
-            default: () => defProps.search.borderColor
-        },
-        // 搜索图标的颜色，默认同输入框字体颜色
-        searchIconColor: {
-            type: String,
-            default: () => defProps.search.searchIconColor
-        },
-        // 输入框字体颜色
-        color: {
-            type: String,
-            default: () => defProps.search.color
-        },
-        // placeholder的颜色
-        placeholderColor: {
-            type: String,
-            default: () => defProps.search.placeholderColor
-        },
-        // 左边输入框的图标，可以为uView图标名称或图片路径
-        searchIcon: {
-            type: String,
-            default: () => defProps.search.searchIcon
-        },
-        searchIconSize: {
-            type: [Number, String],
-            default: () => defProps.search.searchIconSize
-        },
-        // 组件与其他上下左右元素之间的距离，带单位的字符串形式，如"30px"、"30px 20px"等写法
-        margin: {
-            type: String,
-            default: () => defProps.search.margin
-        },
-        // 开启showAction时，是否在input获取焦点时才显示
-        animation: {
-            type: Boolean,
-            default: () => defProps.search.animation
-        },
-        // 输入框的初始化内容
-        modelValue: {
-            type: String,
-            default: () => defProps.search.value
-        },
+	props: {
+		// #ifdef VUE3
+		// 绑定的值
+		modelValue: {
+			type: [String, Number],
+			default: () => defProps.search.value
+		},
+		// #endif
+		// #ifdef VUE2
+		// 绑定的值
 		value: {
-		    type: String,
-		    default: () => defProps.search.value
-		},
-        // 输入框最大能输入的长度，-1为不限制长度(来自uniapp文档)
-        maxlength: {
-            type: [String, Number],
-            default: () => defProps.search.maxlength
-        },
-        // 搜索框高度，单位px
-        height: {
-            type: [String, Number],
-            default: () => defProps.search.height
-        },
-        // 搜索框左侧文本
-        label: {
-            type: [String, Number, null],
-            default: () => defProps.search.label
-        },
-        // 键盘弹起时，是否自动上推页面	
-        adjustPosition: {
-            type: Boolean,
-            default: () => true
-        },
-        // 键盘收起时，是否自动失去焦点	
-        autoBlur: {
-            type: Boolean,
-            default: () => false
-        },
-        iconPosition: {
-            type: String,
-            default: () => defProps.search.iconPosition
-        }
-    }
-})
+			type: [String, Number],
+			default: () => defProps.search.value
+		},
+		// #endif
+		// 搜索框形状，round-圆形，square-方形
+		shape: {
+			type: String,
+			default: () => defProps.search.shape
+		},
+		// 搜索框背景色
+		bgColor: {
+			type: String,
+			default: () => defProps.search.bgColor
+		},
+		// 占位提示文字
+		placeholder: {
+			type: String,
+			default: () => defProps.search.placeholder
+		},
+		// 是否启用清除控件
+		clearabled: {
+			type: Boolean,
+			default: () => defProps.search.clearabled
+		},
+		// 是否仅聚焦时显示清除控件
+		onlyClearableOnFocused: {
+			type: Boolean,
+			default: true
+		},
+		// 是否自动聚焦
+		focus: {
+			type: Boolean,
+			default: () => defProps.search.focus
+		},
+		// 是否在搜索框右侧显示取消按钮
+		showAction: {
+			type: Boolean,
+			default: () => defProps.search.showAction
+		},
+		// 右侧取消按钮文字
+		actionText: {
+			type: String,
+			default: () => defProps.search.actionText
+		},
+		// 搜索框左侧文本
+		label: {
+			type: [String, Number, null],
+			default: () => defProps.search.label
+		},
+		// 输入框内容对齐方式，可选值为：left|center|right
+		inputAlign: {
+			type: String,
+			default: () => defProps.search.inputAlign
+		},
+		// 是否启用输入框
+		disabled: {
+			type: Boolean,
+			default: () => defProps.search.disabled
+		},
+		// 开启showAction时，是否在input获取焦点时才显示
+		animation: {
+			type: Boolean,
+			default: () => defProps.search.animation
+		},
+		// 边框颜色，只要配置了颜色，才会有边框
+		borderColor: {
+			type: String,
+			default: () => defProps.search.borderColor
+		},
+		// 搜索图标的颜色，默认同输入框字体颜色
+		searchIconColor: {
+			type: String,
+			default: () => defProps.search.searchIconColor
+		},
+		// 搜索图标的大小
+		searchIconSize: {
+			type: [Number, String],
+			default: () => defProps.search.searchIconSize
+		},
+		// 输入框字体颜色
+		color: {
+			type: String,
+			default: () => defProps.search.color
+		},
+		// placeholder的颜色
+		placeholderColor: {
+			type: String,
+			default: () => defProps.search.placeholderColor
+		},
+		// 左边输入框的图标，可以为uView图标名称或图片路径
+		searchIcon: {
+			type: String,
+			default: () => defProps.search.searchIcon
+		},
+		// 组件与其他上下左右元素之间的距离，带单位的字符串形式，如"30px"
+		margin: {
+			type: String,
+			default: () => defProps.search.margin
+		},
+		// 应该是uView-plus版本新增的，用于控制搜索图标的插槽位置
+		iconPosition: {
+			type: String,
+			default: () => defProps.search.iconPosition
+		},
+		// 输入框最大能输入的长度，-1为不限制长度
+		maxlength: {
+			type: [String, Number],
+			default: () => defProps.search.maxlength
+		},
+		// 输入框高度，单位px
+		height: {
+			type: [String, Number],
+			default: () => defProps.search.height
+		},
+		// 键盘弹起时，是否自动上推页面
+		adjustPosition: {
+			type: Boolean,
+			default: () => defProps.search.adjustPosition
+		},
+		// 键盘收起时，是否自动失去焦点
+		autoBlur: {
+			type: Boolean,
+			default: () => defProps.search.autoBlur
+		},
+		// 输入框的样式，对象形式
+		inputStyle: {
+			type: Object,
+			default: () => defProps.search.inputStyle
+		},
+		// 右侧控件的样式，对象形式
+		actionStyle: {
+			type: Object,
+			default: () => defProps.search.actionStyle
+		},
+		// 自定义样式，对象形式
+		customStyle: {
+			type: Object,
+			default: () => defProps.search.customStyle
+		}
+	}
+})

package/components/u-search/u-search.vue

@@ -55,7 +55,7 @@
 			/>
 			<view
 			    class="u-search__content__icon u-search__content__close"
-			    v-if="keyword && clearabled && focused"
+			    v-if="isShowClear"
 			    @click="clear"
 			>
 				<up-icon
@@ -111,6 +111,7 @@
 	 * @property {String | Number}	label				搜索框左边显示内容
 	 * @property {Boolean}	        adjustPosition	    键盘弹起时，是否自动上推页面
 	 * @property {Boolean}	        autoBlur	        键盘收起时，是否自动失去焦点
+	 * @property {Boolean}	        onlyClearableOnFocused	是否仅在聚焦时显示清除控件（默认 true ）
 	 * @property {Object}			customStyle			定义需要用到的外部样式
 	 *
 	 * @event {Function} change 输入框内容发生变化时触发
@@ -125,7 +126,6 @@
 		data() {
 			return {
 				keyword: '',
-				showClear: false, // 是否显示右边的清除图标
 				show: false,
 				// 标记input当前状态是否处于聚焦中，如果是，才会显示右侧的清除控件
 				focused: this.focus
@@ -165,6 +165,18 @@
 		computed: {
 			showActionBtn() {
 				return !this.animation && this.showAction
+			},
+			// 是否显示清除控件
+			isShowClear() {
+				const { clearabled, focused, keyword, onlyClearableOnFocused } = this;
+				if (!clearabled) {
+					return false;
+				}
+				if (onlyClearableOnFocused) {
+					return !!focused && keyword !== "";
+				} else {
+					return keyword !== "";
+				}
 			}
 		},
 		emits: ['clear', 'search', 'custom', 'focus', 'blur', 'click', 'clickIcon', 'update:modelValue', 'change'],

package/package.json

@@ -2,7 +2,7 @@
   "id": "uview-plus",
   "name": "uview-plus",
   "displayName": "零云®uview-plus3.0重磅发布，全面的Vue3鸿蒙跨端移动组件库，组件丰富维护更新稳定。",
-  "version": "3.5.5",
+  "version": "3.5.10",
   "description": "零云®uview-plus已兼容vue3支持多语言，100+全面的组件和便捷的工具会让您信手拈来。近期新增拖动排序、条码、图片裁剪、下拉刷新、虚拟列表、签名、Markdown等。",
   "keywords": [
     "uview",