sis-manage/src/views/vab/qrCode/index.vue

<template>
  <div class="qr-code-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <el-card shadow="hover">
          <div slot="header"><span>二维码示例</span></div>
          <a target="_blank" :href="url">
            <vab-qr-code :image-path="imagePath" :url="url"></vab-qr-code>
          </a>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import VabQrCode from "@/components/VabQrCode";

  export default {
    name: "QrCode",
    components: {
      VabQrCode,
    },
    data() {
      return {
        url: "https://www.baidu.com",
        imagePath: require("@/assets/qr_logo/lqr_logo.png"),
      };
    },
    created() {},
    mounted() {},
    methods: {},
  };
</script>

<style lang="scss" scoped>
  .qr-code-container {
    ::v-deep {
      .el-card__body {
        display: flex;
        align-content: center;
        justify-content: center;
      }
    }
  }
</style>