<template>
    <span>
        <el-button v-if="src" type="text"  @click="preview(src)">{{title}}</el-button>
        <el-button v-else type="text" disabled class="tc">上传中</el-button>
        <el-dialog  :visible.sync="imgsVisible" center>
            <div style="display: flex;justify-content: center;">
                <img alt="" :src="src" fit="scale-down" lazy style="margin: 20px auto;max-width:400px" :onerror="errorImg" />
            </div>
            <div style=" display: flex;justify-content: center;">
                <el-button  @click="imgsVisible = false" type="primary" style="width: 6vw; ">确 定</el-button>
            </div>
        </el-dialog>

    </span>
</template>

<script>
    export default {
        name: "preview",
        data(){
            return{
                imgsVisible:false,
                errorImg:'this.src="' + require('@/assets/null.jpg') + '"'
            }
        },
        props:{
           src:{
               type:String,
               default: ''
           },
           title:{
               type:String,
               default: '查看图片'
           }
        },
        methods: {
            preview( imgUrl ){
                this.imgs = imgUrl;
                this.imgsVisible=true;
            }
        }
    }
</script>
