vue3封装批量生成二维码海报图组件

面条不爱汤

已于 2024-01-05 08:55:09 修改

阅读量697

点赞数 8

分类专栏：前端学习文章标签： javascript 前端开发语言

于 2024-01-04 16:28:08 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43600406/article/details/135389599

版权

第一、下载依赖包

npm install html2canvas --save
npm install jszip --save
npm install qrcodejs2-fix --save
npm install file-saver --save

第二步、组件封装

<template>
  <div class="down-image">
    <div id="qrid-box">
      <img :src="bgImg" alt="" class="qdid-img" />
      <div
        class="code-box"
        :class="{ 'left-center': leftDistance == 0 }"
        :style="{
   
          bottom: bottomDistance + 'px',
          width: size + 'px',
          height: size + 'px',
          left: leftDistance == 0 ? '50%' : leftDistance + 'px',
        }"
      ></div>
    </div>
    <div class="down-mask" v-show="isGenera">
      {
   {
    maskMessage }}
    </div>
  </div>
</template>

<script setup lang="ts">
import {
    ref, reactive, onMounted } from "vue";
import html2canvas from "html2canvas";
import JSZip from "jszip";
import QRcode from "qrcodejs2-fix";
import FileSaver from "file-saver";
const props = defineProps({
   
  // 数据列表
  dataList: {
   
    type: <any>Array,
    required: true,
    default: [],
  },
  // 生成的地址链接
  url: {
   
    type: String,
    required: true,
    default: "",
  },
  //  需要拼接的参数 可以穿字符串或者数组字符串
  params: {
   
    type: <any>Array,
    required: true,
    default: [],
  },
  //   背景图
  bgImg