61 lines
934 B
Vue
61 lines
934 B
Vue
<!-- <template>
|
|
<a-image
|
|
class="fullScreenImg"
|
|
:src="src"
|
|
/>
|
|
</template> -->
|
|
<template>
|
|
<a-image
|
|
class="fullScreenImg"
|
|
:width="width"
|
|
:src="src"
|
|
/>
|
|
</template>
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue';
|
|
export default defineComponent({
|
|
name: 'fullScreenImg',
|
|
props:{
|
|
width:{
|
|
type:String,
|
|
default:'100%'
|
|
},
|
|
center:{
|
|
type:Boolean,
|
|
default:false
|
|
},
|
|
src:{
|
|
type:String,
|
|
default:''
|
|
},
|
|
},
|
|
setup() {
|
|
return {};
|
|
},
|
|
});
|
|
</script>
|
|
<style lang='less'>
|
|
.ant-image{
|
|
height: 100%;
|
|
.fullScreenImg{
|
|
width: 100%;
|
|
cursor: zoom-in;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
&.active{
|
|
|
|
}
|
|
}
|
|
.ant-image-mask{
|
|
display: none;
|
|
}
|
|
}
|
|
.ant-image-preview-mask{
|
|
.ant-image-preview-body{
|
|
.ant-image-preview-operations{
|
|
background: rgba(0, 0, 0, .5);
|
|
}
|
|
}
|
|
}
|
|
|
|
</style> |