1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495 |
- <template>
- <div class='picDia'>
- <el-dialog :visible.sync='dialogVisible' width='75%' :close-on-click-modal='false' :show-close='false'>
- <pic-view-rotation
- :picType='picType'
- :size='sizePic'
- :key='key'
- v-if='rotationImg.length>0'
- :rotationImg='rotationImg'
- style='height:100%;width:100%'
- ></pic-view-rotation>
- <span class='close' @click='close'>X</span>
- </el-dialog>
- </div>
- </template>
- <script>
- import PicViewRotation from './picViewRotation'
- export default {
- data() {
- return {
- dialogVisible: false,
- mode: 'top',
- rotationImg: [], //要展示的大图
- picType: null, //图片类型 1 区位图 2 鸟瞰图
- key: 1,
- sizePic: '', //横向||纵向展示 width 横向展示 height 纵向展示
- imgInfo: {}, //返回图片信息
- }
- },
- methods: {
- showModal(params, type) {
- this.key++
- this.dialogVisible = true
- this.rotationImg = params
- this.picType = type
- if (this.rotationImg.length > 0) {
- let img = new Image()
- img.src = this.rotationImg[0].url
- const vm = this
- img.onload = function () {
- vm.$set(vm.imgInfo, 'width', img.width)
- vm.$set(vm.imgInfo, 'height', img.height)
- if (vm.imgInfo.width > vm.imgInfo.height) {
- vm.sizePic = 'width'
- } else {
- vm.sizePic = 'height'
- }
- }
- }
- },
- close() {
- this.dialogVisible = false
- },
- },
- components: {
- PicViewRotation,
- },
- }
- </script>
- <style lang="less" scoped>
- .picDia {
- img {
- width: 100%;
- height: 100%;
- }
- }
- .close {
- display: block;
- position: absolute;
- right: -40px;
- font-size: 20px;
- color: #fff;
- top: -30px;
- z-index: 10;
- cursor: pointer;
- }
- </style>
- <style lang='less'>
- .picDia {
- .el-dialog {
- height: 88%;
- margin-top: 5vh !important;
- position: relative;
- .el-dialog__header {
- padding: 0;
- }
- .el-dialog__body {
- padding: 0;
- height: 100%;
- }
- }
- }
- </style>
|