vue实现随机生成分享海报（内容动态）

海报（内容动态）"/>

vue实现随机生成分享海报（内容动态）

大家好，我是雄雄。

前言

昨天写了篇文章：自己整理的vue实现生成分享海报（含二维码），看着网上的没实现

主要是介绍了如何使用vue实现，动态分享内容为海报，且附带二维码，扫描二维码能直接进去文章的页面。但是有个小缺点，就是海报的背景，只有一种；

相信大家在看CSDN这种分享海报的时候，是可以随机切换精美背景的，今天，我们就来看看，随机海报背景如何实现。

最终效果

因为图片中含有二维码，可能后期会显示不出来，大家也可以自己去体验一下，体验步骤：

1. 进入体验地址
2. 拉到文章下面，点击【分享按钮】
   
3. 每次点击分享按钮，都会出现不一样的海报，点击完之后关掉，继续点击。

实现思路

现在我们来介绍一下实现思路。

1. 首先我们选10张精美海报图片放在一个地方先存起来，我这边放在了七牛云里面了，大家可以自行放置，放在本地也可以，到时候注意路径不要写错就可以。（命名尽量有规律，我是这样命名的：fx-bg1.png,fx-bg2.png,fx-bg3.png……）
2. 生成海报的时候，我是将选好的图片当做背景图来实现的，所以我们背景图就得写成动态的，不能写死。
3. 使用随机数的策略，每次点击【分享】按钮的时候，都随机取一个数，然后拼接到图片地址中，置换在背景图的值即可。

实现代码

1. 将海报的背景图修改成动态的，html代码修改如下：

 <!--分享海报的弹出层--><el-dialogwidth="20%"height="200px"center:visible.sync="dialogFengXiang"><!-- 海报html元素 --><div id="posterHtml" v-show="isShowBg" :style="fxbg"><div class="fx_content "><span style="color: #000000;font-size: 16px">{{ posterTitle }}</span><p style="font-size: 12px;">关注微信公众号【雄雄的小课堂】;<br />博客网址：;/p></div><!-- 二维码 --><div id="qrcodeImg" ref="qrcodeImg"></div></div></el-dialog>

注意这个地方： :style="fxbg"，style前面是个冒号，这样才能是动态的。

2. 在data中声明背景图的变量：

//背景图fxbg: ""

3. 写一个生成随机数的方法，动态随机生成图片地址：

	//随机生成背景图getRandomBg() {let path = process.env.VUE_APP_IMG_API;let max = 10;let random = Math.floor(Math.random() * max) + 1;let img_url = path + "fx-bg" + random + ".png";this.fxbg = { backgroundImage: "url(" + img_url + ")" };},

path是图片地址，我是配置的，这个地方大家也可以直接写死。

4. 在分享按钮的点击事件中调用即可。

	 //分享的功能fenxiang() {//生成随机背景图this.getRandomBg();//生成海报this.createPoster();//生成二维码this.createQrcode();this.dialogFengXiang = true;},

然后就可以实现啦，大家想要体验的话，可以前往：这里去体验。