自定义hooks

vue2中的mixins有两个问题，一个是后续查找变量可能找了半天发现是定义在mixins里面，另外i同一个是由于mixins的生命周期在其组件之前，若组件定义的变量相同会重置变量的值

vue3的hooks就没有这两个问题，因为是暴露一个函数

下面的demo是将其图片的url转换为base64，将dom节点传入函数，通过canvas去将其转换为base64，返回的promise

import { onMounted } from "vue"

type Options = {
    el: string
}

export default function (options: Options):Promise<{base64Url:string}> {
    return new Promise((resolve) => {
        onMounted(() => {
            let img: HTMLImageElement = document.querySelector(options.el) as HTMLImageElement
            console.log('img', img)
            img.onload = () => {
                resolve({
                    base64Url: base64(img)
                })
            }
        })
        const base64 = (el: HTMLImageElement) => {
            const canvas = document.createElement('canvas')
            const ctx = canvas.getContext('2d')
            canvas.width = el.width
            canvas.height = el.height
            //设置canvas的生成参数
            ctx?.drawImage(el, 0, 0, canvas.width, canvas.height)
            //toDataURL转为base64
            return canvas.toDataURL('image/png')
        }

    })
}

组件的使用

<template>
  <div>
    <img class="img" id="img" src="@/assets/logo.svg" alt="">
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import base64Url from './index'
 base64Url({el:'#img'}).then(res=>{
    console.log('res.base64Url', res.base64Url)
 })
</script>
<style lang='scss' scoped>
.img{
    width: 100px;
    height: 100px;
}
</style>