UNI-APP 小程序生成海报

qq_26637451

已于 2022-03-04 16:16:16 修改

阅读量961

点赞数 1

文章标签：小程序 vue.js 前端

于 2022-03-04 15:50:12 首次发布

本文链接：https://blog.csdn.net/qq_26637451/article/details/123278356

版权

本文介绍了如何在小程序中使用UNI-APP组件生成海报，包括引入组件、设置数据参数及调用方法。重点讲解了posterData的数据结构，包含海报背景图、展示图片和文字等内容。

摘要由CSDN通过智能技术生成

用法

首先引入这个组件，根据自己实际放置的具体路径引入，实例

import poster from '@/components/poster.vue'

html

<poster :visible.sync="posterShow" width="750" height="1170" :posterData="posterData" @makePoster="makePoster"></poster>

声明的数据参数

data() {
      return {
      		posterShow:true,
			posterData = {
				bg:{
					type:1,//1是背景图，2是颜色背景
					imgUrl:'../static/img/bgs.png'//图片地址
				},
				imgList:[
					{
						url:this.info.other.logo,
						position:[30,30],//位置
						size:[690,690]//大小
					},
					{
						url:'https://dolphin.oss-cn-hangzhou.aliyuncs.com/h5-video/qingbo/yanghe/images/yzl_qrcode.png',
						position:[501,984],//位置
						size:[180,180]//大小
					},
					{
						url:'../static/img/line.png',
						position:[0,936],//位置
						size:[750,1]//大小
					}
				],
				textList:[
					{
						text:'洋河蓝色“元之蓝 ”计划 | 白酒',//首发数字藏品，期待不设限
						position:[30,806],//位置
						fontSize:48,//大小
						color:"#fff"
					},
					{
						text:'首发'+this.config.name+'，期待不设限',//首
						position:[30,874],//位置
						fontSize:48,//大小
						color:"#fff"
					},
					{
						text:this.userInfo ? this.userInfo.nickName : '',
						textWidth:200,
						po