|
2 | 2 | <a-modal id="qrcode-modal" v-model="qrModal.visible" :title="qrModal.title" |
3 | 3 | :closable="true" width="300px" :ok-text="qrModal.okText" |
4 | 4 | cancel-text='{{ i18n "close" }}' :ok-button-props="{attrs:{id:'qr-modal-ok-btn'}}"> |
5 | | - <a-tag color="green" style="margin-bottom: 10px;display: block;text-align: center;" >click on QR Code to Copy</a-tag> |
6 | | - <canvas v-if="qrModal.inbound.protocol != Protocols.VMESS && qrModal.inbound.protocol != Protocols.VLESS && qrModal.inbound.protocol != Protocols.TROJAN" id="qrCode" style="width: 100%; height: 100%;"></canvas> |
7 | | - |
8 | | - <template v-if="qrModal.inbound.protocol === Protocols.VMESS" v-for="(vmess, index) in qrModal.inbound.settings.vmesses"> |
9 | | - <a-tag color="red" style="margin-bottom: 10px;display: block;text-align: center;" v-text="vmess.email"></a-tag> |
10 | | - <canvas @click="copyTextToClipboard(`qrCode-vmess-${vmess.id}`,index)" :id="`qrCode-vmess-${vmess.id}`" style="width: 100%; height: 100%;"></canvas> |
11 | | - <a-divider style="height: 2px; background-color: #7e7e7e" /> |
12 | | - </template> |
13 | | - |
14 | | - <template v-if="qrModal.inbound.protocol === Protocols.VLESS" v-for="(vless, index) in qrModal.inbound.settings.vlesses"> |
15 | | - <a-tag color="red" style="margin-bottom: 10px;display: block;text-align: center;" v-text="vless.email"></a-tag> |
16 | | - <canvas @click="copyTextToClipboard(`qrCode-vless-${vless.id}`,index)" :id="`qrCode-vless-${vless.id}`" style="width: 100%; height: 100%;"></canvas> |
17 | | - <a-divider style="height: 2px; background-color: #7e7e7e" /> |
18 | | - </template> |
19 | | - |
20 | | - <template v-if="qrModal.inbound.protocol === Protocols.TROJAN" v-for="(trojan, index) in qrModal.inbound.settings.trojans"> |
21 | | - <a-tag color="red" style="margin-bottom: 10px;display: block;text-align: center;" v-text="trojan.email"></a-tag> |
22 | | - <canvas @click="copyTextToClipboard(`qrCode-trojan-${trojan.password}`,index)" :id="`qrCode-trojan-${trojan.password}`" style="width: 100%; height: 100%;"></canvas> |
23 | | - <a-divider style="height: 2px; background-color: #7e7e7e" /> |
24 | | - </template> |
| 5 | + <canvas id="qrCode" style="width: 100%; height: 100%;"></canvas> |
25 | 6 | </a-modal> |
26 | 7 |
|
27 | 8 | <script> |
|
76 | 57 | data: { |
77 | 58 | qrModal: qrModal, |
78 | 59 | }, |
79 | | - methods: { |
80 | | - setQrCode(elmentId,index) { |
81 | | - content = qrModal.inbound.genLink(qrModal.dbInbound.address,qrModal.dbInbound.remark,index) |
82 | | - |
83 | | - new QRious({ |
84 | | - element: document.querySelector('#'+elmentId), |
85 | | - size: 260, |
86 | | - value: content, |
87 | | - }); |
88 | | - }, |
89 | | - copyTextToClipboard(elmentId,index) { |
90 | | - link = qrModal.inbound.genLink(qrModal.dbInbound.address,qrModal.dbInbound.remark,index) |
91 | | - this.qrModal.copyText = link |
92 | | - |
93 | | - this.qrModal.clipboard = new ClipboardJS('#' + elmentId, { |
94 | | - text: () => link, |
95 | | - }); |
96 | | - this.qrModal.clipboard.on('success', () => { |
97 | | - app.$message.success('{{ i18n "copied" }}') |
98 | | - this.qrModal.clipboard.destroy(); |
99 | | - }); |
100 | | - |
101 | | - |
102 | | - } |
103 | | - }, |
104 | | - updated() { |
105 | | - switch (qrModal.inbound.protocol) { |
106 | | - case Protocols.VMESS: |
107 | | - vmesses = qrModal.inbound.settings.vmesses |
108 | | - for (const index in vmesses) { |
109 | | - this.setQrCode("qrCode-vmess-" + vmesses[index].id ,index) |
110 | | - } |
111 | | - break; |
112 | | - case Protocols.VLESS: |
113 | | - vlesses = qrModal.inbound.settings.vlesses |
114 | | - |
115 | | - for (const index in vlesses) { |
116 | | - this.setQrCode("qrCode-vless-" + vlesses[index].id ,index) |
117 | | - } |
118 | | - break; |
119 | | - case Protocols.TROJAN: |
120 | | - trojans = qrModal.inbound.settings.trojans |
121 | | - |
122 | | - for (const index in trojans) { |
123 | | - this.setQrCode("qrCode-trojan-" + trojans[index].password ,index) |
124 | | - } |
125 | | - break; |
126 | | - default: return null; |
127 | | - } |
128 | | - |
129 | | - } |
130 | 60 | }); |
131 | 61 |
|
132 | 62 | </script> |
|
0 commit comments