vue render封装图片弹窗插件

引用子组件
<previewImg :previewImage="columnData.imageUrl"></previewImg>

如果图片为空，使用默认图片时，需要用require先把图片引入
const defaultmg = require(’@/assets/defPic.png’)

定义子组件

<script>
export default {
    data () {
        return {
            previewVisible: false,
        }
    },
    render (createElement) {
        return createElement(
            'div',
            {},
            [
                createElement(
                    'a-avatar',
                    {
                        attrs: {
                            size: 36,
                            src: this.previewImage
                        },
                        style: {
                            cursor: 'pointer'
                        },
                        on: {
                            click: this.handleShow
                        }
                    }
                ),
                
                createElement(
                    'a-modal',
                    {
                        attrs: {
                            visible: this.previewVisible,
                            footer: null,
                            width: this.width + 'px'
                        },
                        on: {
                            cancel: this.handleCancel
                        }
                    },
                    [
                        createElement(
                            'img',
                            {
                                attrs: {
                                    alt: 'show big image',
                                    src: this.previewImage
                                },
                                style: {
                                    width: '100%'
                                }
                            }
                        )
                    ]
                )
            ]
        )
    },
    props: {
        width: {
            type: Number,
            default: 800
        },
        previewImage: {
            type: String,
            default: 'none.png'
        },
        showBig: {
            type: Boolean,
            default: true
        }
    },
    methods: {
        handleCancel () {
            this.previewVisible = false
        },
        handleShow () {
            if (!this.showBig) {
                return
            }
            this.previewVisible = true
        }
    }
}
</script>

<style lang="scss" scoped>
/deep/.ant-modal-body {
    padding: 38px 23px 23px;
}
</style>

vue文档参考
https://cn.vuejs.org/v2/guide/render-function.html#%E6%B7%B1%E5%85%A5%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1