外观

组件库（无法满足->接口？->自定义/封装）

无论是ele/martix的tabs，display:none都无效，但组件库很少有问题

默认样式不行的时候，先看文档有没有提供接口，如果没有提供接口，并且需要手动修改的地方较多，就自定义/封装（如果需要重复使用）

兼容

不同尺寸（包裹，height:100%）

.workbench-create {height: 100%;display: flex;
}

不同浏览器隐藏滚动条的不同属性名

.left-wrap {height: 100%;overflow: auto;flex: 1;padding-left: 40px;//隐藏元素的滚动条。这通常用于自定义滚动条样式。scrollbar-width: none;/* Firefox */-ms-overflow-style: none;/* IE 10+ */&::-webkit-scrollbar {//伪元素选择器，用于选择Webkit浏览器（如Chrome、Safari等）中的滚动条。display: none;/* Chrome Safari */}

重排->重绘

不显示 display:none->禁用disable

性能

导航重复（修改原型push、replace方法）

push：将新的路由添加到浏览器的历史记录中，这样用户就可以通过浏览器的后退按钮回到之前的路由。

this.$router.push('/about')

replace：不会在浏览器的历史记录中留下新的条目，而是直接替换当前的历史记录条目。

this.$router.replace('/contact')

比如在处理登录页面时，登录成功后可能会用replace方法替换当前路由，以防止用户通过后退按钮回到登录页面。

修改 VueRouter 的原型方法 push 和 replace，用来捕获导航重复错误并进行处理，

而不会在控制台中抛出错误，从而避免了不必要的错误提示和潜在的问题。

import Vue from 'vue';
import VueRouter from 'vue-router';Vue.use(VueRouter);const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {return originalPush.call(this, location).catch(err => {if (err.name !== 'NavigationDuplicated') {throw err;}});
};const originalReplace = VueRouter.prototype.replace;
VueRouter.prototype.replace = function replace(location) {return originalReplace.call(this, location).catch(err => {if (err.name !== 'NavigationDuplicated') {throw err;}});
};const router = new VueRouter({// 路由配置...
});export default router;

搜索防抖 import { debounce } from 'lodash'

    <mds-selectstyle="width: 480px"v-model="formData.applyOa":multiple="true"placeholder="选择或搜索OA"filterable:remote="true":remote-method="searchOA":disabled="showDetail"clearable@change="changeOA"><mds-optionclass="select-oaAndDept"v-for="item in OAoptions":key="item.oa":value="item.empOa":label="item.empNmAndOa"><div class="select-name">{{ item.empNmAndOa }}<div class="select-dept">{{ item.deptNm }}</div></div></mds-option></mds-select>

import { debounce } from 'lodash'//防抖
// OA listOAoptions: any = []searchOA = debounce(this.searchOaAPi, 500)searchOaAPI(val: any) {bspUserInfoFuzzyQueryOaList({empOaOrNm: val,partitionDt: ''}).then((res: any) => {if (res && res.code == 200) {this.OAoptions = res.data} else {this.$message.error(res.msg || '系统错误')}}).catch((e: any) => {this.$message.error(e.msg)})}