基于 vue-admin-beautiful 优化自定义框架使用归纳【个人项目】

规则

git提交

feat: 新功能（feature）
fix: 修补bug
docs: 文档（documentation）
style: 格式（不影响代码运行的变动）
refactor: 重构（即不是新增功能，也不是修改bug的代码变动）
chore: 构建过程或辅助工具的变动
revert: 撤销，版本回退
perf: 性能优化
test：测试
improvement: 改进
build: 打包
ci: 持续集成
1
2
3
4
5
6
7
8
9
10
11
12

按钮等颜色规则

• 添加：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

分页

• *参考 element-ui 的Events和Attributes

  :page-*
  1

• 是否显示分页

  :show-page="false"
  1

status

{
   prop: 'state',
   label: 'status',
   status: {
     1: {
       text: 'Pending',
       value: 'info',
     },
     2: {
       text: 'Approved',
       value: 'primary',
     },
     3: {
       text: 'Declined',
       value: 'danger',
     },
   },
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

表单 vab-form

字段内容 type

操作按钮

• 自定义操作按钮

  <vab-form >
    <template #operate></template>
  </vab-form>
  1
  2
  3

• 使用默认操作按钮。默认：确定/取消

  <vab-form @save='fn' @close='fn' / >
  1

radio

{
   label: '计数类型',
   prop: 'type',
   type: 'radio',
   radio: [
     {
       text: '按提交条数',
       value: 1,
     },
     {
       text: '按拆分条数',
       value: 2,
     },
   ],
 },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

checkbox

对应的form必须设定prop，否则会报错

form:{area:[]}

{
    label: '发送地区',
    prop: 'area',
    type: 'checkbox',
    checkbox: [
      {
        text: '海外地区 (不含中国大陆)',
        value: 1,
        disabled: true,
      },
      {
        text: '中国大陆（+86号段）',
        value: 2,
      },
    ],
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

time/date-picker

• 日期：date:{}根据element中的Attributes

  data:{
  	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)
  	           },
  	         },
  	       },
  		 }
  	}
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22

• 时间：time:{}根据element中的Attributes

  {
     label: '起止时间',
     prop: 'time',
     time: { },
   }
  1
  2
  3
  4
  5

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: '微信',
     },
   ],
 },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

上传

 {
  	label: '护照',
    prop: 'IDCard',
    upload: [
      {
        field: 'contactIdFrontImg',
      },
    ],
    itemClass: '',
}
1
2
3
4
5
6
7
8
9
10

双值

 {
   prop: 'income',
   label: 'Income',
   between: [
     {
       prop: 'incomeMin',
       placeholder: 'Minimum',
       prepend: '$',
     },
     {
       prop: 'incomeMax',
       placeholder: 'Maximum',
       prepend: '$',
     },
   ],
 },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

验证表单

this.$refs['registerForm'].validate(async (valid) => {
	if (valid) {}
})
1
2
3

表格/表单共有字段

switch

{
	prop: 'status',
	label: '状态',
	type: 'switch',
	switch: {
		active: 1,//默认1
		inactive: 2,//默认0
	},
},
1
2
3
4
5
6
7
8
9

link

