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
转载于:https://my.oschina.net/vvpvvp/blog/3052739
HeyUI组件库按需加载功能上线,盘点HeyUI组件库有哪些独特功能?相关推荐
- vue组件的按需加载
一.require.ensure() require.ensuire(dependencies:String[],callback:function(require),errorCallback:fu ...
- react 动态路 嵌套动子路由_react 路由动态加载组件,实现按需加载
默认情况下,当在项目根路径下执行npm run build时,create-react- app内部使用webpack将src/路径下的所有代码打包成一个JS文件和一个 CSS文件. 当项目代码量不多 ...
- 前端学习(2740):重读vue电商网站50之Element-UI 组件按需加载
通过 CDN 优化 ElementUI 的打包 虽然在开发阶段,我们启用了 element-ui 组件的按需加载,尽可能的减少了打包的体积,但是那些被按需加载的组件,还是占用了较大的文件体积.此时,我 ...
- devtools 无法加载 sourcemap_用 babel-plugin 实现按需加载
注意:本文并不是Babel的初学者教程,您需要具备一定的基础知识.在阅读本文前应具备babel基础知识,或者阅读用户手册 本文主要介绍babel的工作流程,插件的工作原理,以及一些在实战中实现按需加载 ...
- EasyDSS高性能流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载 - 副本...
为了让页面更快完成加载, 第一时间呈现给客户端, 也为了帮助客户端节省流量资源, 我们可以开启 vue-router 提供的按需加载功能, 让客户端打开页面时, 只自动加载必要的资源文件, 当客户端操 ...
- vue项目实现按需加载的3种方式
vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载.这种方式下一个组件生成一个js文件 用例: {path: '/promisedemo',name: 'Pr ...
- Webpack的Code Splitting实现按需加载
一. 什么是Code Splitting? 在最开始使用Webpack的时候, 都是将所有的js文件全部打包到一个build.js文件中(文件名取决与在webpack.config.js文件中outp ...
- Vue组件库实现按需加载功能
文章目录 简述 示例 原理 babel-plugin-component element-ui按需引入 babel-plugin-import 组件分开打包以及全部打包 组件分开打包 组件全部打包入口 ...
- vue按需加载组件-webpack require.ensure(转)
vue按需加载组件-webpack require.ensure 2017年07月28日 09:58:07 A_山水子农 阅读数:23245 标签: vue按需加载组件按需加载webpackrequi ...
最新文章
- jQuery回调函数
- 矩阵乘法如何去逆矩阵_矩阵乘法和求逆
- Javascript报错Failed to execute ‘querySelectorAll‘ on ‘Document‘: ‘#123456‘ is not a valid sele
- Docker+Nginx部署Angular
- jquery ajax mysql登录_ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库...
- [转]Python中多线程与多进程中的数据共享问题!
- 【CS229】监督学习 vs. 无监督学习
- 电脑快捷键(键盘不灵了赶紧使用快捷键)
- Idea在黑色背景下,错误提示不明显,可以改成黄色
- 操作系统-高响应比优先调度算法
- Lua,LuaJIT,Luarocks的安装与配置-史上最详细【Linux】
- support vector regression(SVR)支持向量回归
- 图文详解如何从win8/8.1中文版(核心版)升级到win8/8.1专业版
- 网站服务器会把手机拉黑吗,怎么知道对方手机把我拉黑了
- Android 网络质量 + 下载测速 (facebook/network-connection-class 使用)
- 为什么它有典型FaaS能力,却是非典型FaaS架构?
- pytorch学习第三天: 阿里云物联网平台使用
- JS无限滚动、回到顶端和图片懒加载
- Gravity bridge——IBC Bridge to Ethereum
- 人工智能给未来教育带来深刻变革
热门文章
- 黑龙江省绥化市谷歌高清卫星地图下载
- 绥化一中高考成绩查询2021,黑龙江绥化最好的4所高中,谁能稳坐头把交椅?高考成绩说明一切...
- 【李宏毅机器学习CP21】(task6)卷积神经网络
- [jcc][t4][10120][10898][3.57.82] 操作无效:已关闭 result set。 ERRORCODE=-4470, SQLSTATE=null
- SB8223 工作电压: 2.0V~5.5V 单按键触摸开关IC
- wampserver3.1 64下载地址
- 2017.1-2018.4低运算复杂度和存储复杂度的图像分类网络实现
- ps人物像发丝的抠图处理
- 中科大提出SCAN:用于在线手写数学公式识别的笔画约束注意力网络
- 机械硬盘崩溃前的征兆