自用笔记

在vue2中,mixins可以用来混入一些复用的函数,变量等等,在vue3版本中,特别是组合式的写法之中可以用钩子的方式来代替这一功能。

写一个复用的控制盒子展示或者隐藏的钩子useOpen

import {ref} from "vue"
export function useOpen(){
    // 创建控制变量
    const isOpen=ref<boolean>(true)
    let TriggleBox=()=>{
        isOpen.value=!isOpen.value
    }
    return {isOpen,TriggleBox}
}

钩子中创建了一个ref变量,并创建了一个改变该变量的方法,然后return了出来

下面是在组件之中的使用

<template>
    <div :class="['box',isOpen?'show':'hide']"></div>
    <button @click="TriggleBox">open box</button>
</template>
<script setup lang="ts">
import { useOpen } from "@utils/useOpen";
let {isOpen,TriggleBox}=useOpen()

</script>
<style lang="scss" scoped>
.box{
    width:100px;
    height:100px;
    background-color: palevioletred;
}
.show{
    display:block;
}
.hide{
    display: none;
}
</style>

ok

GitHub 加速计划 / vu / vue
80
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 6 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 6 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