@dinert/element-ui NPM

基于Vue二次封装的element-ui组件

技术栈

│  .babelrc
│  .gitignore
│  index.html
│  package-lock.json
│  package.json
│  README.md
│  rollup.config.build.js
│  rollup.config.dev.js
│  yarn-error.log
│  yarn.lock
│
├─packages
│  ├─d-form
│  │  │  index.js
│  │  │
│  │  └─src
│  │          index.vue
│  │
│  ├─d-overflow-tooltip
│  │  │  index.js
│  │  │
│  │  └─src
│  │          index.vue
│  │
│  ├─d-table
│  │  │  index.js
│  │  │
│  │  └─src
│  │          index.vue
│  │          recuve-table-column.vue
│  │
│  └─d-table-page
│      │  index.js
│      │
│      └─src
│              index.vue
│
└─src
    │  index.js
    │
    └─utils
            getValue.js
            tools.js

安装

使用npm

npm i @dinert/element-ui --save

使用yarn

yarn add @dinert/element-ui

简述

基于Vue二次封装的element-ui组件库，打包成esm、umd、cjs可供浏览器外链、vue的import、node的required的使用形式
在封装时保留原有UI框架的属性和方法，可以较好的扩展自定义属性

使用

d-form组件

form-item 属性 — Object

form-item属性，如下代码第一层为对象，type和name代表的是element-ui框架中form-item属性的prop。第二层也是对象，对象中type代表的是组件类型，对象中其它属性为element-ui框架中的form-item的属性，第三层为options对象，这个对象下的属性代表的是每个组件中的属性。
第二层对象中的属性是form-item，那么方法就在第二层属性加上一个on对象，on对象指的就是当前组件属性的方法
那么第三层对象中组件的方法该怎么去绑定呢，比如下面的type为el-select的组件，options代表el-select组件中所有的属性，options.on就是绑定了el-selecte组件的所有方法，当el-select变化时会触发change事件。

formItem: {
  type: {
    type: 'select',
    label: '窗口类型',
    options: {
      on: {
        change() {

        },
      },
      options: [
        { value: '一口受理', label: '一口受理'
        },
        { value: '综合窗口', label: '综合窗口'
        },
        { value: '企业帮办', label: '企业帮办'
        },
        { value: '专窗', label: '专窗'
        },
        { value: '咨询台', label: '咨询台'
        },
      ],
    }
  },
  name: {
    type: 'input',
    label: '姓名',
    options: {}
  }
}

form 属性 — Object

form属性指的是element-ui中form的属性
form的方法指的是form.on对象中的方法

row 属性 — Object

row属性指的是element-ui中row的属性

colLayout 属性 — Object

colLayout属性指的是element-ui中row的属性

isSearch 属性 — Boolean

判断是否显示右边搜索栏，默认为true

d-table组件

showHeader 属性 — Boolean

是否显示表格上方的过滤选项，默认为true

showFooter 属性 — Boolean

是否显示表格下方的分页，默认为true

table 属性 — Object

table下的属性为el-table中所有的属性
table.on为el-table的方法和事件
table.tableColumn为el-table-column的所有属性
table.checkbox为el-checkbox的所有属性
table.checkbox.on为el-checkbox事件的所有属性

table: {
  tableColumn: [
    {
      type: 'selection',
      width: 55,
      align: 'center',
      label: '选择'
    },
    {
      prop: 'type',
      label: '窗口类型',
      children: [
        {
          prop: 'type1',
          label: '类型A',
          children: [
            {
              prop: 'type-a',
              label: '类型AB'
            },
            {
              prop: 'type4',
              label: '类型AC'
            },
          ]
        },
        {
          prop: 'type2',
          label: '类型B'
        }
      ]
    },
    {
      prop: 'name',
      label: '姓名',
    },
    {
      prop: 'code',
      label: '工号'
    },
    {
      prop: 'department',
      label: '部门'
    },
    {
      prop: 'enable',
      label: '大屏显示'
    },
    {
      prop: 'operations',
      label: '操作'
    }
  ],
  data: [
    {
    'name': 'pppppppppp',
    'type-a': 'a3123123'
    },
    {
    'name': 'pppppppppp',
    'type-a': 'a3123123'
    }
  ]
}