Novelty Promotes Magicians

    zl-vue-frame

    1.0.2 • Public • Published

    项目运行

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

    Install

    npm i zl-vue-frame

    DownloadsWeekly Downloads

    8

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    1.48 MB

    Total Files

    217

    Last publish

    Collaborators

    • yushiyue