64 lines
1.2 KiB
Vue
64 lines
1.2 KiB
Vue
<template>
|
|
<div class="downloadQR" v-show="datas.isshow">
|
|
<div class="box">
|
|
<img :src="datas.imgUrl" style="width: 300px;height: 300px;" alt="">
|
|
<div class="btnStyle">
|
|
<el-button type="primary" @click="datas.isshow = false">取消</el-button>
|
|
<el-button type="primary"><a :href="datas.imgUrl">下载</a></el-button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
let props = defineProps({
|
|
imgUrl: String,
|
|
});
|
|
let datas = reactive({
|
|
imgUrl: "",
|
|
isshow: false,
|
|
});
|
|
|
|
function show(d) {
|
|
datas.imgUrl = d;
|
|
datas.isshow = true;
|
|
}
|
|
|
|
defineExpose({ show });
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.downloadQR {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: rgba($color: #000000, $alpha: .6);
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 9999;
|
|
|
|
.box {
|
|
padding: 20px;
|
|
border-radius: 3px;
|
|
height: 400px;
|
|
width: 340px;
|
|
background-color: #fff;
|
|
display: flex;
|
|
// align-items: center;
|
|
// justify-content: center;
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
|
|
.btnStyle {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 20px;
|
|
justify-content: space-around;
|
|
}
|
|
}
|
|
</style>
|