一、布局
image.png
建议搜索部分和列表部分分开展示
image.png
-
搜索label
image.png
font-size: 14px;
font-weight: bold;
color: #909399;
-
搜索框
image.png
width: 180px;
height: 36px;
font-size: 14px;
color: #606266;
注：时间选择框：宽度240px
image.png
- 表格
文字字号及颜色：
font-size: 14px;
color: #909399; // t-head
color: #606266; // t-body
二、按钮
-
搜索框按钮
image.png
<el-button type="primary" plain>搜索</el-button>
<el-button type="warning" plain>重置</el-button>
-
表格上方按钮
image.png
<el-button type="primary" plain>添加</el-button>
<el-button type="primary" plain>创建订单</el-button>
<el-button type="primary" plain>申报</el-button>
<el-button type="success" plain>刷新</el-button>
<el-button type="success" plain>启用</el-button>
<el-button type="success" plain>审核通过</el-button>
<el-button type="success" plain>初始化</el-button>
<el-button type="success" plain>导入</el-button>
<el-button type="warning" plain>导出</el-button>
<el-button type="warning" plain>批量</el-button>
<el-button type="warning" plain>报文下载</el-button>
<el-button type="warning" plain>运单同步</el-button>
<el-button type="danger" plain>删除</el-button>
<el-button type="danger" plain>停用</el-button>
<el-button type="danger" plain>作废</el-button>
<el-button plain>下载模板</el-button>
- 列表内操作按钮
font-size：12px;
padding: 7px 12px;
margin-right: 6px;
image.png
<el-button type="primary" plain>编辑</el-button>
<el-button type="primary" plain>增补</el-button>
<el-button type="warning" plain>查看</el-button>
<el-button type="warning" plain>查看发票</el-button>
<el-button type="success" plain>报价</el-button>
<el-button type="success" plain>推送</el-button>
<el-button type="success" plain>开票</el-button>
<el-button type="success" plain>指派</el-button>
<el-button type="success" plain>上线</el-button>
<el-button type="success" plain>上传凭证</el-button>
<el-button type="success" plain>通过</el-button>
<el-button type="danger" plain>删除</el-button>
<el-button type="danger" plain>下架</el-button>
<el-button type="danger" plain>终止</el-button>
<el-button type="danger" plain>退回</el-button>
三、列表
- 有超链接的内容，文本颜色为蓝色，超出省略号展示，鼠标移上去弹tooltip，:show-overflow-tooltip="true"
color: #1890ff;//蓝色
image.png
<el-table-column label="商品名称" :show-overflow-tooltip="true" align="center" prop="productName">
<template slot-scope="scope">
<el-link type="primary" @click="view(scope.row)">
<span>{{ scope.row.productName }}</span>
</el-link>
</template>
</el-table-column>
-
弹框
对于新增、编辑、查看，内容少的可以用弹框，弹框尺寸如下。建议弹框高度不要太高，高度最好不超过700px，超出内容可以弹窗内滚动，并使底部按钮始终能被看到。
image.png
initWidth () {
this.screenWidth = document.body.clientWidth
if (this.screenWidth < 991) {
return '90%'
} else if (this.screenWidth < 1400) {
return '60%'
} else {
return '800px'
}
}
对于内容多的增改查，可以用隐形tab页展示。
image.png
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="列表" name="list">
// 这里是主列表页内容
</el-tab-pane>
<el-tab-pane :label="activeTitle" name="customerMaintenance">
// 这里是增改查等页的内容
</el-tab-pane>
</el-tabs>
四、消息提示
-
警告类：（当用户漏填信息时）
image.png
this.$message({
message: '这是一条警告消息',
type: 'warning'
});
-
错误类：（接口返回错误时）
image.png
this.$message.error('这是一条错误消息');
-
成功类：（接口返回成功时）
image.png
this.$message({
message: '这是一条成功消息',
type: 'success'
});
-
普通提示类：（当你不能判断是哪种类型时）
image.png
this.$message('这是一条普通消息提示');
-
需要再次确认类：（每行表格内操作删除，或者点击后需要用户再次确认的类的按钮）
image.png
this.$confirm("选中数据将被永久删除，是否继续？", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
//这里处理成功
}).catch(() => {
//这里处理失败
});
如果只需要提示一下，可以用alert，只有一个按钮
this.$alert('该客户未填写身份证号，请尽快维护客户的身份证号', '提示', {
confirmButtonText: '确定',
callback: action => {
console.log('提示')
}
});
