HeyUI组件库按需加载功能上线，盘点HeyUI组件库有哪些独特功能？

HeyUI组件库

若是你还不了解heyui组件库，欢迎来咱们的官网或者github参观。

• 官网
• github

固然，若是能给咱们一颗✨✨✨，那是最赞的了！

按需加载

当heyui组件库的组件愈来愈多的时候，按需加载的功能终于上线了。

话很少说，先把按需加载的使用方式放出来。

在线示例

按需加载在线示例

以此图为例，按需加载后，js与css的大小将大幅度减少。

 

示例代码

import Vue from 'vue';
import App from './app.vue';
import { install, Prototypes, Button, DropdownMenu } from 'heyui';

require('../css/module.less');

Vue.use(install, { components: { Button, DropdownMenu }, prototypes: Prototypes });

const app = new Vue({
  el: '#app',
  render: h => h(App)
});
export default app;

module.less

@import (less) "../../themes/common.base.less";
@import (less) "../../themes/components/dropdown-menu.less";

其中，common.base.less将引用系统的一些基础样式，其余的组件须要本身加载样式。

common.base.less

@import (less) "./mixins/index.less";
@import (less) "./fonts/font.less";

@import "extend.less";
@import "checkbox.less";
@import "radio.less";
@import "search.less";
@import "notify.less";
@import "message.less";
@import "notice.less";
@import "modal.less";
@import "tooltip.less";
@import "dropdown.less";
@import "dropdown-custom.less";
@import "tabs.less";
@import "input.less";
@import "input-group.less";
@import "button.less";
@import "grid.less";
@import "word-count.less";

其余的组件加载请参考如下文件： https://github.com/heyui/heyui/blob/master/src/components.js

盘点HeyUI组件库的独特功能

既然heyui已经支持按需加载了，那接下来就介绍一下系统的一些独特功能。

在已经使用iviewui或者elementui的前提下，你也能够选择单独使用这些功能。

AutoComplete 模糊匹配

其实AutoComplete组件，iview与elementui都有相关的功能，可是从功能性来考虑，heyui几乎将AutoComplete的功能全覆盖了。

好比说：

• 绑定值使用key或者完整对象，搜索的时候，获取选择的对象。
• 多选，知足选择员工等需求
• 更加完整的事件，数据的改变有哪些事件触发：enter, blur, picker, remove, clear
• 支持 mustMatch=false 属性

若是你有相似的需求，能够选择使用heyui的AutoComplete。

相关文档: AutoComplete文档

 

 

DateFullRangePicker 超级日期范围控件

覆盖日期范围选择的全部需求，而且自动将结束日期+1，适配后端的小于查询。

相关文档: DateFullRangePicker文档

 

 

Tree 树

其实，全部的组件都拥有Tree组件，可是heyui的Tree组件拥有更加细致的处理。

heyui的Tree组件拥有三种选择模式：

• all: 只有子集全选才会选中父级（好比：部门选择）
• some: 只要子集有选择，父级就会选中（好比：菜单选择，权限选择）
• independent: 子父选择没有相关性

相关文档: Tree文档

 

 

TreePicker

其实，在系统开发过程当中，TreePicker是一个需求比较强烈的功能。

虽然TreePicker组件也没有常常使用，可是，若是有相关需求的时候，能有一个完整的组件提供选择是一件很是棒的事情。

而且，咱们的TreePicker组件提供 单选，多选，覆盖需求的每一个角落。

相关文档: TreePicker文档

 

 

Category

Category组件，是其余组件库都没有的组件。

主要是用来知足一些大量标签数据的选择，具备很强的通用性。

好比，在咱们的应用中，用来选择不少信息的行业标签。

相关文档: Category文档

 

 

CategoryPicker

CategoryPicker组件，大概是三级地址联动的最佳方案选择了吧，咱们提供了很是强大的功能定制。

包括：

• 单选，多选
• 是否显示全部的层级
• 展现子集数量
• 可使用绑定key，也能够是对象数据。
• 分布异步获取数据
• 数据 selectable, checkable 控制

相关文档: CategoryPicker文档

 

 

DropdownCustom 自定义下拉控件

提供自定义Dropdown，用户能够根据本身的需求定制不一样的下拉组件。

相关文档: DropdownCustom文档

 

 

其中，还包括右键触发的操做，以heyui-admin系统的tabs为例。

 

 

Avatar 头像信息

其实，其余组件库也有头像组件。

可是，heyui的头像组件更加关注的是头像的排版结合，十分适用于系统中的各类信息展现。

相关文档: Avatar文档

 

 

而且，咱们还提供了全局自定义处理src的功能。

// 经过配置能够设置src的全局处理方式，好比根据width参数设置不一样的图片大小
HeyUI.config("avatar.handleSrc", (src) => {
  if (!src) return '';
   // this.width 能够获取组件的参数
  let width = this.width;
  if (width == undefined) return src;
  return `${src}?imageView2/1/w/${width*2}/h/${width*2}`;
});

ImagePreview 图片预览

这种其实包含两个部分：

• 图片列表展现
• 图片预览功能

图片列表

图片列表适用于一些基本的图片展现需求，能够自定义图片大小以及图片间距。

 

 

图片预览

图片预览的功能在系统的各个角落都需求很是强烈。

目前开源比较好的是lightbox2，可是，lightbox2依赖于jquery，为了一个图片预览，还须要加载jquery，很是的麻烦。

因此，咱们本身开发了一个图片预览功能，而且直接经过方法调用，比lightbox2的定义更加方便便捷。

相关文档: ImagePreview 图片预览

 

 

TextEllipsis 超出文本省略

超出文本省略的功能，其实也是属于系统需求比较强烈，而使用css也很难知足的功能。

咱们开发的组件是一套适用性强，而且可以完美知足此类需求的功能。

以下图所示，咱们拥有如下功能：

• 自定义前缀
• 自定义后缀
• 配合需求完成展开收起的操做
• 若是产生省略，则tooltip提示，若是没有产生省略，则不出提示

相关文档: TextEllipsis 超出文本省略

 

 

 

 

Clipboard 复制剪切板

不知道你是否还在使用clipboard.js，其实，咱们的复制剪切板需求很是简单，而clipboard.js还停留在html，jquery模式，虽然拥有不少定义方式，可是咱们彻底用不到。

heyui组件库直接提供一个单独的方法，使用简练。

this.$Clipboard({
    text: '测试==复制至剪切板的文本==测试',
    showSuccessTip: 'Copy Success'
});

相关文档: Clipboard 复制剪切板

ScrollIntoView 滚动至视图内

其实，这是一个很是方便的功能，好比说，分页加载后滚动至头部，切换页面时切换至头部。

不须要本身写繁琐的scroll方法，并自带time参数，设定滚动特效。

相关文档: ScrollIntoView

HeyUI Admin

除了以上说明的那些独特的功能，咱们还拥有一个完整的admin系统。

在线地址

 

 

最后

说了这么多，还有更多的内容等着你去发现。

github：https://github.com/heyui/heyui

期待你的star✨✨✨

相关连接

• 官网
• github