实操

vue

vue3

echarts自适应 和 ts 防抖 加节流

onMounted(() => {
    getwith()
    myecharts()
    window.addEventListener('resize', resizefc)

})

//调用
const resizefc = () => {
    fangdou(() => { getwith() }, 200)()
}

//防抖
function fangdou(func: () => void, time: number = 1000) {
    let timer: number | null = null;
    return (...args: any) => {
        if (timer) clearInterval(timer)
        timer = window.setTimeout(func, time)
    }
}

// echarts 自适应
const getwith = () => {
    var chartDom = document.getElementById('main')!;
    var myChart = echarts.init(chartDom);
    myChart.resize()
    console.log('调用了');

}
//节流
function throttle(func: () => void, time: number = 1000) {
    let canRun: boolean = true;
    return function () {
        if (!canRun) return;
        canRun = false
        setTimeout(() => {
            func();
            canRun = true
        }, time);

    }
}

两个分开很有用，在一起用不太清楚，echarts自己有防抖。

vue判断pc 手机端

const Modle = () => {
    let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
    return flag;
}
//PC端返回一个null

vuex 与 ts

import user from './model/user'
import { InjectionKey } from 'vue'
import { createStore, useStore as baseUseStore, Store } from 'vuex'

export interface userType {
    userInfo: any
}

// 为 store state 声明类型
export interface State {
    user: userType
}



// 定义 injection key
export const key: InjectionKey<Store<State>> = Symbol()
// 创建一个新的 store 实例
const store = createStore<State>({
    modules: {
        user
    }
})


export function useStore() {
    return baseUseStore(key)
}
export default store

生成天和时的二级联动数组函数（月最后一天）

const Times = () => {
             var nowTime=new Date()
	    let nowday = nowTime.getDate()
	    let nowhour = nowTime.getHours()
	    //获取当前月的最后一天
	    nowTime.setMonth(useTime.getMonth() + 1);
	    let lastday = useTime.setDate(0);
	
	    //  定义数据
	    let columns = []
	    let useday = nowday
	    let usehour = nowhour
	    let usechildren= []
	
	    //搭建天的循环
	    for (let i = 0; i < 7; i++) {
	        //搭建小时（9-20工作时间，除去当天已经过去的时间）
	
	        usechildren = []
                //当天19点前才可以预约当天，预约时间9-20，提前一小时预约
	        if ((useday + i) == nowday) {
	            if (usehour < 19) {
	                for (let j = usehour + 1; j < 20; j++) {
	                    usechildren.push({ label: `${j}时`, value: `${j}` })
	                }
	            } else {
	                useday++
	                for (let j = 9; j < 20; j++) {
	                    usechildren.push({ label: `${j}时`, value: `${j}` })
	                }
	            }
	        } else {
	            for (let j = 9; j < 20; j++) {
	                usechildren.push({ label: `${j}时`, value: `${j}` })
	            }
	        }
	
	        // 防止月末 推入暂存栈
	
                useday + i > lastday ? (columns.push({ label: `${useday + i - lastday}日`, value: `${i}`, children: usechildren })) : (columns.push({ label: `${useday + i}日`, value: `${i}`, children: usechildren }))
	
	
	    }
	    return columns
	    // 天和时的二级联动，用于预约最近几天固定时间，记录step天数，小时value，方便计算计算机可识别时间;
	}