stellar-ui-v2 1.38.9 → 1.38.10

package/components/ste-barcode/ste-barcode.vue

@@ -1,213 +1,203 @@
-<template>
-	<view class="ste-barcode-root">
-		<!-- #ifdef H5 -->
-		<canvas
-			:style="{ width: width + 'px', height: height + 'px' }"
-			:canvas-id="canvasId"
-			:id="canvasId"
-			class="h5-canvas"
-		></canvas>
-		<!-- #endif -->
-
-		<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
-		<canvas
-			type="2d"
-			:id="canvasId"
-			:style="{ width: width + 'px', height: height + 'px' }"
-			class="mp-canvas"
-		></canvas>
-		<!-- #endif -->
-	</view>
-</template>
-
-<script>
-/**
- * ste-barcode 条形码
- * @description 条形码组件
- * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-barcode
- * @property {String} content 条形码内容(仅支持数字和字母)
- * @property {Number} width 条形码宽度，单位`px`
- * @property {Number} height 条形码高度，单位`px`
- * @property {String} background 背景色
- * @property {String} foreground 前景色(条形码画笔颜色)
- * @event {Function} loadImage 加载完成后返回条形码对应的图片数据
- */
-import utils from '../../utils/utils';
-import { PATTERNS, stringToCode128 } from './encode2';
-
-export default {
-	group: '展示组件',
-	name: 'ste-barcode',
-	title: 'Barcode 条形码',
-	options: {
-		virtualHost: true,
-	},
-	props: {
-		content: {
-			type: String,
-			required: true,
-		},
-		width: {
-			type: Number,
-			default: 300,
-		},
-		height: {
-			type: Number,
-			default: 100,
-		},
-		background: {
-			type: String,
-			default: '#FFFFFF',
-		},
-		foreground: {
-			type: String,
-			default: '#000000',
-		},
-	},
-
-	data() {
-		return {
-			canvasId: 'ste-barcode-' + utils.guid(8),
-		};
-	},
-
-	mounted() {
-		this.initCanvas();
-	},
-	watch: {
-		content: {
-			handler(newVal) {
-				if (!newVal) return;
-				this.initCanvas();
-			},
-		},
-	},
-	methods: {
-		initCanvas() {
-			const canvas = utils.getCanvasContext(this.canvasId, this).then((res) => {
-				// #ifndef H5
-				const context = res.getContext('2d');
-				const dpr = utils.System.getWindowInfo().pixelRatio;
-				res.width = this.width * dpr;
-				res.height = this.height * dpr;
-				context.scale(dpr, dpr);
-				this.drawBarcodeMP(context, res);
-
-				// #endif
-
-				// #ifdef H5
-				this.drawBarcodeH5(res);
-				// #endif
-			});
-		},
-		// 将 PATTERNS 码序列转换为二进制序列
-		patternsToBinary(codes) {
-			let binary = '';
-			for (let i = 0; i < codes.length; i++) {
-				const pattern = PATTERNS[codes[i]];
-				for (let j = 0; j < 8; j += 2) {
-					// 添加黑色条
-					binary += '1'.repeat(pattern[j]);
-					// 添加白色空格
-					if (j + 1 < 8) {
-						binary += '0'.repeat(pattern[j + 1]);
-					}
-				}
-			}
-			return binary;
-		},
-		// H5环境下的绘制方法
-		drawBarcodeH5(context) {
-			if (!this.content) return;
-			// 生成编码数据
-			const codes = stringToCode128(this.content);
-			if (!codes || codes.length === 0) {
-				return;
-			}
-
-			// 转换为二进制序列
-			const barcodeData = this.patternsToBinary(codes);
-
-			// 清空画布
-			context.setFillStyle(this.background);
-			context.fillRect(0, 0, this.width, this.height);
-
-			// 设置条码颜色
-			context.setFillStyle(this.foreground);
-
-			// 直接使用画布宽度，不考虑边距
-			const unitWidth = this.width / barcodeData.length;
-
-			// 绘制条码
-			let x = 0;
-			for (let i = 0; i < barcodeData.length; i++) {
-				if (barcodeData[i] === '1') {
-					context.fillRect(x, 0, Math.ceil(unitWidth), this.height);
-				}
-				x += unitWidth;
-			}
-
-			context.draw();
-			uni.canvasToTempFilePath({
-				canvasId: this.canvasId,
-				canvas: context,
-				complete: (res) => {
-					if (!res || !res.tempFilePath) {
-						console.error('图片生成失败');
-					} else {
-						this.$emit('loadImage', res.tempFilePath);
-					}
-				},
-			});
-		},
-
-		// 小程序环境下的绘制方法
-		drawBarcodeMP(context, canvas) {
-			if (!context || !this.content) return;
-
-			const codes = stringToCode128(this.content);
-			if (!codes || codes.length === 0) return;
-
-			// 清空画布
-			context.fillStyle = this.background;
-			context.fillRect(0, 0, this.width, this.height);
-
-			const barWeight = this.width / ((codes.length - 3) * 11 + 35);
-			let x = 0;
-
-			// 绘制条码
-			context.fillStyle = this.foreground;
-			for (let i = 0; i < codes.length; i++) {
-				const pattern = PATTERNS[codes[i]];
-				for (let bar = 0; bar < 8; bar += 2) {
-					const barW = pattern[bar] * barWeight;
-					if (barW > 0) {
-						context.fillRect(x, 0, barW, this.height);
-					}
-					x += barW + pattern[bar + 1] * barWeight;
-				}
-			}
-
-			uni.canvasToTempFilePath({
-				canvas: canvas,
-				complete: (res) => {
-					if (!res || !res.tempFilePath) {
-						console.error('图片生成失败');
-					} else {
-						this.$emit('loadImage', res.tempFilePath);
-					}
-				},
-			});
-		},
-	},
-};
-</script>
-
-<style>
-.ste-barcode-root {
-	width: fit-content;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-</style>
+<template>
+	<view class="ste-barcode-root">
+		<!-- #ifdef H5 || APP -->
+		<canvas :style="{ width: width + 'px', height: height + 'px' }" :canvas-id="canvasId" :id="canvasId" class="h5-canvas"></canvas>
+		<!-- #endif -->
+
+		<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
+		<canvas type="2d" :id="canvasId" :style="{ width: width + 'px', height: height + 'px' }" class="mp-canvas"></canvas>
+		<!-- #endif -->
+	</view>
+</template>
+
+<script>
+/**
+ * ste-barcode 条形码
+ * @description 条形码组件
+ * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-barcode
+ * @property {String} content 条形码内容(仅支持数字和字母)
+ * @property {Number} width 条形码宽度，单位`px`
+ * @property {Number} height 条形码高度，单位`px`
+ * @property {String} background 背景色
+ * @property {String} foreground 前景色(条形码画笔颜色)
+ * @event {Function} loadImage 加载完成后返回条形码对应的图片数据
+ */
+import utils from '../../utils/utils';
+import { PATTERNS, stringToCode128 } from './encode2';
+
+export default {
+	group: '展示组件',
+	name: 'ste-barcode',
+	title: 'Barcode 条形码',
+	options: {
+		virtualHost: true,
+	},
+	props: {
+		content: {
+			type: String,
+			required: true,
+		},
+		width: {
+			type: Number,
+			default: 300,
+		},
+		height: {
+			type: Number,
+			default: 100,
+		},
+		background: {
+			type: String,
+			default: '#FFFFFF',
+		},
+		foreground: {
+			type: String,
+			default: '#000000',
+		},
+	},
+
+	data() {
+		return {
+			canvasId: 'ste-barcode-' + utils.guid(8),
+		};
+	},
+
+	mounted() {
+		this.initCanvas();
+	},
+	watch: {
+		content: {
+			handler(newVal) {
+				if (!newVal) return;
+				this.initCanvas();
+			},
+		},
+	},
+	methods: {
+		initCanvas() {
+			const canvas = utils.getCanvasContext(this.canvasId, this).then((res) => {
+				// #ifndef H5 || APP
+				const context = res.getContext('2d');
+				const dpr = utils.System.getWindowInfo().pixelRatio;
+				res.width = this.width * dpr;
+				res.height = this.height * dpr;
+				context.scale(dpr, dpr);
+				this.drawBarcodeMP(context, res);
+
+				// #endif
+
+				// #ifdef H5 || APP
+				this.drawBarcodeH5(res);
+				// #endif
+			});
+		},
+		// 将 PATTERNS 码序列转换为二进制序列
+		patternsToBinary(codes) {
+			let binary = '';
+			for (let i = 0; i < codes.length; i++) {
+				const pattern = PATTERNS[codes[i]];
+				for (let j = 0; j < 8; j += 2) {
+					// 添加黑色条
+					binary += '1'.repeat(pattern[j]);
+					// 添加白色空格
+					if (j + 1 < 8) {
+						binary += '0'.repeat(pattern[j + 1]);
+					}
+				}
+			}
+			return binary;
+		},
+		// H5环境下的绘制方法
+		drawBarcodeH5(context) {
+			if (!this.content) return;
+			// 生成编码数据
+			const codes = stringToCode128(this.content);
+			if (!codes || codes.length === 0) {
+				return;
+			}
+
+			// 转换为二进制序列
+			const barcodeData = this.patternsToBinary(codes);
+
+			// 清空画布
+			context.setFillStyle(this.background);
+			context.fillRect(0, 0, this.width, this.height);
+
+			// 设置条码颜色
+			context.setFillStyle(this.foreground);
+
+			// 直接使用画布宽度，不考虑边距
+			const unitWidth = this.width / barcodeData.length;
+
+			// 绘制条码
+			let x = 0;
+			for (let i = 0; i < barcodeData.length; i++) {
+				if (barcodeData[i] === '1') {
+					context.fillRect(x, 0, Math.ceil(unitWidth), this.height);
+				}
+				x += unitWidth;
+			}
+
+			context.draw();
+			uni.canvasToTempFilePath({
+				canvasId: this.canvasId,
+				canvas: context,
+				complete: (res) => {
+					if (!res || !res.tempFilePath) {
+						console.error('图片生成失败');
+					} else {
+						this.$emit('loadImage', res.tempFilePath);
+					}
+				},
+			});
+		},
+
+		// 小程序环境下的绘制方法
+		drawBarcodeMP(context, canvas) {
+			if (!context || !this.content) return;
+
+			const codes = stringToCode128(this.content);
+			if (!codes || codes.length === 0) return;
+
+			// 清空画布
+			context.fillStyle = this.background;
+			context.fillRect(0, 0, this.width, this.height);
+
+			const barWeight = this.width / ((codes.length - 3) * 11 + 35);
+			let x = 0;
+
+			// 绘制条码
+			context.fillStyle = this.foreground;
+			for (let i = 0; i < codes.length; i++) {
+				const pattern = PATTERNS[codes[i]];
+				for (let bar = 0; bar < 8; bar += 2) {
+					const barW = pattern[bar] * barWeight;
+					if (barW > 0) {
+						context.fillRect(x, 0, barW, this.height);
+					}
+					x += barW + pattern[bar + 1] * barWeight;
+				}
+			}
+
+			uni.canvasToTempFilePath({
+				canvas: canvas,
+				complete: (res) => {
+					if (!res || !res.tempFilePath) {
+						console.error('图片生成失败');
+					} else {
+						this.$emit('loadImage', res.tempFilePath);
+					}
+				},
+			});
+		},
+	},
+};
+</script>
+
+<style>
+.ste-barcode-root {
+	width: fit-content;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+</style>

package/components/ste-qrcode/ste-qrcode.vue

@@ -1,218 +1,218 @@
-<template>
-	<view class="ste-qrcode-root" :style="{ width: `${size}px`, height: `${size}px` }">
-		<view class="canvas-wrapper">
-			<!-- #ifdef H5 -->
-			<canvas :style="[compCanvasStyle]" :canvas-id="canvasId" :id="canvasId" class="h5-canvas"></canvas>
-			<!-- #endif -->
-
-			<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
-			<canvas type="2d" :id="canvasId" :style="[compCanvasStyle]" class="mp-canvas"></canvas>
-			<!-- #endif -->
-		</view>
-	</view>
-</template>
-
-<script>
-/**
- * ste-qrcode 二维码
- * @description 二维码组件
- * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-qrcode
- * @property {String} content 二维码内容
- * @property {Number} size 二维码尺寸，单位`px`
- * @property {String} background 背景色
- * @property {String} foreground 前景色(条形码画笔颜色)
- * @property {String} foregroundImageSrc 二维码中间logo图
- * @property {String} foregroundImageWidth logo图宽度, 默认二维码尺寸的四分之一
- * @property {String} foregroundImageHeight logo图高度, 默认二维码尺寸的四分之一
- * @event {Function} loadImage 加载完成后返回条形码对应的图片数据
- */
-import UQRCode from './uqrcode';
-import utils from '../../utils/utils';
-
-export default {
-	group: '展示组件',
-	name: 'ste-qrcode',
-	title: 'QRcode 二维码',
-	options: {
-		virtualHost: true,
-	},
-	props: {
-		// 二维码内容
-		content: {
-			type: String,
-			required: true,
-		},
-		// 二维码尺寸
-		size: {
-			type: Number,
-			default: 100,
-		},
-		// 背景色
-		background: {
-			type: String,
-			default: '#FFFFFF',
-		},
-		// 前景色
-		foreground: {
-			type: String,
-			default: '#000000',
-		},
-		// 二维码logo
-		foregroundImageSrc: {
-			type: String,
-			default: '',
-		},
-		// logo尺寸 默认画布尺寸四分之一
-		foregroundImageWidth: {
-			type: Number,
-			default: null,
-		},
-		// logo尺寸 默认画布尺寸四分之一
-		foregroundImageHeight: {
-			type: Number,
-			default: null,
-		},
-	},
-
-	data() {
-		return {
-			canvasId: 'ste-qrcode-' + utils.guid(8),
-			canvasWidth: this.size,
-			canvasHeight: this.size,
-		};
-	},
-	mounted() {
-		this.initCanvas();
-	},
-	computed: {
-		compCanvasStyle() {
-			let style = {};
-			return {
-				width: this.canvasWidth + 'px',
-				height: this.canvasHeight + 'px',
-				transform: `scale(${this.size / this.canvasWidth}, ${this.size / this.canvasHeight})`,
-			};
-		},
-	},
-	watch: {
-		content: {
-			handler() {
-				this.initCanvas();
-			},
-			immediate: true,
-		},
-	},
-	methods: {
-		initCanvas() {
-			if (!this.content) return;
-			this.$nextTick(() => {
-				const canvas = utils.getCanvasContext(this.canvasId, this).then((res) => {
-					let context = res;
-					// #ifndef H5
-					context = res.getContext('2d');
-					// #endif
-
-					this.draw(context, res);
-				});
-			});
-		},
-		draw(ctx, canvas) {
-			const qr = new UQRCode();
-			qr.useDynamicSize = true;
-
-			qr.backgroundColor = this.background;
-			qr.foregroundColor = this.foreground;
-			qr.foregroundImageSrc = this.foregroundImageSrc ? `${this.foregroundImageSrc}?${new Date().getTime()}` : '';
-			this.foregroundImageWidth ? (qr.foregroundImageWidth = this.foregroundImageWidth) : '';
-			this.foregroundImageHeight ? (qr.foregroundImageHeight = this.foregroundImageHeight) : '';
-			// 设置二维码内容
-			qr.data = this.content;
-			// 设置二维码大小，必须与canvas设置的宽高一致
-			qr.size = this.size;
-			// 调用制作二维码方法
-			qr.make();
-
-			// #ifdef MP-WEIXIN || MP-ALIPAY
-
-			const dpr = utils.System.getWindowInfo().pixelRatio;
-			canvas.width = qr.dynamicSize * dpr;
-			canvas.height = qr.dynamicSize * dpr;
-			ctx.scale(dpr, dpr);
-
-			qr.loadImage = (src) => {
-				// 需要返回Promise对象，小程序下获取网络图片信息需先配置download域名白名单才能生效
-				return new Promise((resolve, reject) => {
-					var img = canvas.createImage();
-					img.src = src;
-					img.onload = () => {
-						// resolve返回img
-						resolve(img);
-					};
-					img.onerror = (err) => {
-						// reject返回错误信息
-						reject(err);
-					};
-				});
-			};
-			// #endif
-
-			// #ifdef H5
-			this.canvasWidth = qr.dynamicSize;
-			this.canvasHeight = qr.dynamicSize;
-
-			qr.loadImage = (src) => {
-				// 需要返回Promise对象
-				return new Promise((resolve, reject) => {
-					uni.getImageInfo({
-						src,
-						success: (res) => {
-							resolve(res.path);
-						},
-						fail: (err) => {
-							// reject返回错误信息
-							reject(err);
-						},
-					});
-				});
-			};
-
-			// #endif
-
-			// 设置uQRCode实例的canvas上下文
-			qr.canvasContext = ctx;
-			// 调用绘制方法将二维码图案绘制到canvas上
-			setTimeout(() => {
-				qr.drawCanvas().then(() => {
-					setTimeout(() => {
-						uni.canvasToTempFilePath({
-							canvas: canvas,
-							canvasId: this.canvasId,
-
-							complete: (res) => {
-								if (!res || !res.tempFilePath) {
-									console.error('图片生成失败');
-								} else {
-									this.$emit('loadImage', res.tempFilePath);
-								}
-							},
-						});
-					}, 1500);
-				});
-			}, 300);
-		},
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-.ste-qrcode-root {
-	// width: fit-content;
-	// display: flex;
-	// justify-content: center;
-	// align-items: center;
-	position: relative;
-	.h5-canvas {
-		transform-origin: top left;
-	}
-}
-</style>
+<template>
+	<view class="ste-qrcode-root" :style="{ width: `${size}px`, height: `${size}px` }">
+		<view class="canvas-wrapper">
+			<!-- #ifdef H5 || APP -->
+			<canvas :style="[compCanvasStyle]" :canvas-id="canvasId" :id="canvasId" class="h5-canvas"></canvas>
+			<!-- #endif -->
+
+			<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
+			<canvas type="2d" :id="canvasId" :style="[compCanvasStyle]" class="mp-canvas"></canvas>
+			<!-- #endif -->
+		</view>
+	</view>
+</template>
+
+<script>
+/**
+ * ste-qrcode 二维码
+ * @description 二维码组件
+ * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-qrcode
+ * @property {String} content 二维码内容
+ * @property {Number} size 二维码尺寸，单位`px`
+ * @property {String} background 背景色
+ * @property {String} foreground 前景色(条形码画笔颜色)
+ * @property {String} foregroundImageSrc 二维码中间logo图
+ * @property {String} foregroundImageWidth logo图宽度, 默认二维码尺寸的四分之一
+ * @property {String} foregroundImageHeight logo图高度, 默认二维码尺寸的四分之一
+ * @event {Function} loadImage 加载完成后返回条形码对应的图片数据
+ */
+import UQRCode from './uqrcode';
+import utils from '../../utils/utils';
+
+export default {
+	group: '展示组件',
+	name: 'ste-qrcode',
+	title: 'QRcode 二维码',
+	options: {
+		virtualHost: true,
+	},
+	props: {
+		// 二维码内容
+		content: {
+			type: String,
+			required: true,
+		},
+		// 二维码尺寸
+		size: {
+			type: Number,
+			default: 100,
+		},
+		// 背景色
+		background: {
+			type: String,
+			default: '#FFFFFF',
+		},
+		// 前景色
+		foreground: {
+			type: String,
+			default: '#000000',
+		},
+		// 二维码logo
+		foregroundImageSrc: {
+			type: String,
+			default: '',
+		},
+		// logo尺寸 默认画布尺寸四分之一
+		foregroundImageWidth: {
+			type: Number,
+			default: null,
+		},
+		// logo尺寸 默认画布尺寸四分之一
+		foregroundImageHeight: {
+			type: Number,
+			default: null,
+		},
+	},
+
+	data() {
+		return {
+			canvasId: 'ste-qrcode-' + utils.guid(8),
+			canvasWidth: this.size,
+			canvasHeight: this.size,
+		};
+	},
+	mounted() {
+		this.initCanvas();
+	},
+	computed: {
+		compCanvasStyle() {
+			let style = {};
+			return {
+				width: this.canvasWidth + 'px',
+				height: this.canvasHeight + 'px',
+				transform: `scale(${this.size / this.canvasWidth}, ${this.size / this.canvasHeight})`,
+			};
+		},
+	},
+	watch: {
+		content: {
+			handler() {
+				this.initCanvas();
+			},
+			immediate: true,
+		},
+	},
+	methods: {
+		initCanvas() {
+			if (!this.content) return;
+			this.$nextTick(() => {
+				const canvas = utils.getCanvasContext(this.canvasId, this).then((res) => {
+					let context = res;
+					// #ifndef H5 || APP
+					context = res.getContext('2d');
+					// #endif
+
+					this.draw(context, res);
+				});
+			});
+		},
+		draw(ctx, canvas) {
+			const qr = new UQRCode();
+			qr.useDynamicSize = true;
+
+			qr.backgroundColor = this.background;
+			qr.foregroundColor = this.foreground;
+			qr.foregroundImageSrc = this.foregroundImageSrc ? `${this.foregroundImageSrc}?${new Date().getTime()}` : '';
+			this.foregroundImageWidth ? (qr.foregroundImageWidth = this.foregroundImageWidth) : '';
+			this.foregroundImageHeight ? (qr.foregroundImageHeight = this.foregroundImageHeight) : '';
+			// 设置二维码内容
+			qr.data = this.content;
+			// 设置二维码大小，必须与canvas设置的宽高一致
+			qr.size = this.size;
+			// 调用制作二维码方法
+			qr.make();
+
+			// #ifdef MP-WEIXIN || MP-ALIPAY
+
+			const dpr = utils.System.getWindowInfo().pixelRatio;
+			canvas.width = qr.dynamicSize * dpr;
+			canvas.height = qr.dynamicSize * dpr;
+			ctx.scale(dpr, dpr);
+
+			qr.loadImage = (src) => {
+				// 需要返回Promise对象，小程序下获取网络图片信息需先配置download域名白名单才能生效
+				return new Promise((resolve, reject) => {
+					var img = canvas.createImage();
+					img.src = src;
+					img.onload = () => {
+						// resolve返回img
+						resolve(img);
+					};
+					img.onerror = (err) => {
+						// reject返回错误信息
+						reject(err);
+					};
+				});
+			};
+			// #endif
+
+			// #ifdef H5 || APP
+			this.canvasWidth = qr.dynamicSize;
+			this.canvasHeight = qr.dynamicSize;
+
+			qr.loadImage = (src) => {
+				// 需要返回Promise对象
+				return new Promise((resolve, reject) => {
+					uni.getImageInfo({
+						src,
+						success: (res) => {
+							resolve(res.path);
+						},
+						fail: (err) => {
+							// reject返回错误信息
+							reject(err);
+						},
+					});
+				});
+			};
+
+			// #endif
+
+			// 设置uQRCode实例的canvas上下文
+			qr.canvasContext = ctx;
+			// 调用绘制方法将二维码图案绘制到canvas上
+			setTimeout(() => {
+				qr.drawCanvas().then(() => {
+					setTimeout(() => {
+						uni.canvasToTempFilePath({
+							canvas: canvas,
+							canvasId: this.canvasId,
+
+							complete: (res) => {
+								if (!res || !res.tempFilePath) {
+									console.error('图片生成失败');
+								} else {
+									this.$emit('loadImage', res.tempFilePath);
+								}
+							},
+						});
+					}, 1500);
+				});
+			}, 300);
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.ste-qrcode-root {
+	// width: fit-content;
+	// display: flex;
+	// justify-content: center;
+	// align-items: center;
+	position: relative;
+	.h5-canvas {
+		transform-origin: top left;
+	}
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "stellar-ui-v2",
-	"version": "1.38.9",
+	"version": "1.38.10",
 	"description": "StellarUI组件库",
 	"main": "stellar-ui/index.js",
 	"private": false,

package/utils/utils.js

@@ -441,14 +441,7 @@ let utils = {
 	 * @param {String} childrenKey 下级数组键
 	 * @param {Object | Function} otherAttributes 为每个对象添加的属性（可以是一个方法，参数是当前节点，返回的对象属性会被添加到当前节点中）
 	 */
-	formatTree(
-		tree,
-		valueKey = 'value',
-		childrenKey = 'children',
-		otherAttributes = {},
-		parentNode = '__root__',
-		depth = 0
-	) {
+	formatTree(tree, valueKey = 'value', childrenKey = 'children', otherAttributes = {}, parentNode = '__root__', depth = 0) {
 		const _formatTree = (tree, parentNode, depth) => {
 			const result = tree.map((item) => {
 				if (item[childrenKey] && item[childrenKey].length) {
@@ -622,12 +615,12 @@ let utils = {
 	getCanvasContext(canvasId, component) {
 		return new Promise((resolve, reject) => {
 			if (!canvasId || !component) reject();
-			// #ifdef H5
+			// #ifdef H5 || APP
 			resolve(uni.createCanvasContext(canvasId, component));
 			// #endif
 
 			// 小程序平台
-			// #ifndef H5
+			// #ifndef H5 || APP
 			const query = uni.createSelectorQuery().in(component);
 			query
 				.select(`#${canvasId}`)