图片 默认 居中，宽确定，可以放大，可以缩小。

图片居中

openStatus 状态值，判断是否放大，缩小

openImgFn 方法，点击放大，缩小

img-url  类名，限制图片宽

<template>
    <van-overlay :show="show" >
        <div class="outs" @click="clearFn">
            <div class="wrapper" @click.stop>
                <img :class="[openStatus===0?'img-url':'','img']" :src="datalist" alt="">
            </div>
            <div class="clear"><van-icon name="cross" size="40" color="#fff"/></div>
            <div class="detail" @click.stop="openImgFn"><van-icon :name="openStatus===0?'plus':'minus'" size="40" color="#fff"/></div>
        </div>
        
    </van-overlay>
</template>

<script>
import {ref,onMounted} from 'vue'
export default {
    props:{
        show:{
            type:Boolean,
            detail:true
        },
        datalist:{
            type:String,
            detail:''
        },
        datalist2:{
            type:Array,
            detail:()=>{
                return []
            }
        },

    },
    setup(props,{emit}){
        const onSelect = (item) => {    //选择之后关闭动作面板
            emit('event',item)
        };
        const clearSelect = ()=>{
            emit('event',{text: '', value: '', name: ''})
        }
        const clearFn = ()=>{
            emit('event','clear')

        }
        const openStatus = ref(0)       //图片状态 0 默认，1 已经放大
        const openImgFn = ()=>{
            if(openStatus.value === 0){
                openStatus.value = 1
            }else{
                openStatus.value = 0
            }
            console.log(openStatus.value,"openStatus.value")
        }
        onMounted(() => {
        })

        return{
            clearFn,
            openStatus,
            openImgFn
        }
    }
}
</script>

<style lang = "scss" scoped>
.outs{
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.wrapper{
    width: 100%;
    max-height: 80vh;
    overflow-y: scroll;
      
}
.img{
    min-width: 100%;
}
.img-url{
    max-width: 100%;
}
.clear{
    position: absolute;
    bottom: 3vh;
    left: calc(50% + 20px);
}
.detail{
    position: absolute;
    bottom: 3vh;
    left: calc(50% - 60px);
}
</style>

标签：居中,const,100%,detail,value,width,openStatus,默认,缩小
来源： https://www.cnblogs.com/l-ialiu/p/16186384.html