Alloom的博客

2021.9.28坑93（vue3、拖拽边缘调整侧边栏宽度、拖拽条组件、宽度限制）：目标是实现可拖动调整大小的右侧边栏。重要参考： 模板引用 | Vue.js (vuejs.org)预计通过ref、emit实现，分离拖拽条组件和侧边栏组件。（考虑过将拖拽条组件写在侧边栏组件内，与原侧边栏组件并列，这样就无需通过父组件获取ref，但会提示非根组件的@mousedown可能无效果）参考：vue组件间通信六种方式（完整版） - SegmentFault 思否Vue3.0：如何在父组件中调用

2021.9.27坑92（npm、更新依赖、error）：用npm更新如下依赖时报错。@vue/compiler-sfc^3.2.11→^3.2.19element-plus^1.1.0-beta.10→^1.1.0-beta.16ncu没检测到的（因为是next版本）： vue^3.2.11→^3.2.19npm ERR! code ERESOLVEnpm ERR! ERESOLVE unable t...

2021.9.26坑90（el-table、树结构与非树结构对齐）：目标是对齐树结构与非树结构的el-table。主要使用padding-left 实现。现在有一个el-table，采用树型结构显示，其中部分数据有子节点，部分数据无子节点。首先参考了ElementUI el-table组件 树形数据不对齐的解决方案_无枫的博客-优快云博客 选择类名不含有 el-table__row--level- 字段在内且有el-table__row类名的元素的某个显示展开箭头的列中的格子（被选中的格...

2021.9.24坑89（el-cascader）：一些配置el-cascader 时写的工具函数。允许选任意一级选项：配置 :props="{ checkStrictly: true }"参考： Cascader 级联选择器 | ElementPlus (element-plus.org)// 获取适用于el-cascader级联选择器的数据树，传入data为树结构数组，children为其中对象的子树数组export function getTreeForCascader(d..

2021.9.23坑86（el-table、default-sort、排序）：el-table 表格的自动/手动排序。自动：el-table自带能力。手动：自写排序函数处理事件。el-table自动排序参考文档： Table 表格 | ElementPlus (element-plus.org) 排序Sorting部分。在表格上设置 default-sort 属性即可自动排序，类型为对象。prop 排序属性，order 排序方式，类型都为字符串。// descending 降序 ...

2021.9.22坑81（vue、@click、绑定多个事件）：@click 绑定多个事件，中间逗号隔开即可，参数各自传输。代码如下：@click='function1,function2(para)'参考：vue中@click绑定多个事件_YanHSama的博客-优快云博客_@click绑定多个事件坑82（vue、props、emits、触发函数）：问题场景是父组件使用props传输函数到子组件运行，会死循环（原因不明）。以add函数为例，主要代码是父组件中以属性式绑定函数:.

2021.9.18坑79（props、默认值、vue3）：组件传props，设置默认值。props: {isDisabled: {type: Boolean,default:false,},},坑80（el-form、禁用）：目标是对el-form表单整体禁用，但其中个别元素不禁用。解决方案：内嵌一个el-form表单，其中的元素不会被禁用。<el-form :dis...

2021.9.17坑77（Array、判断数据类型、javaScript）：判断数据类型是否为数组Array。用typeof返回的是object。采用Array.isArray() 方法判断。let arr=[1,2,3]Array.isArray(arr) // true参考：js如何判断数组是Array类型 - ~零度~ - 博客园 (cnblogs.com)坑78（ref、vue3）：使用ref类型获取组件元素时，在script中需要通过value获取属性，而在templa.

2021.9.16坑74（el-form、label、对齐方式）：el-form 设置标签 label 的对齐方式 label-position 属性为 right 或 left 时，需同时设置标签宽度 label-width 属性。若无设置，标签 label 的宽度会随标签内容自动调整，无对齐效果（ label 看似左对齐，但内容头部不会对齐，会贴着 label ）。默认对齐方式为 right ，右对齐。可选值为right、left、top （ label单独在内容上方一行 ）。参考：Fo...

2021.9.15坑72（javaScript、delete、删除对象中某一属性）：使用delete操作符即可， delete 操作符用于删除对象的某个属性。成功删除返回 true，失败返回 false。let obj={ name:'coco', color:'black', size:'big' }// 执行delete操作delete obj.color // truedelete obj[size] // true// 此时，obj={name='coco' }，...

