Vue学习记录之十四自定义hooks综合实例

LvManBa

于 2024-10-20 10:26:51 发布

阅读量602

点赞数 15

文章标签： vue.js 学习 javascript

本文链接：https://blog.youkuaiyun.com/LvManBa/article/details/143081910

版权

自定义 Hook 就是自定义函数，但这些函数通常依赖 Vue 的组合式 API，并封装组件逻辑，使其更易于维护和复用。自定义 Hook 可以像普通函数一样调用，但在设计时要考虑组件的生命周期和响应式数据。

一、实例1 图片转化为64编码

<template>
    <div>
        <img id="img" width="300" height="300" src="./assets/images/1.jpg" />
    </div>
</template>
<script setup lang='ts'>
import {
      ref,reactive } from 'vue'
import useBase64 from './hooks'
useBase64({
     el:'#img'}).then(res=>{
     
    console.log(res.baseUrl)
})
</script>

./hooks/index.ts

import {
    onMounted } from "vue"
type Options = {
   
    el:string
}
//为了获取到返回值，使用Promise，那么返回值的类型就是Promise, 返回值是字符串类型的baseUrl
export default function(options:Options