Exview NPM | npm.io

exview

A vue.js 后台管理基于配置化思想的 vue 开发，依赖，iview ， loadsh

使用

import Vue from "vue";
import exview from "exview";

Vue.use(exview)

COMPONENTS

组件的特性

标准化
可组装
可替换
可维护

FORM

需求 : 表单提交 ( 未完成 )

    <exv-form v-bind="formOptions" v-on="store"></exv-form>

   OPTIONS: { //本身依赖iview form组件，参考from的属性
        "label-width": 100,
        fields: [
            {
                label: "输入",
                rule: "required,username", // 数据验证规则，可为字符串和数组，当为数组时参考iview.form
                error: "error",
                name: "username", //为字段名称
                showMessage: true,
                widget: "ExvWidgetInput", //组件类型
                option: { // 组件配置
                    placeholder: "用户名1",
                    type: "text",
                    append: '<span style="color:red;">aaa</span>',
                    disabled: false
                },
                events: { // 组件事件监听
                    "on-change"(e, model) {
                        this.$emit("exvChange", e.target.value);// 提交exvChange事件修改form表单值
                    }
                },
                watch: [
                    "username",
                    function(model) {
                        model;
                    }
                ]
            },
            {
                label: "密码",
                rule: "required,password",
                widget: "Input",
                name: "account",
                watch: [
                    "username",
                    function(model) {
                        model;
                    }
                ],
                option: {
                    type: "password",
                    placeholder: "密码",
                    append: '<span style="color:red;">aaa</span>',
                    disabled: false
                }
            }
        ],
        toolbar: "submit,reset", //当为字符串时为默认按钮，toolbar为Toolbar组件的配置，但是当其中对应按钮添加validate:true,则进行form表单rules验证◊
        validate(model) { // 数据提交时做数据转换，数据转换为深拷贝，不会对原数据产生影像
            return model;
        }
    },

TOOLBAR( 已完成 )

需求 : 按钮组

<exv-toolbar v-bind="option" @click="toolbarClick"></exv-toolbar>

OPTION:
    {
        fields: [
            {
                type: "primary",
                text: "提交",
                loading: false, // loading 为是否显示button的loading状态
                signal() { // signal 为按钮事件处理
                    return new Promise((resolve, reject) => {
                        setTimeout(() => {
                            resolve("submit");
                        }, 3000);
                    });
                },
            },
            {
                type: "default",
                text: "取消",
                loading: false,
                signal: "reset"
            }
        ]
    }
/**
PARAM:
    signal 参数可为函数,字符串

    signal当为函数时(e,item,index) //可为异步函数
        参数：
        this指向当前Toolbar组件
        e 为按钮点击事件
        item为当前按钮的配置项
        index为当前配置项的第几列
        返回值:
        Toolbar:click事件的第一参数
    singal 为字符串时
        直接为Toolbar:click事件的第一参数
EVENTS:
    click(signal,item)
    signal 为按钮signal，
    item 为对应field
*/

TABLE

需求 : 表格

多选，{ 删除 : √}
序号，√
操作，
分页 , 支持本地分页和前端分页，单页数目，页面跳转 √

项目隐藏

  <exv-table v-bind="tableOption" v-on="store" ref="table"></exv-table>

       tableOption: {
          localPage: true,
          multiToolbar: "delete",
          table: {
              border: true,
              columns: [
                  {
                      type: "selection",
                      width: 60,
                      align: "center"
                  },
                  {
                      type: "index",
                      width: 60,
                      align: "center"
                  },
                  {
                      type: "expand",
                      width: 50,
                      render: (h, params) => {
                          return h("div", 123);
                      }
                  },
                  {
                      title: "Name",
                      key: "name"
                  },
                  {
                      title: "Age",
                      key: "age"
                  },
                  {
                      title: "Phone",
                      key: "phone"
                  },
                  {
                      title: "Email",
                      key: "email"
                  }
              ],
              data() {
                  return api.User.list();
              }
          }
      },

           store: {
            delete: async args => {
                let ids = "";
                if (_.isArray(args)) {
                    ids = args[0].id;
                } else if (_.isString) {
                    ids = id;
                } else {
                    return;
                }
                await api.User.delete(ids);

                this.$refs.table.refresh();
            }
        }

CRUD

需求 : 增删改查

Build Setup

# install dependencies
npm install

# 开启数据模拟服务器
npm run serve

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

For a detailed explanation on how things work, check out the guide and docs for vue-loader.