Skip to content

Latest commit

 

History

History
241 lines (202 loc) · 6.91 KB

README.md

File metadata and controls

241 lines (202 loc) · 6.91 KB

exview

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

使用

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

Vue.use(exview)

COMPONENTS

组件的特性

  1. 标准化

  2. 可组装

  3. 可替换

  4. 可维护

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

需求 : 表格

  1. 多选，{ 删除 : √}

  2. 序号，√

  3. 操作，

  4. 分页 , 支持本地分页和前端分页，单页数目，页面跳转 √

  5. 项目隐藏

       <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.