JsBarcode + vue 实践

最新推荐文章于 2024-06-29 18:23:17 发布

debug time

最新推荐文章于 2024-06-29 18:23:17 发布

阅读量307

点赞数

分类专栏：案例文章标签： vue

本文链接：https://blog.csdn.net/xiehuanqing00/article/details/89709001

版权

案例专栏收录该内容

7 篇文章 0 订阅

订阅专栏

案例一：渲染之后执行一些函数

说明：有时候想在渲染view之后执行函数，或者说对渲染的view进行操作。

场景一：对view生成条形码，使用的是JsBarcode.all.min.js库生成条码，它的要求就是有一个这样的标签，然后执行一个api即可在这个标签的位置生成条码

// html代码
<svg v-bind:id="'code128_' + n"></svg>

// js代码
JsBarcode("#code128_0",row.sampleNumber);

// vue 代码
vuePrintData = new Vue({
	el : "#vuePrindBox",
	data : {
		printCount : '0',
		printData : row
	},
	computed : {
		num : function() {
			return parseInt(this.printCount)
		}
	},
	watch : {
		// 1、观察num的属性变化
		num : function() {
			// 2、下一帧执行这个函数 ，意味着num变化->渲染完成->执行生成条码
			this.$nextTick(function() {
				for (i = 0; i < this.num; i++) {
					JsBarcode('#code128_' + (i + 1),
							this.printData.sampleNumber);
				}
			});

		}

	}
});

效果：