{
  prop: 'status',
  label: '状态',
  type: 'link',
  link: {
    0: {
      value: 'warning',
      text: '待支付',
    },
    1: {
      value: 'success',
      text: '成功',
    },
    2: {
      value: 'danger',
      text: '失败',
    },
  },
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

添加后置内容

// 方法一：配合html使用
{
    label: '账号',
    prop: 'content',
    suffix:true
}
// 方法二：支持j简易html格式
{
    label: '账号',
    prop: 'content',
    suffix:'(***)'
}
1
2
3
4
5
6
7
8
9
10
11
12

<template #account_suffix>
   <span class="sf-text-muted">(***)</span>
 </template>
1
2
3

添加label/th注释内容

// 方法一：popover 支持简易html格式
{
	 label: '账号',
	 prop: 'content',
	 popover:  '1、查询时间最大跨度90天<br>2、仅支持查询2019-02-26后的统计数据',
}
// 方法二：配合html使用
{
	 label: '账号',
	 prop: 'content',
	 popover:  true
}
1
2
3
4
5
6
7
8
9
10
11
12

<template #account_popover>
	<div>
		仅支持高级用户， <el-link>前往申请</el-link>
    </div>
</template>
1
2
3
4
5

其他

itemClass、 itemStyle、style

独立上传 vab-upload

• 图片库+上传

   <vab-upload ref="refUpload" :attribute="{}" @replyFile="fn" :ukey="ukey"/>
   <el-button @click="$refs.vabUpload.handleShow()">打开</el-button>
  1
  2

• 不使用图片库上传
  

  <vab-upload-file ref="refUploadFile" :attribute="{}" @replyFile="fn" type='upload' :ukey="ukey"/>
  1

• 可编辑图片列表。
  

  <vab-file-list
   :list="list"
    v-bind="otherProps"
    @replyFile="SelectImageBack($event, fields)"
  />
  1
  2
  3
  4
  5

• 纯列表不可操作

  <vab-file-list :list="list" :delete="false"/>
  1

路由

• 一般用于详情页面

  {
   url: 'detail',
   name: 'GoodsDetail',
   component: '@/pages/goods/detail',
   meta: {
     title: '商品详情',
     activeMenu: '/goods/list',
     dynamicNewTab: true, //详情页根据id传参不同可打开多个
     hidden: true,
   },
  },
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11

模块

eg:从DIY跳转至SHOP

固定模块

• 引入。config.js中引入

  {
  	//引用模块
  	modules: ['diy'],
  	// 模块对应接口请求携带的头部，与主模块同一值时可不设置
  	tokenName4sendArray: {
  	  diy: 'X-ADMIN-DIY-TOKEN',
  	},
  	// 允许运行直接刷新模块。默认true
  	refreshModules: true,
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10

• 跳转

  let  modulueName = 'diy' // 跳转至diy模块
  //更改使用的token
  this.$store.dispatch('user/setToken', {
    token:'',
    key: this.$utils.config.tokenName4sendArray[modulueName],// 请求header的tokenName
  })
  // 跳转至模块首页
  this.$router.push('/diy')
  1
  2
  3
  4
  5
  6
  7
  8

使用自定义模块。

• 添加
  • 复制libs/modules/demo至src/modules/demo
  • 修改对应文件名等
  • 开发
• 使用。
  • 与固定模块使用方式一致

element - ui 使用

el-tree

• 默认选中

  this.$refs.tree[0].setCheckedKeys(ids)
  1

• 获取选中值

   this.$refs.tree[0].getCheckedKeys()
  1

el-table

• 选中true 取消false

  this.$refs[`table_${this.uKey}`].toggleRowSelection(row, true)
  1

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,
	);
1
2
3
4
5
6
7
8
9
10

进度条 el-progress

status : theme-colors

• 不显示文字

   	<el-progress
        :percentage="50"
        status="primary"
        stroke-width="16"
      />
  1
  2
  3
  4
  5

• 显示文字

  <el-progress
    :percentage="50"
    :show-text="false"
    status="primary"
    stroke-width="16"
  ></el-progress>
  1
  2
  3
  4
  5
  6

• 仪表盘

      <el-progress :percentage="50" type="dashboard" />
  1

• 圆形

  <el-progress :percentage="50" type="circle" />
  1

• 斑马

  <el-progress
    effect="striped"
    :percentage="50"
    :show-text="false"
    status="success"
    stroke-width="16"
  />
  1
  2
  3
  4
  5
  6
  7

• 斑马动态

  <el-progress
    effect="animated"
    :percentage="50"
    :show-text="false"
    status="success"
  />
  1
  2
  3
  4
  5
  6

卡片 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>
  1
  2
  3
  4
  5
  6
  7

• 含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>
  1
  2
  3
  4
  5
  6

提示框 el-tooltip

<!-- effect : light,dark -->
 <el-tooltip
      effect="light"
      placement="bottom"
    >
      <el-link>立即绑定</el-link>
      <div class="" slot="content"></div>
    </el-tooltip>
1
2
3
4
5
6
7
8

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>
1
2
3
4
5

标签 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>
1
2
3
4
5
6

标记 el-badge

<el-badge class="item" type="light" :value="1">
  <el-button size="small">评论</el-button>
</el-badge>
1
2
3

警告 el-alert

/*
type：必填
effect： light dark  plain
*/
<el-alert title="成功提示的文案" type="success" />
1
2
3
4
5

滑块 el-slider

<el-slider v-model="value1" range />
1