|
|
@@ -1,86 +0,0 @@
|
|
|
-
|
|
|
-<template>
|
|
|
- <div class="qrCode">
|
|
|
- <el-dialog :title="title"
|
|
|
- :visible.sync="status"
|
|
|
- @close="onDialogClose"
|
|
|
- width="300px">
|
|
|
- <div class="left-code">
|
|
|
- <vue-qr :text="codeUrl" style="width: 100%" :margin="0"></vue-qr>
|
|
|
- <p class="code-url" v-if="codeUrl">{{ codeUrl }} <el-link @click="copyUrl(codeUrl)" class="link-btn" type="primary">复制</el-link></p>
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import VueQr from 'vue-qr'
|
|
|
-import copy from 'copy-to-clipboard'
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- status: false
|
|
|
- };
|
|
|
- },
|
|
|
- components: {
|
|
|
- VueQr
|
|
|
- },
|
|
|
- props: {
|
|
|
- value: {
|
|
|
- // 组件状态
|
|
|
- type: Boolean,
|
|
|
- required: true,
|
|
|
- default() {
|
|
|
- return false
|
|
|
- }
|
|
|
- },
|
|
|
- title: {
|
|
|
- type: String,
|
|
|
- default() {
|
|
|
- return '查看二维码'
|
|
|
- }
|
|
|
- },
|
|
|
- codeUrl: {
|
|
|
- type: String
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.status = this.value
|
|
|
- },
|
|
|
- methods: {
|
|
|
- onDialogClose() {
|
|
|
- this.status = false
|
|
|
- this.$emit('input', false)
|
|
|
- },
|
|
|
- copyUrl(url) {
|
|
|
- copy(url)
|
|
|
- this.$message.success('复制成功')
|
|
|
- },
|
|
|
- },
|
|
|
- watch: {
|
|
|
- value(newValue) {
|
|
|
- this.status = newValue;
|
|
|
- },
|
|
|
- title(newValue, oldValue) {
|
|
|
- if(newValue != oldValue) {
|
|
|
- this.title = newValue
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- beforeDestroy() {},
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
-.left-code{
|
|
|
- .code-url{
|
|
|
- margin-top: 10px;
|
|
|
- margin-bottom: 10px;
|
|
|
- .link-btn{
|
|
|
- margin-top: 0;
|
|
|
- margin-bottom: 0;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
