穿梭框的树穿梭框 js_一个基于Vue.js的高质量UI组件库+完整前端解决方案——Heyui…

  • Post author:
  • Post category:vue


介绍

HeyUI 是一套基于 Vue2.0 的开源 UI 组件库,主要服务于一些中后台产品。HeyUI提供的是一整套解决方案,所有的组件提供全局的可配置模式。集成主流的国际化方案以及更加人性化的还支持VSCode扩展。

真正的数据驱动全局的配置模式数据字典化

b24ac11a0adea33d3b41856235d92b5e.png

官网

文档:https://www.heyui.top/
Gitee:https://gitee.com/heyui/heyui
Github:https://github.com/heyui/heyui

安装

推荐使用 npm 的方式安装。

npm install heyui

示例

通过引用HeyUI,我们可以简单的写出一个应用界面。

e01cfe715ddf3f48df2a91e692b34cac.png

Hi!


Hello HeyUI!



支持环境

现代浏览器和 IE9 及以上。HeyUI支持 Vue.js 2.x版本

组件预览

505ef12e52f8a072425a24cbed47a50c.png

以下组件预览不是所有都进行了截图,只是大致将一些组件展示出来:

Grid 栅格

03a3a46fa5be8f1aa46e03cc416780cd.png

Layout 布局

e8fba8e4f44e9b7d2b83eedf63de0351.png

Color 色彩

ae458a079578c7f48b0885166727ce7d.png

Icon 图标

f17126e621bfe73adcdb3171b31151a3.png

Extend 扩展

e12fa225b3977a76f452509cf9a0b193.png

Button 按钮

f05c065c3009281418610fe1153e2d61.png
5a228cef4113a7c4abf2a934386392a4.png

Form

Input 输入框

7448040cebc2e411129cfadfdc3e98d2.png

Radio 单选

a423802a7897140a5fe6d70d2f583855.png

Checkbox 多选

e256f7fcad0cccec588d997c1face784.png

Select 下拉选择

4caf56f4bdf84c3cbce1d9a6e75e9fc4.png

AutoComplete 模糊匹配

fd888f389db9d5ff27b41871897f7915.png

NumberInput 数字输入

204cf5150f85a8a0fa374d3d331ac9a1.png

TagInput 标签输入框

5a47d478dcfacfb95869671daaad0e6d.png

HSwitch 开关

824f150b5b33423494b0776eb3f06bb0.png

Slider 滑块

2442161f5e708ab968270243dfc765fd.png

Rate 评分

97036d48bd4af89af29c4db8cc580d31.png

SwitchList 选项切换

56c3844ed0176097713a0b2008d35c2f.png

Form 表单

f5c1cfd51b99a1323c6ed88cba41baf0.png

Date

DatePicker 日期选择

3aaacc8cc7100e515f451393e16622c0.png

TimePicker 时间选择

43b7e6af98b35e325dae03ec4d196135.png

DatetimePicker 日期时间选择

3e05f0cac909d848cbc078f40b0f4eda.png

DateRangePicker 日期范围选择

c3e72143c54402202263e64165f069c9.png

DateFullRangePicker 超级日期

434e46839e5a5e2a794b7524447aded6.png

Data Plugin

Search 搜索框

288c7e03015f1e7eb9daa55ba8e685ff.png

Uploader 上传

ea6a5376939c60d614041d5325e0bae8.png

Tree 树

cd5574bb8d95b24a9a3dffbf5cff28fe.png

TreePicker 树选择

08ff6025b0bfcaf66b885fea670f7038.png

Category 分类选择

d4b4267608c66645b60707a044a79d53.png

CategoryPicker 选择

84d219285d4fd389e2358bab97c5b95f.png

Transfer 穿梭框

c8e0dcae47633a26240c1f3ef5d0e2a6.png

ColorPicker 颜色选择器

8f1e4ece85411327feeb25047cc29da2.png

Navigation

Breadcrumb 面包屑

d78a261c9c6ec2deca5f2a2a1d544aa1.png

Menu 菜单

0ab438a86f26908592bd752bed24a4c0.png

Pagination 分页

386837b205230591633ac02331500d01.png

Tabs 标签页

bebffeb5f5024919db362e72e2189ab1.png

Steps 步骤条

0caefc4f00f96abfc79b2589007018d9.png

DropdownMenu 下拉菜单

4b73dd3eea2ea9c9fad29d09725dcd91.png

DropdownCustom 自定义下拉

e536b602a4ea3c779e186ae2abcb51bd.png

Data View

Table 表格

5b4d8970f651a42ce5c00b9bd4e34a1b.png

Avatar 头像信息

9189f4057340e15cbb11132494aef97a.png

Badge 微标数

e32f6be818fbd3e61b937b9cd004d3fa.png

Carousel 走马灯

2dbb86f31e0d7bec4b29d57ceaf58b7d.png

Collapse 折叠面板

6184085bb5658c9e53663f9a31196259.png

Circle 进度环

546c88299cd8bb44e4924e8f9be8057d.png

Progress 进度条

5291cf2eb9d9656266b5c941fb8e4041.png

Loading 加载中

f74b3f4101503342ce7cc6cf7f0eb6e5.png

LoadingBar 加载进度条

8e3aa634e07bfe14b4ef96023adec60d.png

Skeleton 加载占位图

654d4664f75e6ecb10e8947ca6d29920.png

Timeline 时间轴

63e8fe9cddfe72261d149a5dc9e6e754.png

ImagePreview 图片预览

5b0f741d7febcea623b46a25bbc21d3e.png

TextEllipsis 超出文本省略

c877f5ec8ce41a5572b9c41a41673b5f.png

Message

Message 提示

effd476069c70454b0e20b937adf84c6.png

Notice 通知

265ce740eb7983960d2e05f145208d6e.png

Modal 弹出框

7e1c07db1bc7a69f327015c5f0db3407.png

Tooltip 气泡提示

c232a590869212c6ea833faefb12eba5.png

Poptip 确定提示

1f22698a0549e3a3cabbc5372169ac44.png

Plugin

Clipboard 复制剪切板

63bde6843606388b3747ccfe720777e3.png

Affix 图钉

368907534ba9989fbeb883aec84a4560.png

BackTop 返回顶部

607e2e95a5a2d09bd251563f14a1bcd9.png

View

Panel 面板

97a322d422de878f13dfa54c32e6d023.png

Tag 标签

b82bc87da0cae0b2f82607eec062bfae.png

集成解决发难Heyui-admin

https://admin.heyui.top/
89537a7edbe10d5a78a352f592a6a605.png
591b5ac0bdafd130d02c1798f5f0971c.png
e1514fa02a7400b529e74c0029db92e5.png
d8cb03a5818bdb6ed3e9b533409269ef.png
2b8eb5e1825f4c3273f8c1cb97384238.png
fa47eda44d81ef95109537935326339a.png

在线运行

a6afffb502b26d8cdb1353e08cb0c79a.png

总结

Heyui是一个高质量的组件一点也不为过,不仅如此,其还集成了一套适用于大多数中后台的完整集成解决方案,上手很快,而且组件非常丰富,大多数业务场景都能覆盖,非常值得尝试,enjoy it!



版权声明:本文为weixin_42261068原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。