1.0.2 • Published 5 years ago
zl-vue-frame v1.0.2
项目运行
# 开发
npm run start:dev
# 测试
npm run start:test
# 预发布
npm run start:pre
# 正式
npm run start:prod
项目打包
# 开发
npm run build:dev
# 测试
npm run build:test
# 预发布
npm run build:pre
# 正式
npm run build:prod
项目基于vue-element-admin进行改造
文件结构
| -- zl-vue-frame
| -- build // webpack等一些配置文件
| -- config // 全局变量以及运行打包配置文件
| -- src
| -- api //模块接口存放文件
| -- assets // 图片
| -- components // 公共组件
| -- directive // 指令
| -- filters // 过滤器
| -- icons // svg图标使用
| -- lang // i18n
| -- router // 不需要权限中心控制的路由配置
| -- store // 状态控制
| -- styles // 样式
| -- utils // 工具
| -- views // 业务页面
组件使用
1.美化版滚动条
- 需要给一个高度才会出现滚动条,属于element-ui没有暴露出来的一个组件
<el-scrollbar wrapClass="scrollbar-wrapper"></el-scrollbar>
2.分页
属性 | 类型 | 介绍 |
---|---|---|
class | string | 使用zl-pagination 会实现分页组件的居中 |
其他属性 | xxx | 其他属性参考element-ui 文档 |
<el-pagination
class="zl-pagination"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
3.确定取消按钮
按钮使用原则第一个按钮默认主题色,其他按钮都是用白色也就是el-button的默认颜色
<el-button class="btn-theme" @click="save" >
<svg-icon icon-class="pre-save"></svg-icon>
我是主题色
</el-button>
<el-button class="btn-default" @click="$router.go(-1)">
<svg-icon icon-class="pre-back"></svg-icon>
我是默认色
</el-button>
4.删除,停用提示框
const str = `
<p style="text-align:center;">
<i class="el-icon-warning" style="color:#299ee4;font-size:22px;vertical-align:middle;"></i>
<span style="padding-left:10px;font-size:16px;vertical-align:middle;">此操作将永久删除, 是否继续?</span>
</p>
`
dangerouslyUseHTMLString: true
6.列表操作
- :show-overflow-tooltip="true"
<span class="icon-theme" @click="editInfo(scope.row)">编辑</span>
<i class="zl-icon-line"></i>
<span class="icon-theme" @click="stopFunc(scope.row)">{{ scope.row.status === 1 ? '停用' : '启用'}}</span>
// 表格固定表头
// computed
tableHeight() {
return this.$store.state.app.$th
}
// watch
tableData(data) {
this.$store.dispatch('action_set_table_height', data.length)
}
上传
:action="$store.state.vendor.photoUpload"
:headers="{ token: $store.state.user.token }"
<el-upload
class="avatar-uploader"
:action="$store.state.vendor.photoUpload"
:show-file-list="false"
:headers="{ token: $store.state.user.token }""
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
// 上传之前
beforeAvatarUpload(file) {
const typeArr = ["image/png", "image/jpeg", "image/jpeg", "image/gif"]
const isJPG = typeArr.indexOf(file.type) !== -1 ? true : false
const isLt2M = file.size / 1024 <= 2048;
if (!isJPG) {
this.$message.warning("只能上传PNG,JPG,GIF格式的图片!")
}
if (!isLt2M) {
this.$message.warning("图片大小不能超过2M!")
}
return isJPG && isLt2M
},
// 上传成功
handleAvatarSuccess(response, file, fileList) {
if (response.success) {
this.$message.success('头像上传成功')
this.imageUrl = response.data
}
}
限制规则
import { validateInterAndZero } from '@/utils/validate'
const validateSeq = (rule, value, callback) => {
if (value === '' || value === null || value === undefined) {
callback()
} else {
if (!validateInterAndZero(value)) {
callback(new Error('只能输入0以及正整数'))
} else {
if (value < 0 || value > 100000) {
callback(new Error('只能输入0-100000'))
} else {
callback()
}
}
}
}
const validateSeq2 = (rule, value, callback) => {
if (value === '' || value === null || value === undefined) {
callback()
} else {
if (!validateInterAndZero(value)) {
callback(new Error('只能输入0以及正整数'))
} else {
if (value < 0 || value > 999) {
callback(new Error('只能输入0-999'))
} else {
callback()
}
}
}
}
staffLimit: [
{ validator: validateSeq, trigger: 'blur' }
],
seq: [
{ validator: validateSeq2, trigger: 'blur' }
]
关于表单验证
- utils/validate.js 里面有一部分验证规则
- 所有的验证需要用到正则的不要在文件里面写死,一律放到utils/validate.js里面
说明
框架里面还有一堆store以及utils里面的js并没有进行删除,到时候可以在不影响项目使用的情况下自行删除