硅谷甄选前端Vue3+TS学习笔记

硅谷甄选前端Vue3+TS学习笔记

vue3+ts

水平一般，还在学习阶段，主要是记录一些自己使用不怎么熟练的，欢迎指导与讨论。

nextTick

使用场景：layout中main组件，进行刷新时重新获取路由发送请求，策略为销毁路由再重新创建，不使用定时器时因为不能明确路由何时被销毁。

<template><!-- 路由组件出口的位置--><router-view v-slot="{ Component }"><transition name="fade"><!-- 渲染layout一级路由的子路由 --><component :is="Component" v-if="mainFLag"></component></transition></router-view>
</template><script setup lang="ts">
import useLayoutSettingStore from "@/store/modules/setting.ts";
import {watch, ref, nextTick} from "vue";let useLayoutStore = useLayoutSettingStore()let mainFLag = ref(true)
watch(() => fresh, () => {// 先销毁路由组件的dommainFLag.value = false// 使用nextTick保证路由组件销毁后再创建而不是延时器nextTick(() => {mainFLag.value = true})
})
</script>

暗黑模式与主题颜色的切换

看element-plus官方文档即可，main.ts引入相应样式文件，获取根节点元素添加dark属性即可。

对于暗黑模式，如果有设置颜色的样式应该是不起作用的。（所以如果出现部分黑色但其他未发生拜年话的情况，可以检查一下是否已设置color属性）

const changeColor = () => {const html = document.documentElementhtml.style.setProperty('--el-color-primary',color.value)
}// 暗黑模式开关
let dark = ref(false)const changeDark = () => {// 获取根节点，加上一个dark属性即可let html = document.documentElementdark.value ? html.className = 'dark' : html.className = ''
}

数据大屏

重点是屏幕大小的适配

两种解决思路：第一种：vw,vh；第二种：scale

对于第一种需要进行相应数值的计算，例如父组件100vh对应1920px，如果子组件设计稿高度为192px，那么应该设置为10vh。

第二种无需计算，但是要注意scale的缩放是以最近一层父组件的中心位置进行缩放，所以要注意嵌套的关系来确定缩放的中心；需要解决留白问题

一些组件使用

el-tree：一定注意是    :props  组件label一直没渲染出来，找了好久的bug

<el-treeref="menuTree":data="menuArr"show-checkboxnode-key="id":default-checked-keys="selectPermissionArr":props="defaultProps"/>

// 递归将所选数据存入数组
const filterSelectArr = (allData: any, initArr: any) => {allData.forEach((item: any) => {if (item.select && item.level === 4) {initArr.push(item.id)}if (item.children && item.children.length > 0 && item.select ) {filterSelectArr(item.children, initArr)}})return initArr
}

路由的使用（配置注意数组还是对象的形式）

这行代码是在定义一个名为menuRoutes的变量，并将其赋值为一个由三个数组合并而成的新数组。这三个数组分别是constantRoutes、userAsyncRoute和anyRoute。

constantRoutes、userAsyncRoute和anyRoute是预先定义好的数组，它们可能包含一些路由配置对象。通过使用[...]语法，这些数组的元素会被展开并合并到一个新数组中。

最终，menuRoutes将成为一个包含了三个数组中所有元素的新数组。

这行代码有一个细微的差别，最后一个数组anyRoute没有使用展开操作符[...]。因此，anyRoute将被当作一个单独的元素添加到menuRoutes数组中。

所以，menuRoutes将会包含constantRoutes和userAsyncRoute数组中的元素，以及anyRoute作为一个单独的元素。最终，menuRoutes将成为一个新数组，包含了这些元素。

异步路由加载白屏

本项目采用的路由首先存储管理常量路由，每个用户分配的异步路由是动态追加的，因此可能出现的问题是：在异步路由处刷新，虽然可能获取到用户信息，但异步路由还没有加载完毕即出现空白效果.。

解决方案：保证路由加载完成再放行。

 await userStore.userInfo()next({ ...to })

自定义指令

指令可以做哪些事情

• 操作渲染dom，比如vFocus、vMyHtml、数据格式转换
• 图片懒加载
• 上拉加载更多
• 下拉刷新
• ......

本项目中有一个控制按钮权限（按钮dom渲染）的实例：

入口文件注册：

// 引入自定义指令
import {isHasButton} from "@/directives/has.ts";
isHasButton(unt('#app')

编写指令：

import pinia from '@/store'
import useUserStore from "@/store/modules/user.ts";let useStore = useUserStore(pinia)export const isHasButton = (app:any) => {// 获取对应的用户仓库app.directive('has', {//使用这个指令的dom组件在挂载完毕时会执行一次mounted(el:any, binding:any) {// 若用户信息中没有buttons就会禁用console.log(binding.value)if(!useStore.buttons.includes(binding.value)){veChild(el)}}} )
}

使用：

 <el-button @click="addDialog" v-has="`has`">新增用户</el-button>