图片弹窗组件应用

效果：

再需要图片弹窗的页面中添加
页面：
table表格中现场图片, 可以不使用这个样式按钮

 <el-table-column align="center" prop="status" label="查看" :show-overflow-tooltip="true">
                    <template #default="scope">
                        <el-button type="success" size="small" style="width: 50px" @click="reviewbtn(scope.row)">查看
                        </el-button>
                    </template>
                </el-table-column>


    <!--图片对话框-->
        <image-review-dialog v-model:visible="picData.picDialog"
                             v-model:url="picData.currentUrl"
                             title="查看"
                             @onCancel="closePicDialogfn"></image-review-dialog>

js:

import imageReviewDialog from '@/components/imageReviewDialog.vue';
    import config from "@/axios/config";

//图片对话框
    const picData: any = reactive({
        picDialog: false,
        currentUrl: '',
        currentName: ''
    })



const reviewbtn = (row:any) =>{
    console.log("查看", row);
    picData.picDialog = true;
    let pic = "/static/upfiles/upload/2024/06/06/f01fc721-a08a-4e64-b272-ee566d809a33.jpg";
    if (row.roleKey === 'expert'){
        pic = "/static/upfiles/upload/2024/06/06/df602c95-3c94-45a6-bd02-d496f5fa65b2.jpg";
    }
    picData.currentUrl = config.fileServer + pic;
    picData.currentName = config.fileServer + pic;
}

const  closePicDialogfn = ()=>{
    picData.picDialog = false;
}