本文主要是介绍@vueuse/core 常用方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
createGlobalState | VueUse中文文档
<template><div class="container"><div>{{ x }}-{{ y }}</div><div>{{ store }}</div><div><button @click="addNum">add-{{ counter }}</button></div><div><button @click="fullScreen">全屏</button></div><div><button @click="copyContent">点击复制</button></div><div :class="mode"><button @click="btn">切换主题色</button></div><div><button ref="element">useEventListener</button></div><div>{{ width }}-{{ height }}</div><div><button @click="throttledFn">throttledFn 3s</button></div><div><input ref="target" type="text" /><button type="button" @click="focused = true">focus</button></div><div ref="outside" style="border: 1px solid #ccc">Hello world</div></div>
</template><script lang="ts" setup>
import { watch, ref } from "vue";
import {useFullscreen,useClipboard,useLocalStorage,useMouse,useWindowSize,useDebounceFn,useThrottleFn,useColorMode,useEventListener,useCloned,useFocus,onClickOutside,
} from "@vueuse/core";// 鼠标坐标
const { x, y } = useMouse();// clone
const original = ref({ key: "value" });
const { cloned } = useCloned(original);
original.value.key = "some new value";console.log(cloned.value, original.value);// useStorage, useLocalStorage, useSessionStorage
const store = useLocalStorage("my-storage", {name: "Apple",color: "red",
});// 防抖
const counter = ref(0);
const addNum = useDebounceFn(() => {counter.value += 1;},300,{ maxWait: 5000 }
);// 节流
const throttledFn = useThrottleFn(() => {// do something, it will be called at most 1 time per secondconsole.log("throttledFn");
}, 3000);// 全屏
const { isFullscreen, toggle } = useFullscreen();
const fullScreen = () => {console.log("isFullScreen=", isFullscreen.value);toggle();
};// 点击粘贴useClipboard
const { text, copy, isSupported } = useClipboard();
const copyContent = () => {console.log("当前浏览器是否支持", isSupported.value, text.value);copy("点击复制");
};// 切换颜色
const mode = useColorMode();
const btn = () => {mode.value = mode.value === "light" ? "dark" : "light";
};// vueuse事件绑定
const element = ref(null);
useEventListener(element, "click", () => {console.log("监听点击事件");
});// 获取窗口宽高
const { width, height } = useWindowSize();// 自动获取焦点
const target = ref(null);
const { focused } = useFocus(target, { initialValue: true });watch(focused, (focused) => {if (focused) console.log("input element has been focused");else console.log("input element has lost focus");
});// 在这个元素外点击触发
const outside = ref(null);
onClickOutside(outside, (event) => console.log("outside click=", event));
</script><style scoped>
.light {background-color: #ccc;
}
.dark {background-color: #333;
}
.container {padding: 10px;display: flex;justify-content: center;align-items: center;align-content: center;flex-wrap: wrap;flex-direction: column;
}.container > div {width: 400px;display: flex;justify-content: center;
}
</style>
这篇关于@vueuse/core 常用方法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
