1. layout-dynamic-ui

layout-dynamic-ui

layout-dynamic

基于Element-ui自动生成表单布局,表格布局等

注意

因目前还处于开发版本,请及时使用npm update layout-dynamic-ui 更新到最新版本

文档地址

文档项目GitHub代码

升级日志

v.1.5.2

优化 ld-forms中的ld-image添加旋转图片参数;优化图片最大数量显示处理。

ld-table分页条数改变添加(pageHelperSizeChange)事件。可以通过该事件记录用户习惯,再次打开时使用上次用户设置的每页显示条数。

ld-forms中的select组件添加multiple(多选支持)和filterable(可搜索支持)

ld-frame添加头部小工具

修改ld-frame头部作用域插槽headCenter为作用域插槽,添加headAppend插槽为头部右侧插槽

修复其他问题

使用方式

安装依赖包

因为是基于Element-ui开发的,所以需要在使用之前安装Element-ui;之后安装本项目layout-dynamic-ui

npm i element-ui -S

npm i layout-dynamic-ui

在main.js中,使用如下js引入依赖

 import Vue from 'vue'
import App from './App'

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import layoutDynamicUI from 'layout-dynamic-ui';
import 'layout-dynamic-ui/lib/index.css';

Vue.use(ElementUI);

Vue.use(layoutDynamicUI);

Vue.config.productionTip = false


new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

目的

我们期望通过传入简单的数据参数,来控制显示布局,避免同样的重复构建相似的布局。我们甚至可以通过从数据库加载布局信息,来显示不同的表单结构,让开发只需要专注于结构,减少对布局的重复构建。

Axios 封装

axios 进行整套分装,只需要简单的配置即可进行操作。支持全局请求前拦截,请求后装饰。

详情点这里

Util 常用函数封装

对象用函数进行分装

详情点这里

插件

一.支持插件 (v1.0.0)

1. id-address 地址组件,目前支持国内常见地区使用。

2. id-icon 图标组件,当前支持Element-ui内置的icon,可以通过Vue.prototype.$ld.iconList进行扩展。

3. id-image 图片组件,使用Element-ui的文件上传组件,当前只能获取图片相关上传数据,不支持上传到指定服务器(待完善!)。

4. id-page-loading 加载组件,在页面出现之前使用可以获得更高的体验效果。详情点这里

5. id-tags 标签组件,实现一组标签的添加和删除。

6. id-forms 表单组件 详情点这里

7. ld-table 表格显示组件 详情点这里

8. ld-menu-tree 菜单树 详情点这里

9. ld-page-tabs 标签页 详情点这里

10. ld-frame 后台管理框架页 详情点这里

11. ld-doc 轻量级结构化文档渲染 详情点这里

二.表单(ld-forms)组件支持21中组件类型,未来会更多

1. 整体效果图

效果图

2. 当前支持的组件类型(v1.0.0

  • tip:文字提示内容;可以在from表单中独居一个form子元素,也可用来说明某一个元素相关信息;

  • datakey:数据键;只用来在某些特定情况下显示数据;

    用来显示表单主键,又不想用户能够直接看到主键值;

  • slot:插槽;通过指定定prop值,来自定义表单内容

    通过自定义插槽实现个性化内容;

  • text:文本数据框;

  • textarea:文本域;

  • select:下拉框;

  • radio:单选组;

    通过isButton来控制显示类型

  • checkbox:复选组;

  • date:日期组件;支持Element-ui中常见的日期类型

    可以通过 dateType控制日期类型。

    支持year/month/date/dates/week/datetime/datetimerange/daterange/monthrange

  • icon:图标组件;使用上文提到的ld-icon实现图标选取

  • tag:标签组;使用上文提到的ld-tag实现标签设置和录入

  • address:地址选择组件;使用上文提到的id-address实现标签设置和录入

  • sysdate:系统日期;在使用创建日期和修改日期时非常有用;

    创建日期会判断数据是否已经存在值,如果不存在则获取当前日期

    修改日期会动态更新,保持获取最新的日期。

  • image:图片上传组;

  • number:计数器;

  • switch:开关;

  • slider:滑块;

  • rate:评分;

  • color:颜色选择器;

  • transfer:穿梭框;

  • param:参数;

3.使用示例

在HelloWordd.vue页面写入如下内容(这里只演示ld-forms组件的使用)

 <template>
  <div id="app" class="h-vh">
    <ld-page-loading :loading="loading" class="box-b b-i1">
      <div class="w h f-c over-a-y p10  box-b a-i-c">
        <el-card class="w b-f p10" style="width:350px;height: auto;padding: 80px 40px;">
          <ld-forms ref="loginForm" :cols="1" :form="forms" :layout="layouts">
            <template v-slot:buttons="e">
              <div class="w f-b">
                <el-button type="primary" style="flex-grow: 2;" :loading="loginLoading" @click="loginData">登陆
                </el-button>
                <el-button @click="resetData">重置</el-button>
              </div>
            </template>
          </ld-forms>
        </el-card>
      </div>
    </ld-page-loading>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data() {
      return {
        loginLoading: false,
        loading: false,
        forms: {},
        layouts: [{
            prop: 'phone',
            type: 'text',
            label: '',
            placeholder: '请输入电话号码',
            regex: /^[1][0-9]{10}$/,
            require:true,
          },
          {
            prop: 'password',
            type: 'text',
            label: '',
            placeholder: '请输入用户密码',
            regex: /^[1][0-9]{10}$/,
            require:true,
          },
        ]
      }
    },
    methods: {
      loginData() {
        console.log('login')

        //验证数据
        let result=this.$refs.loginForm.checkForm();
        if(result['error']){
          this.$message.error(result['msg'])
          return;
        }

        this.loginLoading = true;
        //模拟请求耗时
        setTimeout(() => {
          this.loginLoading = false;
        }, 2000);



      },
      resetData() {
        this.forms = {};
      }
    },
    created() {
      setTimeout(() => {
        this.loading = false;
      }, 1000);
    }
  }
</script>


效果如下

  • 非空时

login效果图

  • 数据校验不合法时

login效果图

  • 数据校验通过时

login效果图

详细使用说明请阅读ld-forms详细使用说明

三.表格组件

详情点这里

  • 效果图

效果图ld-table;
效果图ld-table

四.菜单树,支持多层结构

详情点这里

详细代码参考

  • 效果图

效果图ld-menu-tree

五.标签页

详情点这里

详细代码参考

  • 效果图

效果图ld-menu-tree

六.后台管理框架页

详情点这里

详细代码参考

  • 效果图

效果图ld-frame

七.轻量级结构化文档

详情点这里

详细代码参考

  • 效果图

效果图ld-doc

CSS 封装

详情点这里

详细代码参考: base.css basic.css

Dependencies