Skip to content

Instantly share code, notes, and snippets.

View DesignHhuang's full-sized avatar
🎯
do what i want to do

huangxiaomin DesignHhuang

🎯
do what i want to do
View GitHub Profile
@DesignHhuang
DesignHhuang / web design
Created September 21, 2023 09:38
Design
Design is about simplicity
@DesignHhuang
DesignHhuang / useStorage:使用存储
Created September 28, 2023 10:44
有用的 Vue.js 自定义 Hook(1)
import { ref } from 'vue';
const getItem = (key, storage) => {
let value = storage.getItem(key);
if (!value) {
return null;
}
try {
return JSON.parse(value)
} catch (error) {
@DesignHhuang
DesignHhuang / gist:3e12daa017aadc63fc752538abd69d9a
Created September 28, 2023 10:46
useNetworkStatus:使用网络状态
import { onMounted, onUnmounted } from 'vue';
export const useNetworkStatus = (callback = () => { }) => {
const updateOnlineStatus = () => {
const status = navigator.onLine ? 'online' : 'offline';
callback(status);
}
onMounted(() => {
window.addEventListener('online', updateOnlineStatus);
@DesignHhuang
DesignHhuang / gist:43a41a1691041e8f1c51df0f3aa9a312
Created September 28, 2023 10:47
useCopyToClipboard:使用复制到剪贴板
function copyToClipboard(text) {
let input = document.createElement('input');
input.setAttribute('value', text);
document.body.appendChild(input);
input.select();
let result = document.execCommand('copy');
document.body.removeChild(input);
return result;
}
@DesignHhuang
DesignHhuang / gist:8063d89829bfef47acfbca66398eecba
Created September 28, 2023 10:48
usePageVisibility :使用页面可见性
import { onMounted, onUnmounted } from 'vue';
export const usePageVisibility = (callback = () => { }) => {
let hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {
hidden = "hidden";
visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
@DesignHhuang
DesignHhuang / gist:d27a919f5bff60c7f097238a03b2d5b6
Created September 28, 2023 10:49
useViewport:使用视口
import { ref, onMounted, onUnmounted } from 'vue';
export const MOBILE = 'MOBILE'
export const TABLET = 'TABLET'
export const DESKTOP = 'DESKTOP'
export const useViewport = (config = {}) => {
const { mobile = null, tablet = null } = config;
let mobileWidth = mobile ? mobile : 768;
let tabletWidth = tablet ? tablet : 922;
import { onMounted, onUnmounted } from 'vue';
export const useOnClickOutside = (ref = null, callback = () => {}) => {
function handleClickOutside(event) {
if (ref.value && !ref.value.contains(event.target)) {
callback()
}
}
onMounted(() => {
@DesignHhuang
DesignHhuang / gist:ad9a01b87b65e1c46c831b148890eebf
Created September 28, 2023 10:50
useScrollToBottom:使用滚动到底部
import { onMounted, onUnmounted } from 'vue';
export const useScrollToBottom = (callback = () => { }) => {
const handleScrolling = () => {
if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
callback();
}
}
onMounted(() => {
import { ref, onUnmounted } from 'vue';
export const useTimer = (callback = () => { }, step = 1000) => {
let timerVariableId = null;
let times = 0;
const isPaused = ref(false);
const stop = () => {
if (timerVariableId) {
clearInterval(timerVariableId);