123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687 |
- <template>
- <div class='picDia'>
- <el-dialog :visible.sync='dialogVisible' width='90%' :close-on-click-modal='false' :show-close='false'>
- <!-- <img
- src='https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1592807833&di=5adf17cda9f46c37696da5b1d0aec9dc&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg'
- alt
- />-->
- <rotation :size='sizePic' :key='key' :type='3' v-if='rotationImg.length>0' :rotationImg='rotationImg' style='height:100%;width:100%'></rotation>
- <span class='close' @click='close'>X</span>
- </el-dialog>
- </div>
- </template>
- <script>
- export default {
- data() {
- return {
- dialogVisible: false,
- mode: 'top',
- rotationImg: [],
- key: 1,
- sizePic: '',
- imgInfo: {}
- }
- },
- methods: {
- showModal(params) {
- this.key++
- this.dialogVisible = true
- this.rotationImg = params
- 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'
- }
- console.log(vm.sizePic)
- }
- }
- },
- close() {
- this.dialogVisible = false
- }
- }
- }
- </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>
|