项目搭建好之后，开始写基本的布局。后台管理系统的布局3大元素：头部、侧栏、主要内容，各种布局结构相差不大，我选择了下图所示的布局，其中头部、侧栏、页签在页面中是固定的，只有主要内容容器会跟随页面滚动。

我始终坚持，前端开发不能满足于实现功能，而是需要提供优秀的交互与用户体验。即使没有产品没有UI的小项目，也可以自己控制出品质量，做到小而美。所以前端们不仅仅需要了解框架如何用，还要学习一些设计、交互、体验的知识，在一堆雷同的产品中脱颖而出。哦，扯远了，因为今天想记录的这个功能是一个小小的体验提升，有感而发了。表格行数较多时会让页面产生滚动条，用户滚动页面的话，上面的搜索条件或者其它内容被卷上去了看

早就想着要放几个编辑器的Demo到项目中，这也是项目开始就立下的flag。今天专门挑选了几款主流编辑器，包括绕不开的富文本编辑器，码农最爱的markdown编辑器，还有用途相对少的代码编辑器。时间有限的情况下，仅引入4个编辑器到我的vue3项目中，尝试了一下基础功能，以及富文本编辑器上传图片的配置。实践证明使用过程并不复杂，也没有什么坑（也有可能是没有深入使用的缘故），再加上它们的文档都很详尽，还

iconfont是过去使用较多的图标方案，后来更倾向于使用SVG，因为SVG更灵活兼容性更好。在最近的几个Vue2项目中，因为强调功能弱化设计所以直接用Element UI自带的图标即可满足需求。Element Plus的图标库相对Element UI更加丰富，然而对于喜欢折腾的人还是远远不够的，在我折腾的这个个人仓库，决定尝试更多图标解决方案。除了使用Element Plus自带的图标，icon

本次需求是一个比较复杂的数据录入表单（如下图所示），分成5个步骤，其中1，2，4，5步骤的子表单是比较简单的输入和选择，最复杂的是步骤3：分为6种组织类型，每种类型可以增（上限10个）删改其下的组织（公司），每个组织（公司）下可以增删改联系人（上限20个），同时需要对表单做即时验证，包括必填字段，组织（公司）名称判重，联系人判重...

需求：叉掉浏览器窗口，弹出提示，确认后才会关闭窗口mounted() {window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))},methods: {beforeunloadHandler(e) {this._beforeUnload_time = new Date().getTime()e = e

官方文档参考：https://cn.vuejs.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B由于 JavaScript 的限制，Vue 不能检测以下数组的变动：当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue当你修改数组的长度时...

/ 在绑定元素的 attribute 前 // 或事件监听器应用前调用 created(el , binding , vnode , prevVnode) {// 下面会介绍各个参数的细节 } , // 在元素被插入到 DOM 前调用 beforeMount(el , binding , vnode , prevVnode) {} , // 在绑定元素的父组件 // 及他自己的所有子节点都挂载完成

早就想着要放几个编辑器的Demo到项目中，这也是项目开始就立下的flag。今天专门挑选了几款主流编辑器，包括绕不开的富文本编辑器，码农最爱的markdown编辑器，还有用途相对少的代码编辑器。时间有限的情况下，仅引入4个编辑器到我的vue3项目中，尝试了一下基础功能，以及富文本编辑器上传图片的配置。实践证明使用过程并不复杂，也没有什么坑（也有可能是没有深入使用的缘故），再加上它们的文档都很详尽，还

我始终坚持，前端开发不能满足于实现功能，而是需要提供优秀的交互与用户体验。即使没有产品没有UI的小项目，也可以自己控制出品质量，做到小而美。所以前端们不仅仅需要了解框架如何用，还要学习一些设计、交互、体验的知识，在一堆雷同的产品中脱颖而出。哦，扯远了，因为今天想记录的这个功能是一个小小的体验提升，有感而发了。表格行数较多时会让页面产生滚动条，用户滚动页面的话，上面的搜索条件或者其它内容被卷上去了看