Element-nice-ui NPM

A Vue.js 2.0 UI Toolkit for Web.

本项目基于element-ui改造而来, 暂时只支持vue 2.x版本

运行示例, 示例代码入口为 examples/play.js

yarn

yarn dev:play

安装

yarn add element-nice-ui -S

快速上手

import Vue from 'vue'
import Element from 'element-nice-ui'

Vue.use(Element)

// or
import {
  Select,
  Btn
  // ...
} from 'element-ui'

Vue.component(Select.name, Select)
Vue.component(Btn.name, Btn)

浏览器支持

不支持ie浏览器

更新日志

待更新

和原版Element-ui的区别

全局的改变

全局引入了一些css变量
删除了中文以外的文档
统一了全局颜色, 组件的颜色都会根据主题色的变化统一变化
优化了一些声明文件, 现在你可以从这些声明文件中获取一些有用的组件声明, 可以作文项目中$refer的泛型传入, 这通常很有用

改动的组件

按钮
- 重新命名,由Button 转化为 Btn
- icon去掉el-icon-前缀
表格
- 增加了api属性, 可用来获取后端数据
- 使用v-model语法可与表格选中数据进行绑定
- 表格高度可以用百分比作为值, 默认情况下100%高度固定且固定表头
- 增加了一些插槽, searcher, tools, outer, column.{slotName}(列插槽)
- 增加了默认分页
- 增加了一个表格的配置选项 $EL_TABLE_PROP_CONFIG, 该选项挂载在Vue的原型上
- 增加了headers属性, 通过配置化的方式来配置表格, 移除模板的写法
- 增加了一个cache属性用来缓存当前表格的分页
- 增加了一个auto-queried属性, 指定哪些属性可以自动查询, 该属性通常和query属性配合使用
- 增加了一个query属性, 该属性为分页或表格的查询条件, 该属性可与auto-queried属性配合使用
- 增加了一些表格方法, ref.create(record: Record<string, any>), ref.update(index: number, document: Record<string, any> | (document: Record<string, any>) => void), ref.delete(index: number), ref.find(index?: number), fetchData(keepPage?: boolean)
- 其他一些体验和视图优化
弹框
- 增加了confirm属性, 该属性为一个函数, 在点击弹框的确认按钮时会自动进行表单校验(如果子组件有包含表单组件的话), 并且执行该函数, 该函数可以是一个异步函数, 如果函数返回的是一个Promise或者false, 那么组件将不会关闭
- 增加了footer插槽, 使用该插槽后, 原确认按钮将会被移除
- 增加了confirmText 和 cancelText属性, 分别制定确认按钮和取消按钮的文本
- 其他的体验和视图优化
表单
- 移除model属性, 移除rules属性
- 增加了form属性, 该属性向表单组件描述了当前的表单数据模型以及校验方式, 整合了model和rules属性
- 增加了grid属性, 该属性默认为true告诉表单是否默认开启栅格布局, 一旦开启, 表单会使用el-row组件, 表单项会使用el-col组件
- 增加了colspan属性, 在开启grid属性的情况下, 可给每个表单项指定默认的栅格长度, 最大不能超过24
- 增加了gutter属性, 用来指定栅格系统之间的空隙大小
表单项
- 现在表单项并不需要强制使用在表单内才可进行校验操作了, 也无须使用v-model来和数据进行双向绑定
- 可以直接使用表单控件而无须使用el-form-item包裹, 通过在表单控件上增加t-label(控件标签), t-prop(需要绑定的数据), t-span(自身的栅格系统, 优先级大于form的colspan优先级)
- 你仍然可以使用el-form-item去包裹, form会自动识别
时间/日期选择器
时间选择面板的尺寸变小了
input-number
- 增加了一个money属性, 该属性会使得输入按照钱的方式来显示
Select
- 增加了api属性可调用后端接口渲染数据
- 增加了options属性, 可以传入对象, 数组来渲染列表
- 增加了tree属性, 可以指定为属性选择控件
- 增加了一个全局配置, 可以在项目中配置, Vue.prototype.$EL_SELECT_PROP_CONFIG = {}
Tabs
- tabs可以设置一个高度, tab-pane中的内容超出高度会自动滚动, 且使用el-perfect-scrollbar来显示滚动条
Menu
修复了一个bug, 该bug曾导致在使用递归组件时会触发多个报错
优化了折叠后的menu, 该menu会导致在二级menu过多时部分menu缺失的bug

新增的组件

上下文 el-context
提供ctx属性, 该属性会将传入的值分发到子组件中
操作按钮组 al-action , el-action-item
- 组合使用多余的按钮会作为下拉框
工作流插件 el-bpmn
完美滚动插件 el-perfect-scrollbar
页面组件 el-page
富文本编辑器组件 el-wang-editor

LICENSE

MIT

eleme vue components

async-validator babel-helper-vue-jsx-merge-props bpmn-js deepmerge normalize-wheel resize-observer-polyfill sortablejs throttle-debounce ts-web-cache vuedraggable wangeditor

@everything-registry/sub-chunk-1567

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago