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
| <template>
| <div class="diy-preview">
| <el-dialog
| title="使用APP扫描二维码预览"
| :visible.sync="dialogVisible"
| width="400px">
| <div class="diy-qrcode" id="qrcode" ref="qrCodeUrl">
| </div>
| <span slot="footer" class="dialog-footer">
| <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
| </span>
| </el-dialog>
| </div>
| </template>
| <script>
| import QRCode from 'qrcodejs2'
| export default {
| name: 'diy-preview',
| data () {
| return {
| dialogVisible: false
| }
| },
| methods: {
| creatQrCode (routerPath) {
| this.clearCode() // 清除生成的二维码
| var qrcode = new QRCode(this.$refs.qrCodeUrl, {
| text: routerPath + '&isPreview=1', // 需要转换为二维码的内容
| width: 200,
| height: 200,
| colorDark: '#000000',
| colorLight: '#ffffff',
| correctLevel: QRCode.CorrectLevel.H
| })
| console.log(qrcode)
| },
| show (row) {
| this.dialogVisible = true
| this.$nextTick(() => {
| this.creatQrCode(row.routerPath)
| })
| },
| // 清除生成的二维码
| clearCode () {
| const codeHtml = document.getElementById('qrcode')
| codeHtml.innerHTML = ''
| }
| }
| }
| </script>
| <style lang="scss">
| .diy-preview {
| .diy-qrcode {
| img {
| margin: 0 auto;
| }
| }
| }
| </style>
|
|
