vue实现随机生成分享海报(内容动态)

简介: vue实现随机生成分享海报(内容动态)


前言


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

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

最终效果


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

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

实现思路

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

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

实现代码

  1. 将海报的背景图修改成动态的,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前面是个冒号,这样才能是动态的。

  1. data中声明背景图的变量:
//背景图
      fxbg: ""
  1. 写一个生成随机数的方法,动态随机生成图片地址:
//随机生成背景图
    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是图片地址,我是配置的,这个地方大家也可以直接写死。

  1. 在分享按钮的点击事件中调用即可。
//分享的功能
    fenxiang() {
      //生成随机背景图
      this.getRandomBg();
      //生成海报
      this.createPoster();
      //生成二维码
      this.createQrcode();
      this.dialogFengXiang = true;
    },

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

相关文章
|
2天前
|
JavaScript
vue知识点
vue知识点
10 3
|
7天前
|
JavaScript
|
8天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
22 6
|
6天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点:** 分解大组件以提高复用性和加载速度;利用计算属性与侦听器优化数据处理;使用Object.freeze()减少响应式数据;借助Vuex或Composition API管理状态;实现虚拟滚动和无限加载提升长列表性能;路由懒加载减少初始加载时间;用Vue DevTools检测性能瓶颈;定期代码审查与重构;应用缓存策略;遵循最佳实践与团队规范,提升应用整体质量。
22 2
|
8天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
23 4
|
8天前
|
JavaScript
【vue】 vue2 监听滚动条滚动事件
【vue】 vue2 监听滚动条滚动事件
16 1
|
8天前
|
JavaScript 定位技术
【天地图】vue 天地图 T is not defined
【天地图】vue 天地图 T is not defined
20 1
|
8天前
|
JavaScript 前端开发
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
32 0
|
8天前
|
JavaScript 前端开发 数据安全/隐私保护
【vue】自定义指令实现 复制、长按、水印 功能
【vue】自定义指令实现 复制、长按、水印 功能
18 0
|
8天前
|
JavaScript
【vue】图片懒加载 vue-lazyload 使用
【vue】图片懒加载 vue-lazyload 使用
9 0