zl-vue-frame

项目运行

  # 开发 
  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进行改造

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并没有进行删除，到时候可以在不影响项目使用的情况下自行删除