<template>
    <div>
        <el-button v-if="button" type="primary" @click="visible=true" style="margin-left:50px;width:100px;"> 
            {{button}}
        </el-button>
        <el-dialog 
            append-to-body 
            close-on-click-modal
            :visible.sync="visible" 
            :width="width">
            <img :src="src" @load="onLoad" alt="" />
        </el-dialog>
    </div>
</template>

<script>
export default {
    props:["src","button"],
    data() {
        return {
            width: "",
            visible: false,
        };
    },
    methods: {
        onLoad(e) {
            const img = e.target;
            let width = 0;
            if (img.fileSize > 0 || (img.width > 1 && img.height > 1)) {
                width = img.width + 40;
            }
            this.width = width + "px";
        },
    },
};
</script>