105 lines
2.2 KiB
Vue
105 lines
2.2 KiB
Vue
<template>
|
||
<div>
|
||
<!-- 弹窗模式（默认） -->
|
||
<template v-if="mode === 'dialog'">
|
||
<!-- 触发按钮 -->
|
||
<!-- <slot name="trigger">-->
|
||
<!-- <el-button type="primary" size="small" @click="openDialog">二维码</el-button>-->
|
||
<!-- </slot>-->
|
||
|
||
<!-- 弹出框 -->
|
||
<el-dialog
|
||
title="二维码"
|
||
:visible.sync="dialogVisible"
|
||
width="40%"
|
||
append-to-body
|
||
>
|
||
<div class="qrcode-container" style="text-align: center;">
|
||
<qrcode v-if="url" :value="url" :options="{ width: width }" class="signature-qrcode"></qrcode>
|
||
</div>
|
||
<template #footer>
|
||
<el-button @click="dialogVisible = false">关闭</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<!-- 内联模式 -->
|
||
<template v-else-if="mode === 'inline'">
|
||
<div class="qrcode-inline-container">
|
||
<qrcode v-if="url" :value="url" :options="{ width: width }" class="signature-qrcode"></qrcode>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
|
||
module.exports = {
|
||
name: 'QrCodeDisplay',
|
||
props: {
|
||
// 二维码内容
|
||
url: {
|
||
type: String,
|
||
required: true,
|
||
},
|
||
// 显示模式：dialog（默认）或 inline
|
||
mode: {
|
||
type: String,
|
||
default: 'dialog',
|
||
validator: (value) => ['dialog', 'inline'].includes(value)
|
||
},
|
||
// 控制弹窗显示（可用于外部 v-model 控制）
|
||
value: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
width: {
|
||
type: Number,
|
||
default: 200
|
||
}
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
dialogVisible: this.value // 初始化为传入的 value
|
||
}
|
||
},
|
||
|
||
watch: {
|
||
// 同步 v-model 的 value 变化到 dialogVisible
|
||
value(newVal) {
|
||
this.dialogVisible = newVal
|
||
},
|
||
// 同步 dialogVisible 状态到外部（实现 v-model）
|
||
dialogVisible(newVal) {
|
||
this.$emit('input', newVal)
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
openDialog() {
|
||
this.dialogVisible = true
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.signature-qrcode {
|
||
display: inline-block;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.qrcode-container {
|
||
padding: 20px 0;
|
||
}
|
||
|
||
.qrcode-inline-container {
|
||
display: inline-block;
|
||
padding: 10px;
|
||
border: 1px dashed #ccc;
|
||
border-radius: 8px;
|
||
}
|
||
</style>
|