vue实现随机生成分享海报(内容动态)
Posted 穆雄雄
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue实现随机生成分享海报(内容动态)相关的知识,希望对你有一定的参考价值。
大家好,我是雄雄。
前言
昨天写了篇文章:自己整理的vue实现生成分享海报(含二维码),看着网上的没实现
主要是介绍了如何使用vue
实现,动态分享内容为海报,且附带二维码,扫描二维码能直接进去文章的页面。但是有个小缺点,就是海报的背景,只有一种;
相信大家在看CSDN
这种分享海报的时候,是可以随机切换精美背景的,今天,我们就来看看,随机海报背景如何实现。
最终效果
因为图片中含有二维码,可能后期会显示不出来,大家也可以自己去体验一下,体验步骤:
- 进入体验地址
- 拉到文章下面,点击【分享按钮】
- 每次点击分享按钮,都会出现不一样的海报,点击完之后关掉,继续点击。
实现思路
现在我们来介绍一下实现思路。
- 首先我们选10张精美海报图片放在一个地方先存起来,我这边放在了七牛云里面了,大家可以自行放置,放在本地也可以,到时候注意路径不要写错就可以。(命名尽量有规律,我是这样命名的:
fx-bg1.png,fx-bg2.png,fx-bg3.png……
) - 生成海报的时候,我是将选好的图片当做背景图来实现的,所以我们背景图就得写成动态的,不能写死。
- 使用随机数的策略,每次点击【分享】按钮的时候,都随机取一个数,然后拼接到图片地址中,置换在背景图的值即可。
实现代码
- 将海报的背景图修改成动态的,
html
代码修改如下:
<!--分享海报的弹出层-->
<el-dialog
width="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 />
博客网址:https://www.穆雄雄.com
</p>
</div>
<!-- 二维码 -->
<div id="qrcodeImg" ref="qrcodeImg"></div>
</div>
</el-dialog>
注意这个地方: :style="fxbg"
,style
前面是个冒号,这样才能是动态的。
- 在
data
中声明背景图的变量:
//背景图
fxbg: ""
- 写一个生成随机数的方法,动态随机生成图片地址:
//随机生成背景图
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
是图片地址,我是配置的,这个地方大家也可以直接写死。
- 在分享按钮的点击事件中调用即可。
//分享的功能
fenxiang()
//生成随机背景图
this.getRandomBg();
//生成海报
this.createPoster();
//生成二维码
this.createQrcode();
this.dialogFengXiang = true;
,
然后就可以实现啦,大家想要体验的话,可以前往:这里去体验。
以上是关于vue实现随机生成分享海报(内容动态)的主要内容,如果未能解决你的问题,请参考以下文章
自己整理的vue实现生成分享海报(含二维码),看着网上的没实现