element-ui没有图片预览组件？花5分钟自己写个

### 背景

element-ui没有直接用js调用图片的组件，自己写一下

写图片预览组件前，我们要了解两个vue方法：

#### **1：h()**

它是**render函数**的辅助函数，用来创建虚拟DOM。

它接受三个参数，第一个是需要创建的组建或者普通标签；第二个是传递给组建的**props**或者标签属性；第三个参数是标签内加上内容，第一个参数为组件是无效。

#### **2：render()**

**render函数**就是将**h()方法**生成的**虚拟DOM**转换成**真实DOM**，再渲染到指定DOM下。

它接受两个参数，第一个是h()生出的虚拟DOM；第二个是渲染到哪个DOM下。

```js
// 创建标签
const vNode = h('div', {
    class: 'demo'
}, '内容')
render(vNode, document.body)
// 相当于在body标签下创建
// <div class="demo">内容</div>

// 创建组件
const vNode = h(imagePreview, {
    url,
    cancelHandler
})
render(vNode, document.body)
// 相当于在body标签下创建
// <imagePreview :url="url" :cancelHandler="cancelHandler" />
```

了解了这两个方法后我们就可以分三步走来写图片预览组件了。

### 实现

#### **第一步**

我们建一个图片预览组件**image.vue**，主要就两点，一个是接收外部传入的图片url，另一个是关闭图片预览事的回调事件。

```vue
<template>
    <div class="wrap">
        <img :src="url" alt="">
        <div class="close" @click="handleCancel">x</div>
    </div>
</template>

const props = defineProps({
    // 接收传入的图片url
    url: {
        type: String,
        default: ''
    },
    // 关闭回调事件
    cancelHandler: {
        type: Function
    }
})

// 关闭事件
const handleCancel = () => {
    // 调用回调事件
    props.cancelHandler()
    // 清空dom
    render(null, document.body)
}
</script>

#### **第二步**

创建**imgPreview.js**来生成图片预览组件dom，以及将创建方法暴露出去。

```js
import { h, render } from 'vue'
import image from './imagePreview.vue'

export const imagePreview = (url) => {
    // 使用promise，在关闭预览后，.then里可以做后面的操作
    return new Promise((reslove, reject) => {
        // 关闭后reslove()
        const cancelHandler = () => {
            reslove()
        }

// 创建图片预览组件虚拟dom
        const vNode = h(image, {
            url,
            cancelHandler
        })

// 将图片预览组件渲染到body标签下
        render(vNode, document.body)
    })
}
```

#### **第三步**

就是调用**imagePreview**方法来使用图片预览组件了

```vue
<template>
    <div class="demo">
        <button @click="handlePreview">预览图片</button>
    </div>
</template>

</style>
```

##