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....'
}, 3000);
const setToggle = ()=>{
toggle(platform)
}
return {
state,
toggle,
setToggle
};
},
};
</script>useToggle可以接受ref值的切换，内部支持了响应式，如果ref值发生变化,state会监听其变化同步修改。
Api
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];Params
Result
Actions
最后更新于