vue3.0之自定义 hooks

vue3.0之自定义 hooks

• 什么是 hooks
  • 本质而言，hook就是一个函数，只不过hook是把 setup组合函数之中的 组件api（ref、reactive、conputed、watch、生命周期函数）等进行了封装抽离代码（公共代码，公共组件等），这样使得代码更加简洁
  • hook 类似于 vue2之中的 mixin

vueuse 封装了很多公共的 hook函数

• 官网：官网
• 下载：
  • yarn add @vueuse/core -D
• 表示不会玩

自定义hook 之 img转化为 base64

hook / tobase64.ts

import {
    
     onMounted } from "vue"
type Options = {
    
    
  el:String
}

export default function (options:Options):Promise<{
    
    baseUrl:string}> {
    
    

  return new Promise((resolve) => {
    
    
    onMounted(()=> {
    
    
      let imgDom:HTMLImageElement = document.querySelector(options.el) as HTMLImageElement
      // console.log("imgDom",imgDom); // <img id="img" src="./assets/logo.png" alt="" width="300" height="300" />
      imgDom.onload = ()=> {
    
     // 等待 img 加载完毕之后 才转化为base64
        resolve({
    
    
          Baseurl: toBase64(imgDom)
      })
      }
    })
  
    const toBase64 = (el:HTMLImageElement)=>{
    
    
      const canvas = document.createElement("canvas") // 创建标签
      const ctx = canvas.getContext("2d") // 给 canvas 指定一个文件
      canvas.width =  el.width // 给canvas 指定宽高
      canvas.height =  el.height
      ctx?.drawImage(el, 0, 0, canvas.width,canvas.height) // 制作一个画布
      return canvas.toDataURL('image/png') // 导出 base64的img
    }
  })
}

使用

<template>
  <!-- <Layout></Layout> -->
  <div>
    <img id="img" src="./assets/logo.png" alt="" width="300" height="300" />
    转化为base64
  </div>
</template>

<script setup lang="ts">
// import Layout from './layout/Layout.vue'
import useBase64 from './hook/tobase64'

useBase64({
    
    
  el: '#img',
}).then((res) => {
    
    
  console.log('res', res.Baseurl)
})
</script>
<style lang="scss">
html,
body,
#app {
    
    
  height: 100%;
  width: 100%;
  overflow: hidden;
}
</style>

• 效果
  • 转化为base64的url路径
    
  • 把url路径 copy 到浏览器url地址之中，可以直接显示当前base64 的img