前言
本文主要记录了vue3学习中自定义Hooks和vue2中Mixins的使用与案例。
一、Hooks是什么？
Hooks用来处理复用代码逻辑的一些封装，Hooks与Mixins不同点在于Hooks是函数。
在vue2中是以Mixins形式将相同的逻辑抽离，各个组件只需要引入mixins，就能使用，mixins存在覆盖问题：
组件data、methods、filters会覆盖mixins中同名data、methods、filters
使用VueUse库可以使用100多项用Hooks完成的功能
二、图片转换Base64
1.Hooks
代码如下：
type Options = {
el:string
}
export default function (options:Options):Promise<{baseUrl:string}> {
// @ts-ignore
return new Promise((resolve)=>{
onMounted(()=>{
let img:HTMLImageElement = document.querySelector(options.el) as HTMLImageElement
img.onload = () =>{
resolve({
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)
return canvas.toDataURL('image/jpg')
}
})
}
2.使用
代码如下：
import useBase64 from '../../../../hooks/index'
useBase64({
el: '#img'
}).then(res=>{
console.log(res.baseUrl)
})
三、监听元素宽高（自定义指令+Hooks）
1.Hooks
这里要注意的是vue插件需要定义install方法，在app.use()挂载时会调用该方法
/**
* interSectionObserver 主要监听元素是否在视口内
* MutationObserver 主要监听子集的变化 以及 元素的增删改查
* ResizeObserver 主要监听元素宽高的变化
*/
// @ts-ignore
import type { APP } from 'vue'
/**
* 自定义Hooks监听元素宽高变化
* @param el
* @param callback
*/
function useResize(el:HTMLElement,callback:Function) {
let resize = new ResizeObserver((entries)=>{
callback(entries[0].contentRect)
})
resize.observe(el)
}
/**
* 自定义指令
* vue插件 必须要有install方法，在app.use()时会调用该方法
* @param app
*/
const install = (app:APP) => {
app.directive('resize', {
mounted(el,binding) {
useResize(el,binding.value)
}
})
}
// 将install 挂载到useResize上的install上
useResize.install = install
export default useResize
2.使用
<script setup lang="ts">
import {onMounted} from "vue";
import useResize from "../../../hooks/useResize";
// 自定义Hooks
onMounted(()=>{
useResize(document.querySelector('.box') as HTMLElement,(e:any)=>{
console.log('自定义Hooks',e)
})
})
// 自定义指令
const aaa = (e)=>{
console.log('自定义指令',e)
}
</script>
<template>
<div v-resize="aaa" class="box"></div>
</template>
<style scoped>
.box{
overflow: hidden;
border: 2px solid black;
resize: both;
width: 300px;
height: 300px;
}
</style>
总结
本文主要记录了vue3学习中自定义Hooks和vue2中Mixins的使用与案例。
