v3hooks --useToggle

import { ref, Ref, isRef, watch } from 'vue';


type State = string | number | boolean | undefined;
type RefState = Ref<State>

type Fn = (v?:any)=> void;

type Actions = Fn[];


function useToggle<T extends State, U extends RefState>(
    ...args: (T | U)[]
): [U,Actions]

/**
 * 用于在N个状态值间切换。
 * @param args 
 * @returns 
 */
function useToggle<T extends State, U extends RefState>(...args: (T | U)[]){
    
    const argsStateArr = args.map((variable)=> isRef(variable) ? variable : ref(variable));
    const initialValue = argsStateArr[0].value;
    const state = ref<State>(initialValue);
    let activeState = argsStateArr[0];


    // 1: 监听当前被激活的state异步
    // 2: 如果当前的异步发生改变则修改state
    watch([activeState],()=>{
        state.value = activeState.value
    },{
        deep:true
    })

    let currIndex = 0;
    const len = args.length;

    
    const toggle = (param?:T | U)=>{
        // 判定是否在参数里
        if( param !== undefined && args.includes(param) ){
            state.value = isRef(param) ? param.value : param;
            activeState = isRef(param) ? param : ref(param);
            return
        }
        // 顺序变化
        currIndex = currIndex + 1 > len - 1 ? 0 : currIndex + 1;
        state.value = argsStateArr[currIndex].value;
        activeState = argsStateArr[currIndex];
    };

    const createHandle = ()=>{
        return argsStateArr.map((active,index)=>{
            return ()=>{
                state.value = active.value;
                activeState = active;
                currIndex = index;
            }
        })
    };

    const actions: Actions = [ toggle, ...createHandle() ];
    
    return [ state, actions ]
}

export default useToggle

useToggle

用于在多个状态值间切换的 Hook。
(此处与 ahooks 略有不同,ahooks只能两个状态切换,本hook支持N个状态切换)

基础使用

<template>
    <div>
      <p>useToggleDemoState: {{useToggleDemoState}}</p>
      <button @click="handleUseTToggle">设置指定值</button>
      <button @click="useTToggle">useTToggle</button>
      <button @click="useTSetLeft">useTSetLeft</button>
      <button @click="useTSetCenter">useTSetCenter</button>
      <button @click="useTSetRight">useTSetRight</button>
    </div>
</template>

<script lang="ts">

import { ref } from 'vue';
import { useToggle } from 'v3hooks';


export default {
  
  

  setup() {
    //useToggle 测试
    const [ useToggleDemoState, [ useTToggle, useTSetLeft, useTSetCenter, useTSetRight]] = useToggle('left','center','right');

    const handleUseTToggle = ()=>{
      useTToggle('center')
    };

    return {
      useToggleDemoState,
      handleUseTToggle,
      useTToggle,
      useTSetLeft,
      useTSetCenter,
      useTSetRight,
    }
  }
}
</script>

useToggle接受多个参数,且在actions中进行同等数量导出。Actions中第一个为toggle切换,其余为设置对应参数。

异步值Toggle

<template>
  <div class="hello">
    <div> {{state}}</div>
    <button @click="toggle">toggle</button>
    <button @click="setToggle">setToggle</button>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue';
import { useToggle,useTimeout } from "../../../dist/index.js";
export default {
  
  setup() {

    const platform = ref<string>('安装 App');
    const platform2 = ref<string>('安装中...');
    const [state, [toggle]] = useToggle(platform, platform2,'不安装');

    useTimeout(() => {
      platform.value = `安装 ios App`
      platform2.value = '安装中2....'
    }, ref(3000));

    const setToggle = ()=>{
      toggle(platform)
    }
    
    return {
      state,
      toggle,
      setToggle
    };
  },
};
</script>

useToggle可以接受ref值的切换,内部支持了响应式,如果ref值发生变化,state会监听其变化同步修改。

Api

Params

参数说明类型默认值
value需要切换的值string - number - boolean - undefined-
同上同上-

Result

参数说明类型
state状态值-
actions操作集合Actions

Actions

参数说明类型
toggle触发状态更改的函数,可以接受可选参数修改状态值(state?: any) => void
action按照value顺序设置state为vulue() => void
同上同上
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: pyinstaller-hooks-contrib是一个用于PyInstaller的插件集合,它提供了一些额外的钩子和工具,可以帮助PyInstaller打包Python应用程序时更好地处理第三方库和依赖项。这个插件集合可以让开发者更轻松地打包和分发他们的Python应用程序。 ### 回答2: pyinstaller-hooks-contrib是一个库,它包含了许多用于PyInstaller的钩子,用于识别和处理不同的Python包和模块。 在PyInstaller中,钩子是指特定的脚本,它可以识别和处理Python程序中额外的依赖关系,以便正确地构建可执行文件。通常情况下,PyInstaller的核心程序只能处理Python的标准库和一些常见的第三方库,但是许多Python程序通常使用许多其他库和模块,这些库和模块需要通过钩子来处理。 pyinstaller-hooks-contrib库中的钩子可以帮助PyInstaller自动处理各种不同类型的Python模块和包。这些钩子的作用包括: 1.添加Python模块到可执行文件 2.处理特定的Python模块依赖库 3.处理模块内的资源文件 4.添加额外的数据文件到可执行文件 5.处理特定Python模块的数据文件 钩子的使用很简单,只需要将钩子文件放置在Helper Scripts目录下即可,PyInstaller将自动识别并在其构建过程中使用这些钩子。但是,需要注意的是,当钩子的更新或版本升级时,需要手动更新PyInstaller,并且可能需要更新钩子文件以适应更改。 总之,pyinstaller-hooks-contrib是一个非常有用的库,它使得PyInstaller可以轻松地处理各种不同类型的Python模块和包,以便将其转换为可执行文件。 ### 回答3: pyinstaller-hooks-contrib 是 PyInstaller 的一个插件,它可以帮助开发者在使用 PyInstaller 打包 Python 项目时,更高效地处理项目中的非 Python 文件。 在项目中,除了 .py 文件以外,我们还经常需要使用其它类型的文件,如图标、资源文件、配置文件等。这些文件的处理可能会影响到项目在不同平台上的可移植性和运行情况。 pyinstaller-hooks-contrib 可以让开发者方便地将这些文件打包进可执行文件中,并保持它们的相对路径关系。此外,该插件还提供了一些常用的钩子(hook)和文件类型处理器,使得开发者无需再手动指定这些需要打包的文件和其所需的依赖库。 例如,该插件提供了 win-icon 补丁,使得在 Windows 平台上为可执行文件添加图标更为简便。同时,该插件还支持打包 PyQt5 和 PySide2 等 GUI 库所需要的资源文件,避免了因打包不当而导致软件界面出现异常的问题。 总之,pyinstaller-hooks-contrib 为 Python 开发者提供了一系列方便实用的工具,能够让开发者更高效地进行跨平台软件开发和打包。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值