摘要：测试复制至剪切板的文本测试相关文档复制剪切板滚动至视图内其实，这是一个非常方便的功能，比如说，分页加载后滚动至头部，切换页面时切换至头部。
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";
其他的组件加载请参考以下文件： github.com/heyui/heyui…
盘点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}");${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：github.com/heyui/heyui
期待你的star✨✨✨
相关链接官网
github
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/6845.html
摘要：对于大中型前端项目为了解耦与复用，更多的公司会选择自己封装组件库，那么一次引入整个组件库必然导致项目过大，如何按需加载则必须要做前世的插件原理项目地址在转码的时候，把整个库的引用，变为具体模块的引用。 对于大中型前端项目为了解耦与复用，更多的公司会选择自己封装组件库，那么一次引入整个组件库必然导致项目过大，如何按需加载则必须要做 前世 ant-design的babel插件babel-p...
摘要：前端每周清单半年盘点之与篇前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。与求同存异近日，宣布将的构建工具由迁移到，引发了很多开发者的讨论。 前端每周清单半年盘点之 React 与 ReactNative 篇 前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为...
摘要：由于长期苦恼于第三方库选择的广大开发者而言，这也是谷歌为我们提供的一盏明灯。手机淘宝构架演化实践淘宝相信都不陌生了从年开始，从万增长到超过亿，面临的问题包括研发支撑所需要解决的事情各不相同。 ...
摘要：主工程具有和组件进行绑定和解绑的功能。如下图组件化需要考虑问题考虑的问题分而治之，并行开发，一切皆组件。引用阿里的框架，通过注解方式进行页面跳转。 目录介绍 1.为什么要组件化 1.1 为什么要组件化 1.2 现阶段遇到的问题 2.组件化的概念 2.1 什么是组件化 2.2 区分模块化与组件化 2.3 组件化优势好处 2.4 区分组件化和插件化 2.5 applicati...
阅读 859·2023-04-26 02:02
阅读 2257·2021-09-26 10:11
阅读 3432·2019-08-30 13:10
阅读 3545·2019-08-29 17:12
阅读 616·2019-08-29 14:20
阅读 2075·2019-08-28 18:19
阅读 2047·2019-08-26 13:52
阅读 823·2019-08-26 13:43
