vue小工具之二维码生成（QRcode.js）

最新推荐文章于 2024-04-25 11:38:17 发布

Leglo_

最新推荐文章于 2024-04-25 11:38:17 发布

阅读量491

点赞数

分类专栏： npm vue 文章标签： javascript vue.js css

本文链接：https://blog.csdn.net/LEGLO_/article/details/122565783

版权

vue 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

npm

3 篇文章 0 订阅

订阅专栏

vue小工具之二维码生成（QRcode.js）

Talk is cheap,Give you the code.

<template>
  <div class="qrCode">
    <div class="leftinput">
      <el-input
        type="textarea"
        v-model="text"
        maxlength="600"
        show-word-limit
        placeholder="请输入内容"
        @input="textChange"
      />
    </div>
    <div class="rightshow">
      <div class="qrcodeimg" v-if="img">
        <img :src="img" alt="" :style="imageStyle" />
        <p>用手机扫一扫，了解更多信息</p>
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcode';
export default {
  data() {
    return {
      text: '',
      img: '',
    };
  },
  computed: {
    imageStyle() {
      let h = 240;
      let w = 240;
      let l = this.text.length;
      h += l;
      w += l;
      if (h > 877) {
        h = w = 877;
      }
      return {
        height: `${h}px`,
        width: `${w}px`,
      };
    },
  },
  methods: {
    textChange() {
      QRCode.toDataURL(this.text)
        .then((url) => {
          this.img = url;
        })
        .catch((err) => {
          this.img = '';
          // this.$message.error(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
/deep/ .el-textarea {
  height: 100%;
  textarea {
    height: 100%;
    min-height: unset !important;
  }
}
.qrCode {
  display: flex;
  height: 100%;
  padding: 20px;
  .leftinput {
    width: 400px;
    background: #ffffff;
    border: 1px solid #d9d9d9;
    opacity: 1;
    border-radius: 3px;
    height: 100%;
  }
  .rightshow {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    .qrcodeimg {
      img {
        width: 240px;
        height: 240px;
        transition: all 300ms ease-in-out;
      }
      p {
        font-size: 18px;
        font-weight: 500;
        line-height: 32px;
        color: #334266;
        text-align: center;
      }
    }
  }
}
</style>