【Vue3.x】自定义hooks

Vue3 hooks

---

vue2里的mixins相似，但是mixins会组件的配置项覆盖。vue3使用了自定义hooks替代mixnins，hooks本质上是函数，引入调用。

封装自定义的hooks

将图片转化成base64

import { onMounted } from "vue";

interface Options {
    el: string
}

export default function (options: Options): Promise<{ baseUrl: string }> {
    return new Promise((res) => {
        onMounted(() => {
            let img: HTMLImageElement = document.querySelector(options.el) as HTMLImageElement
            console.log(img);
            // 保证图片加载完成后
            img.onload = () => {
                res({
                    baseUrl: base64(img)
                })
            }
        })
        const base64 = (el: HTMLImageElement) => {
            const canvas = document.createElement('canvas')
            const ctx = canvas.getContext('2d')
            canvas.width = el.width
            canvas.height = el.height
            ctx?.drawImage(el, 0, 0, canvas.width, canvas.height)
            // HTMLCanvasElement.toDataURL()方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为 96dpi。
            return canvas.toDataURL('image/jpg')
        }
    })
}

import引入后直接使用

<template>
    <div>
        <img id="img" src="./assets/sample.jpg" alt="">
    </div>
</template>

<script setup lang='ts'>
import useBase64 from './hooks/index'

 useBase64({el:'#img'}).then(res=>{
    console.log(res.baseUrl);
    
 })
</script>

也可以使用现成的vueuse钩子库

🚩 VueUse官网