2021.9.9坑71（vue、进度条、nprogress、umi-plugin-nprogress-runtime、自动监听网络请求）：目标是在页面加载和网络请求时显示顶部进度条。踩坑：开始使用了nprogress包，安装npm install --save nprogress。安装及使用参考： nprogress的简介及使用教程 - Made with Vuejs 。官网： NProgress: slim progress bars in JavaScript (ricostacru..

2021.9.7坑67（div、css、固定宽高比）：目标是使div元素在缩放时宽高比固定。因为垂直方向上的内外边距使用百分比做单位时，是基于包含块的宽度来计算的。所以使用padding-bottom实现宽高比固定的元素块。实现：divBox实现固定宽高比，divContent则为其中内容，实现内容定位。.divBox {/* 相对位置，定位基于该元素原先位置 */ position: relative;/* 宽:高=4:3 */ width: 40%;heigh...

2021.9.6坑64（element-plus、语言配置）：element-plus默认语言是英文。而目标是配置语言为中文。参考文档组件 | Element (element-plus.org)国际化，可以很快配置完成，代码如下：// main.jsimport ElementPlus from 'element-plus'import zhCn from 'element-plus/es/locale/lang/zh-cn'app.use(ElementPlus, { loca..

2021.9.3坑61（element-plus、根据视口尺寸隐藏元素）：文档要求引入文件import 'element-plus/lib/theme-chalk/display.css'，其中地址错误，查看包文件结构后，确认地址应该为：import 'element-plus/theme-chalk/display.css';地址改变的原因是element-plus更新到1.1.0-beta.1版本的时候的变化。详细见：Breaking changes made in 1.1.0-bet..

2021.9.1坑57（组件折叠）：简单实现向左折叠，无动画。效果是点击带箭头的长条（加了背景色方便查看）改变折叠状态。思路是外层包裹flex自动左到右排列，使用v-show控制内层元素显示，图标使用@element-plus/icons。<template><div class='viewBox'><AItem v-show="isShowAItem" /><div class='ArrowForAIt...

2021.8.30坑56（npm、yarn、ncu、vue3.2.x、升级包、esbuild、element-plus）：主要是完成之前未完成的vue到3.2.x的更新（因为element-plus当时依然是基于3.1.x版本的vue，更新后会报错，详见 Uncaught SyntaxError: The requested module ‘/node_modules/.vite/vue.js?v=50ccac76‘ does not provide_Alloom的博客-优快云博客；现在element

2021.8.16坑53（vue3、vue-router4、动态路由、刷新404或白屏、next）：简略版：（tips：不只刷新会出问题，输入网址导航也会）1、刷新404：将匹配全部为定义路径到404的路由从静态路由表中去除，在动态权限路由都添加了之后在添加。接下来可能会报warn并白屏，解决方法见下一条2。2、刷新白屏：如果是在路由守卫router.beforeEach中检测并用router.addRoute添加的路由，则需要将动态权限路由添加后的next()放行，改为next(to)触发

记录一下踩坑记的更新修订，便于查阅。（修错别字、语句等不计入更新）2021.8.12更新：踩坑记11，坑36（npm、更新包），添加简化版的包更新方式。链接：踩坑记11 vue3 组件化 watchEffect component组件 @element-plus/icons el-icon npm和yarn更新包_Alloom的博客-优快云博客2021.8.13更新：踩坑记6，坑18（vue3、vue-devtools beta），添加build时error的解决方法（将rm -rf替换.

2021.8.12坑50（vue-router4、addRoute()、router.options.routes未更新）：进行动态权限获取菜单的设置，使用了addRoute()来添加路由，但是router.options.routes未更新，依然只有原来的路由列表值。相关API简要介绍：addRoute()，添加一条新的路由记录到路由，文档：API 参考 | Vue Router (vuejs.org)router.options.routes，应该添加到路由的初始路由列表，文档： AP.

2021.8.11坑46（vue3、组件命名）：目标是将多组件组成的主页面集中到一个文件夹内，例如pages/home文件夹，其中放置主要引用文件index.vue和其他组件比如UserOperate.vue等，此时，index.vue中导出的name应该依然试用'Home'。// 例一 pages/home/index.vue<script>export defalut { name:'Home'}</script>// 例二 pages/lo..

2021.8.10坑42（css、子元素充满父元素）：目标是通过css使html子元素充满父元素。其中，height: 100%需要父元素有高度设置才起效。如下设置即可：.box {width: 100%;height: 100%;}坑43（el-tree、高度充满父元素）：目标是使el-tree元素的高度充满父元素。普通使用，单个el-tree组件：首先尝试设置height: 100%，无效果，el-tree的高度依然为内容高度。之后外包一层div设置其高...

2021.8.6坑39（vuex4、module、命名空间）：目标是将原先直接写在store/index.js中的部分与页面布局相关的参数进行模块化集成到store/modules/layout.js中。文档： Module | Vuex (vuejs.org)以下是未设置命名空间时（会报warning，见下）：// layout.jsconst state={//菜单是否水平收起isMenuCollapse:false}const mutations={...

坑41【暂未填，记录于2021.8.6，对应链接】（el-menu、collapse、el-aside、折叠动画）：目前将el-menu嵌套在el-aside中的，el-aside的宽度根据菜单的折叠情况，设置为64px或220px。观察实际渲染的菜单元素，折叠到展开其宽度是瞬变；而在展开转变为折叠时，根据el-menu的collapse-transition属性，true（默认）宽度慢慢变小，false瞬变。于是一开始的目标使el-aside的宽度随el-menu的宽度变化，提升显示效果的动态感。但之

8.5封装组件，使用el-icon（SVG Icon）。坑34（封装、组件化、生命周期钩子、路由守卫）：本坑记录的是未使用watch/watchEffect时的原始封装方法，仅作为记录。ps：下一坑35采用watchEffect方法（超好用！！！）。与上一篇 踩坑记10 vue3、vuex4、组件化_Alloom的博客-优快云博客坑33中的封装方式（父组件获取路由数据，通过props传值给子组件，子组件通过computed设置响应性，数据更新时间是在父组件setup中调用onMounte.

2021.8.4使用vuex4替换emit。进行组件化。坑32（vuex4、keep-alive、el-tabs、标签页，缓存）：背景是需要进行组件化，标签页组件将被多层嵌套，之后emit将不再适用(用起来需要多层传递)。以下是之前的操作，主要使用emit传递打开着的标签页信息：前传1（keep-alive基础使用）： 踩坑记3 keep-alive 缓存、el-tabs 获取点击前后的参数 等_Alloom的博客-优快云博客；前传2（keep-alive+emit保存标签页打开着的组

2021.8.3做一些界面样式切换的小功能。坑28（css、选择器、统一间距）：目标是选择一个父元素的全部子元素，通过margin设置统一的左右间距。使用的选择器是element > *，其中'>'表示在element的子元素中选择，'*'表示选择所有元素，相关代码如下。.setMenuBox{display: flex;flex-direction: row;align-items: center;}.setMenuBox > *...

2021.7.30坑24（element-plus、el-icon、图标大小）：目标是改变el-icon的大小，默认大小是16px*16px。方法：改变元素字体大小font-size即可（一般想不到吧），如下：// html<i class="el-icon-user userIcon" />// css.userIcon{font-size: 20px;}坑25（element-plus、el-dropdown、鼠标指针样式）：目标是使鼠标指针...

2021.7.29坑19（css、el-menu、目录、样式）：配置完目录el-menu后，发现其中文字内容均为居中展示，而element-plus官网文档效果是左对齐的。发现原因：包裹目录的组件中设置了text-align: center，改为left即可实现目标效果。但这也会影响到其他各组件的效果。参考： element ui 导航怎么让菜单对齐啊-优快云论坛坑20（css、el-menu、目录、样式）：设置目录el-menu自定义颜色（深色）后，与左侧整体相比，宽度在右侧少1px（视

2021.7.28坑17（vue3、生命周期钩子、导航守卫、页面刷新）：发现页面刷新后在导航守卫afterEach()中设置的头部的面包屑、标题、标签页调整函数updateHeader()并未触发，即刷新页面无法触发afterEach()，也就无法正确显示刷新后页面的头部。解决方法：在生命周期钩子onMounted()中调用updateHeader()，该钩子会在页面刷新后触发。以上导航守卫和生命周期钩子都写在setup()中。注：vue3中，生命周期钩子在setup()中使用，并接收一个回..

2021.7.27axios、网络请求、跨域请求、回车提交、动态修改html元素坑14（axios、跨域请求、vite、proxy代理）：在调用axios时直接传绝对地址会报错："...has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. CustomerInfo.vue:22 Error: Network Error"。原因是被

2021.7.14路由、标签页、keep-alive、emit坑13（vue3，keep-alive，emit，标签页，Component，缓存，子组件到父组件的信息传递）：目标是缓存标签页中目前打开的Component，在标签页中关闭后不再缓存。方法是使用keep-alive组件+emit函数。布局组件Layout（父组件）中，放置含标签页的Header组件、路由视图router-view组件及keep-alive组件，设置接受并处理emit信息的函数：<Header @tab

2021.7.13路由、标签页、侧导航坑8（路由，keep-alive，vue3，vue-router4）：vue2时：<keep-alive> <router-view /></keep-alive>vue3、vue-router4时，直接替换即可，无需额外设置Component：<router-view v-slot="{ Component }"> <keep-alive> ...

2021.7.8路由、面包屑坑4（方式，路由获取，vue3，vue-router4）：与vue2的路由获取方式不同（this.$route、this.$route.matched），vue3的路由获取方法如下：import { useRouter } from 'vue-router'...const router=useRouter()const routes=router.getRoutes() //所有活跃的路由记录const currentRoute=route

vue文档看了一半，element-plus文档过了一遍，vue-router文档过了一遍。总目标：后台管理系统前端。开搞。2021.7.7登录页+路由坑1（error，包加载）：路由失败，error提示类似“SyntaxError: The requested module‘/node_modules/.vite/vue-router/dist/vue-router.esm.js?v=4830dca4’does not provide an export named..