用法
首先引入这个组件,根据自己实际放置的具体路径引入,实例
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