规则
git提交
feat: 新功能（feature）
fix: 修补bug
docs: 文档（documentation）
style: 格式（不影响代码运行的变动）
refactor: 重构（即不是新增功能，也不是修改bug的代码变动）
chore: 构建过程或辅助工具的变动
revert: 撤销，版本回退
perf: 性能优化
test：测试
improvement: 改进
build: 打包
ci: 持续集成
按钮等颜色规则
- 添加：primary/ri-add-line
- 编辑：success/ri-edit-2-line
- 删除：danger/ri-delete-bin-line
- 详情：info/ri-file-info-line
- 重置[其他]：warning/ri-lock-2-line
打包/运行
npm run dev --pack=base --env=pro //使用项目 config/base/index.js 的相关配置，生产环境的 api
npm run build --pack=** //使用项目 config/**/index.js 的相关配置，对应 run 的 api
- pack
- env
表格 vab-table
字段内容 type
| type | 内容 | 表现 |
|---|---|---|
| date | 日期 | yyyy-MM-dd |
| time | 时间 | yyyy-MM-dd hh:mm:ss |
| price | 金额 | ￥0.00 |
| number | 数字 | 0.00 |
| rate | 评分 | ★★★★★ |
| slot | 插槽 | <template #prop /> |
| null | 空值 | |
| ’ ’ | 空值 |
分页
- *参考 element-ui 的
Events和Attributes:page-* - 是否显示分页
:show-page="false"
status
{
prop: 'state',
label: 'status',
status: {
1: {
text: 'Pending',
value: 'info',
},
2: {
text: 'Approved',
value: 'primary',
},
3: {
text: 'Declined',
value: 'danger',
},
},
},
表单 vab-form
字段内容 type
| type | 内容 | 表现 |
|---|---|---|
| br | 空值 | 换行 |
操作按钮
-
自定义操作按钮
<vab-form > <template #operate></template> </vab-form> -
使用默认操作按钮。默认：确定/取消
<vab-form @save='fn' @close='fn' / >
radio
{
label: '计数类型',
prop: 'type',
type: 'radio',
radio: [
{
text: '按提交条数',
value: 1,
},
{
text: '按拆分条数',
value: 2,
},
],
},
checkbox
对应的
form必须设定prop，否则会报错
form:{area:[]}
{
label: '发送地区',
prop: 'area',
type: 'checkbox',
checkbox: [
{
text: '海外地区 (不含中国大陆)',
value: 1,
disabled: true,
},
{
text: '中国大陆（+86号段）',
value: 2,
},
],
},
time/date-picker
-
日期：
date:{}根据element中的Attributesdata:{ let that = this return { { label: '起止时间', prop: 'time', date: { picker: { disabledDate(time) { // {days} // 1小于当天的可用：'' // 2大于当天的可用：'' // 3限定时间：[开始时间,结束时间] // 4限定时间，从当天起计算多少天可用：Number // 5限定时间，从多少天前至今可用：Number return that.$utils.time.pickerOptions(time, 1,days) }, }, }, } } } -
时间：
time:{}根据element中的Attributes{ label: '起止时间', prop: 'time', time: { }, }
select
// 方法一：
{
label: ' ',
prop:'key',
type: 'select',
select: {
action: {
text: '操作',
value: 'action',
},
ip: {
text: '操作IP',
value: 'ip',
},
},
},
//方法二：
{
label: ' ',
prop: 'value',
type: 'select',
select: [
{
value: '1',
text: '支付宝',
},
{
value: '2',
text: '微信',
},
],
},
上传
{
label: '护照',
prop: 'IDCard',
upload: [
{
field: 'contactIdFrontImg',
},
],
itemClass: '',
}
双值
{
prop: 'income',
label: 'Income',
between: [
{
prop: 'incomeMin',
placeholder: 'Minimum',
prepend: '$',
},
{
prop: 'incomeMax',
placeholder: 'Maximum',
prepend: '$',
},
],
},
验证表单
this.$refs['registerForm'].validate(async (valid) => {
if (valid) {}
})
表格/表单共有字段
switch
{
prop: 'status',
label: '状态',
type: 'switch',
switch: {
active: 1,//默认1
inactive: 2,//默认0
},
},
link
{
prop: 'status',
label: '状态',
type: 'link',
link: {
0: {
value: 'warning',
text: '待支付',
},
1: {
value: 'success',
text: '成功',
},
2: {
value: 'danger',
text: '失败',
},
},
},
添加后置内容
// 方法一：配合html使用
{
label: '账号',
prop: 'content',
suffix:true
}
// 方法二：支持j简易html格式
{
label: '账号',
prop: 'content',
suffix:'(***)'
}
<template #account_suffix>
<span class="sf-text-muted">(***)</span>
</template>
添加label/th注释内容
// 方法一：popover 支持简易html格式
{
label: '账号',
prop: 'content',
popover: '1、查询时间最大跨度90天<br>2、仅支持查询2019-02-26后的统计数据',
}
// 方法二：配合html使用
{
label: '账号',
prop: 'content',
popover: true
}
<template #account_popover>
<div>
仅支持高级用户， <el-link>前往申请</el-link>
</div>
</template>
其他
itemClass、 itemStyle、style
独立上传 vab-upload
-
图片库+上传
<vab-upload ref="refUpload" :attribute="{}" @replyFile="fn" :ukey="ukey"/> <el-button @click="$refs.vabUpload.handleShow()">打开</el-button> -
不使用图片库上传
<vab-upload-file ref="refUploadFile" :attribute="{}" @replyFile="fn" type='upload' :ukey="ukey"/> -
可编辑图片列表。
<vab-file-list :list="list" v-bind="otherProps" @replyFile="SelectImageBack($event, fields)" /> -
纯列表不可操作
<vab-file-list :list="list" :delete="false"/>
路由
- 一般用于详情页面
{ url: 'detail', name: 'GoodsDetail', component: '@/pages/goods/detail', meta: { title: '商品详情', activeMenu: '/goods/list', dynamicNewTab: true, //详情页根据id传参不同可打开多个 hidden: true, }, },
模块
eg:从DIY跳转至SHOP
固定模块
- 引入。
config.js中引入{ //引用模块 modules: ['diy'], // 模块对应接口请求携带的头部，与主模块同一值时可不设置 tokenName4sendArray: { diy: 'X-ADMIN-DIY-TOKEN', }, // 允许运行直接刷新模块。默认true refreshModules: true, } - 跳转
let modulueName = 'diy' // 跳转至diy模块 //更改使用的token this.$store.dispatch('user/setToken', { token:'', key: this.$utils.config.tokenName4sendArray[modulueName],// 请求header的tokenName }) // 跳转至模块首页 this.$router.push('/diy')
使用自定义模块。
- 添加
- 复制
libs/modules/demo至src/modules/demo - 修改对应文件名等
- 开发
- 复制
- 使用。
- 与固定模块使用方式一致
element - ui 使用
el-tree
-
默认选中
this.$refs.tree[0].setCheckedKeys(ids) -
获取选中值
this.$refs.tree[0].getCheckedKeys()
el-table
- 选中
true取消falsethis.$refs[`table_${this.uKey}`].toggleRowSelection(row, true)
element - bs 使用
色值选择
$theme-colors: (
'light': $bs-light,
'dark': $bs-dark,
'primary': $bs-primary,
'secondary': $bs-secondary,
'success': $bs-success,
'info': $bs-info,
'warning': $bs-warning,
'danger': $bs-danger,
);
进度条 el-progress
status : theme-colors
-
不显示文字
<el-progress :percentage="50" status="primary" stroke-width="16" /> -
显示文字
<el-progress :percentage="50" :show-text="false" status="primary" stroke-width="16" ></el-progress> -
仪表盘
<el-progress :percentage="50" type="dashboard" /> -
圆形
<el-progress :percentage="50" type="circle" /> -
斑马
<el-progress effect="striped" :percentage="50" :show-text="false" status="success" stroke-width="16" /> -
斑马动态
<el-progress effect="animated" :percentage="50" :show-text="false" status="success" />
卡片 el-card
提示框 el-popover
- 无title
<el-popover placement="top" trigger="click" width="200"> <i class="ri-question-line" slot="reference"></i> <div> 按照计费规则将短信字数拆分后的有效发送条数。如一条发往中国大陆的120字短信，提交条数是1，拆分条数是2 </div> </el-popover> - 含title
<el-popover placement="top" trigger="click" width="200" title="title"> <i class="ri-question-line" slot="reference"></i> <div> 按照计费规则将短信字数拆分后的有效发送条数。如一条发往中国大陆的120字短信，提交条数是1，拆分条数是2 </div> </el-popover>
提示框 el-tooltip
<!-- effect : light,dark -->
<el-tooltip
effect="light"
placement="bottom"
>
<el-link>立即绑定</el-link>
<div class="" slot="content"></div>
</el-tooltip>
el-tooltip VS el-popover
前者可设置颜色，后者固定明暗色，建议使用tooltip
后者可设置点击悬停，宽度
按钮 el-button
<el-button size="large" type="light">开通</el-button>
<el-button size="small" type="light">开通</el-button>//默认
<el-button size="mini" type="light">开通</el-button>
<!-- text -->
<el-button class="bs-text-dark" type="text">编辑</el-button>
标签 el-tag
/*
size: medium / ''
type：$theme-colors（lighten，darkness）
*/
<el-tag effect="plain" type="lighten">标签三</el-tag>
<el-tag effect="plain" type="darkness">标签三</el-tag>
标记 el-badge
<el-badge class="item" type="light" :value="1">
<el-button size="small">评论</el-button>
</el-badge>
警告 el-alert
/*
type：必填
effect： light dark plain
*/
<el-alert title="成功提示的文案" type="success" />
滑块 el-slider
<el-slider v-model="value1" range />
2304
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
