<template>
    <div>
        <img :alt="title" :src="tow60(src)" width="60" :onerror="errorImg" @click="preview(src)" />
        <el-dialog :title="title" :visible.sync="imgsVisible" center>
            <div style="display: flex;justify-content: center;">
                <el-image :src="src" fit="scale-down" lazy style="margin: 20px auto;" :onerror="errorImg">
                <div slot="error" class="image-slot">
                    <em class="el-icon-picture-outline"></em>
                </div>
                </el-image>
            </div>
            <div style=" display: flex;justify-content: center;">
                <el-button  @click="imgsVisible = false" type="primary" style="width: 6vw; ">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

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