学一个新的东西
1是什么 2解决什么问题 3怎么使用 4原理
写功能注意事项
1、布局layout row col card
<el-container direction="vertical" style="background: #f0f2f5;height: 100%;">
<!-- 头部菜单 -->
<Header :headerActiveMenu="headerActiveMenu"></Header>
<!-- 头部以下的整体 -->
<el-container style="height: calc(100% - 50px);"> <!-- 头部以下的整体高度固定，头部就可以固定.不会因下文高度过长把头部挤上去 -->
<!-- 左侧菜单 -->
<LeftSide :leftSideMenus="leftSideMenus" :activeMenu="activeMenuDetail.path"></LeftSide>
<!-- 中间部分 -->
<el-container direction="vertical" style="height: 100%;">
<!-- 展示主要信息部分 -->
<el-main style="padding:0;height: 100%; overflow: hidden;"> <!-- 固定主域高度，内部高度过长时，主域出现滚动条 -->
<Tabs :activeMenu="activeMenuDetail.path">
<router-view></router-view>
</Tabs>
</el-main>
<!-- 底部信息 -->
<el-footer style="height: 30px;line-height: 30px;padding: 0 50px;background-color: rgba(0,0,0,.05);color: rgba(0,0,0,.65);font-size: 14px;">Copyright © 2022 连连（杭州）信息技术公司 LianLian</el-footer>
</el-container>
</el-container>
</el-container>
// 嵌套路由 Layout被渲染到最外层APP.vue中的<router-view>中，View 会被渲染到Layout的<router-view>内部， Database会被渲染到View的<router-view>内部
const metaDataRoute = {
name: '元数据',
path: '/metaData',
component: Layout,
redirect: '/dataSource/database',
children: [
{
name: '业务源管理',
path: '/dataSource',
component: View,
icon: 'Coin',
redirect: '/dataSource/database',
children: [
{
name: '业务源数据库',
path: '/dataSource/database',
component: Database,
},
{
name: '业务元数据管理',
path: '/dataSource/metaData',
component: MetaData,
},
{
name: '库分析',
path: '/dataSource/databaseAnalysis',
component: DatabaseAnalysis,
hidden: true,
}
]
}]
2、form表单要校验，重置（form上写ref、rule、form-item加上prop），table一般留出一列不写宽度自适应，编辑table表的某一行把这一行的info {...info}一下传递给子组件，防止子组件resetFields()改变table中的这行数据
是否必填，填写格式、填写错误提示，
删除要二次确认
dialog中，从父元素传递过来的dialogVisible要const visible = computed(() => props.dialogVisible);再在中使用，因为v-model会改变他的值，props中的数据不可以改变。dialog在页面渲染的时候就挂载到页面里，以后每次通过visible更新显隐会触发onUpdated
如果需要强制刷新dialog可以在使用dialog组件的地方中v-if控制dialog的出现与否
3、http 请求要有loading ，但是请求一些select中的列表不需要loading
返回信息要有成功或这错误提示以及后续刷新，
如果是获取列表只需有错误提示正常无需提示，提示可关闭
如果是提交操作提交成功错误都有提示，错误的时候要把loading关掉
操作成功刷新列表 pageSize pageNo停留在当前页，删除会可能最后一页没了要注意处理一下 query保持原样
const defaultPagination = {
pageNum: 1,
limit: 10,
total: 0,
}
**
* 查询停车记录列表
*/
const getRecordsGroupList = (pagination = defaultPagination) => {
state.loading = true;
getRecordsGroup({
pageNum: pagination.pageNum,
limit: pagination.limit,
...state.queryForm
})
.then((res) => {
state.loading = false;
state.recordList = res.records
state.pagination = {
pageNum: pagination.pageNum,
limit: pagination.limit,
total: res.count
}
})
}
// 改变每页条数
const handleSizeChange = (val: number) => {
getRecordsGroupList({ ...state.pagination, pageNum: 1 , limit: val})
}
// 翻页
const handleCurrentChange = (val: number) => {
getRecordsGroupList({ ...state.pagination, pageNum: val })
}
图片要压缩 http请求压缩与解压缩
4、子组件中的数据如果和父组件无关可以子组件单独写，如果和父组件相关从父组件中传递过来。 虽然说数据向上提升，父组件逻辑组件 子组件展示组件，也要看实际情况
5、按道理说只在这个页面使用的组件写在这个页面的components下，其他页面也会用的组件写在公共的components下，但后裔项目有些特殊
6、看别人的代码 熟悉每个函数大致的意思后，可以通过打断点把各种情况的函数流程串起来
命名
熟练使用 create增 delete删 update改 查search select
详情detail getOrderDetail 列表list
查询search searchProduct(No)
assemble组装 如assembleOrder generate生成 如generateOrderNo
handleNodeClick() 或 nodeClickHandler
desc 降序 asc升序
synchronization sync 同步 默认代码同步 async异步
status 状态 计算机常用
后端如果让同时传选中的id和name，可以考虑name如果改变了，以前存储的name就会有问题，所以让他们用id去查name比较好
element UI源码阅读
(1)、枚举 如果在多个地方使用可以写成枚举常量，如果只用一次可以不写
// type
<template v-if="type!== 'textarea'">
<input
ref="input"
@change="changeHandle"/>
</template>
<template v-else>
<textarea
ref="textarea"
@change="changeHandle"></textarea>
</template>
(2)、边界条件判断,是否为空判断
computed: {
nativeInputValue() {
return this.value === undefined || this.value === null ? '' : String(this.value);
}
},
methods: {
setNativeInputValue() {
const input = this.getInput();
if (!input) return;
if (input.value === this.nativeInputValue) return;
input.value = this.nativeInputValue;
},
}
样式class命名
// panel-group-->card-panel-->card-panel-icon-wrapper-->card-panel-icon
<el-row :gutter="40" class="panel-group">
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('newVisitis')">
<div class="card-panel-icon-wrapper icon-people">
<svg-icon icon-class="peoples" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">
New Visits
</div>
<count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
</div>
</div>
</el-col>
<el-row>
动作函数要以动词开头
function sendEmailToUser(user) {
}
npm 命令行工具开发
vite不能用require
webpack里可以用 vite不能用require 用在函数里写new URL()加载资源
更改elementui样式
>>>父元素 里面写子元素 注意css选择器 加载elementui按需加载引入样式css或scss文件 table min-width dropdown.show()展示drop的下拉菜单
prevent auto
prevent auto 保持原来的事件 none去掉原来的事件可以操作地图 如果操作不到地图看一下是否上面有层遮挡
vue-router
子组件按路由加载 子组件会反复mount 父组件只在最初mount一次 其他时间要改动需要 watch route或其他
flex
flex 1可以让这个子元素大小随容器大小自适应 平均排布在父容器里
skew
矩形skew变平行四边形
背景 图片 阴影
图片做背景 可以设置位置大小 shadow 阴影 内阴影 text-shandow 文字发光
nodejs node-sass pnpm 版本对应
nodejs版本号和node-sass要对应 14-4 16-5 node14可以用pnpm7 pnpm8不行
布局
大屏左右两侧 前几个模块flex 不为1 有固定高度，最后一个flex可以为1 height：100% 外层oveflow hidden 内层overflow scroll flex: 1可以使元素均匀的排列 不够长可以底部加长 否则会挤在一起
文本行不设高度 和别的间隙用margin
明眼看出来是一个框中间有内容的时候 可以设框高度 内部居中
margin为正负 稍微偏移
button width xxrem min-width 38px 按钮宽度大的时候自动缩放 小于38px时不缩放 里面文字不会被挤换行
注意数字英文的换行 word-break: break-all
class选择器
p:first-child 第一个p
p>:first-child p内的第一个子元素
.ppp.xxx class=“ppp xxxx”
Ant Design的设计
lucifier129.github.io/ant-design/…
摘要 产品设计 自然
确定性 完美不在于无以复加，而在于无可删减，万事莫不如此
布局 统一画板 为了尽可能减少沟通与理解的成本，有必要在组织内部统一设计板的尺寸。蚂蚁中台设计团队统一的画板尺寸为 1440。 宽度用百分比 flex
适配# 在设计过程中，设计师还需要建立适配的概念，根据具体情况判断系统是否需要进行适配，以及哪些区块需要考虑动态布局。据统计，使用中台系统的用户的主流分辨率主要为 1920、1440 和 1366，个别系统还存在 1280 的显示设备。
网格单位# Ant Design 通过网格体系来实现视觉体系的秩序。网格的基数为 8，不仅符合偶数的思路同时能够匹配多数主流的显示设备。通过建立网格的思考方式，还能帮助设计者快速实现布局空间的设计决策同时也能简化设计到开发的沟通损耗 关于栅格# Ant Design 采用 24 栅格体系。以上下布局的结构为例，对内容区域进行 24 栅格的划分设置，如下图所示。我们为页面中栅格的 Gutter 设定了定值，即浏览器在一定范围扩大或缩小，栅格的 Column 宽度会随之扩大或缩小，但 Gutter 的宽度值固定不变。
在大量的实践中，我们提取了一组可以用于 UI 布局空间决策的数组，他们都保持了 8 倍数的原则、具备动态的韵律感。经过验证，可以在一定程度上帮助我们更快更好的实现布局空间上的设计决策。
是启发，而非限制
主字体# 我们基于电脑显示器阅读距离（50 cm）以及最佳阅读角度（0.3）对 Ant Design 的主字体进行了一次升级，从原先的 12 上升至 14，以保证在多数常用显示器上的用户阅读效率最佳
形式，是构成一个图形最初始的结构。Ant Design 整套基础图标基本上都是由圆、方、三角这样的图形演变而成的 Ant Design 图标的韵律感通过两个方面来体现：元素的韵律和构图的韵律。系统图标中最常见的元素基本上可以归纳称为：点、线、圆角、三角。
正如 Alan Cooper 所言：「需要在哪里输出，就要允许在哪里输入」。这就是直接操作的原理。eg：不要为了编辑内容而打开另一个页面，应该直接在上下文中实现编辑。
能在这个页面解决的问题，就不要去其它页面解决，因为任何页面刷新和跳转都会引起变化盲视（Change Blindness），导致用户心流（Flow）被打断。频繁的页面刷新和跳转，就像在看戏时，演员说完一行台词就安排一次谢幕一样。
二次确认覆盖层：避免滥用 Modal 进行二次确认，应该勇敢的让用户去尝试，给用户机会「撤销」即可。 或用Popconfirm进行二次确认，在当前页面完成任务。
列表嵌入层：在列表中，显示某条列表项的详情信息，保持上下文不中断。
弹出框覆盖层：虽然弹出框的出现会打断用户的心流，但是有时候在弹出框中使用「步骤条」来管理复杂流程也是可行的。
如果某个操作非常重要，就应该把它放在界面中，并实时可见。 如果某个操作不那么重要，或者使用「实时可见工具」过于啰嗦会影响用户阅读时，可以在悬停在该对象上时展示操作项。 如果某些操作只需要在特定模式时显示，可以通过开关来实现。
在使用 Table 时，文字链的点击范围受到文字长短影响，可以设置整个单元格为热区，以便用户触发。当需要增强按钮的响应性时，可以通过增加用户点击热区的范围，而不是增大按钮形状，从而增强响应性，又不缺失美感。
中国默认使用 yyyy-mm-dd 格式。（其它国家参考链接）。 2019-12-08 含有月日的专用名词采用阿拉伯数字表示时，应采用间隔号 · 将月、日分开，并在数字前后加引号。 6.1 儿童节 在日期或时间范围之间显示一个波浪号 （前后需要空格）。 2018-12-08 ～ 2019-12-07 二十四小时时间格式 HH:mm:ss 。 14:08:00
十二小时时间格式 h:mm:ss 。 2:08:00 PM | 2:08:00 AM 期与时间连在一起时，两者之间用「空格」隔开，如“2019-12-08 06:00:00”。
在表述内容时，关注点应该是用户和他们能用你的产品做什么，而不是你和你的产品在为他们做什么，所以内容表述的立足点很重要。既然以用户为中心，文案就应该尽量以用户为主体来写作。
省略无用词汇，不重复用户已知事实；在绝大多数交互场景下，都无需界面描述出全部的细节。尽量提供简短、易于快速获取的内容。
使用 不使用
其他 其它 「其他」的应用范围更广
抱歉 对不起 如果是我们系统造成的结果，可以使用「抱歉」，如果是用户自己造成的结果，不能使用。
登录 登陆 登记记录用户输入的注册账号和密码。
此 该 当要表达当前事物时，「此」更加明确。
直接使用「你」、「我」来和用户对话，与用户建立亲密感。避免使用「您」，让用户感觉太过疏远。 多给用户支持与鼓励，不要命令和强迫用户。
如果你想留住你的用户，当出错的时候就不要责怪用户。专注于解决问题，而不是指责。 不要使用过于绝对的表述，这样会让用户觉得不适。 产品名称全称，首字母大写。产品名称缩写需要全部大写，如：ESC、SLB 等；
