vue-qrcode前端生成二维码

vue-qrcode

前端生成二维码生成组件

安装

1
npm install @chenfengyuan/vue-qrcode vue

引用

全局组件

1
2
3
4
5
6
7
8
9

import Vue from 'vue';
import VueQrcode from '@chenfengyuan/vue-qrcode';
    
Vue.component(VueQrcode.name, VueQrcode);
   
<script>
<VueQrcode value="Hello, World!" :options="{ width: 200 }"></VueQrcode>
</script>

局部组件

将第三方组件value改成双向数据绑定:value=data定义变量名

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
 <VueQrcode :value=form.text_to_qr :options="{ width: 200 }"></VueQrcode>
</template>
<script>
import VueQrcode from "@chenfengyuan/vue-qrcode";
export default {
  data() {
    return {
      form: {
        text_to_qr: "http://www.baidu.com", // 文本内容转二维码
            }
          }
        }
            },
   components: {
    VueQrcode
  }           

</script>

img

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<template>
  <div id="QR">
    <el-button @click="dialog = true" type="primary" style="margin-left: 30px;">生成二维码</el-button>

    <el-drawer
      title="生成二维码"
      :before-close="handleClose"
      :visible.sync="dialog"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
    >
      <div class="demo-drawer__content">
        <el-form :model="form">
          <el-form-item label="输入内容" :label-width="formLabelWidth">
            <el-input
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 4}"
              placeholder="请输入生成二维码的内容"
              v-model="form.text_to_qr"
            ></el-input>
          </el-form-item>
          <el-form-item label="二维码" :label-width="formLabelWidth">
            <VueQrcode :value=form.text_to_qr :options="{ width: 200 }"></VueQrcode>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button
            type="primary"
            @click="$refs.drawer.closeDrawer()"
            :loading="loading"
          >{{ loading ? '提交中 ...' : '确 定' }}</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import VueQrcode from "@chenfengyuan/vue-qrcode";
export default {
  data() {
    return {
      dialog: false, // 控制抽屉效果
      loading: false,
      form: {
        text_to_qr: "http://www.baidu.com", // 文本内容转二维码
        qr_to_text: "", // 二维码转文本内容
        qr: "",
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      formLabelWidth: "80px",
      timer: null
    };
  },
  methods: {
    handleClose(done) {
      if (this.loading) {
        return;
      }
      this.$confirm("确定保存吗？")
        .then(_ => {
          this.loading = true;
          this.timer = setTimeout(() => {
            done();
            // 动画关闭需要一定的时间
            setTimeout(() => {
              this.loading = false;
            }, 400);
          }, 2000);
        })
        .catch(_ => {});
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
    }
  },
  mounted() {},
  created() {},
  watch: {},
  components: {
    VueQrcode
  }
};
</script>