美文网首页VueWebUI/插件库
基于vue中后台组件库:iview

基于vue中后台组件库:iview

作者: CodeMT | 来源:发表于2020-01-11 14:50 被阅读0次

    官网:https://www.iviewui.com/
    GitHub:https://github.com/iview/iview

    iView是一套基于Vue.js的开源UI组件库,主要服务于PC界面的中后台产品,比如某产品的运营平台、数据监控平台、管理平台等,从工程配置、到样式布局,甚至后面规划的业务套件,是一整套的解决方案,所以它可能不太适合一些to C 的产品,比如 QQ空间 这类的。

    注意:2019年10月起正式将iView更名为View UI

    特性

    • 丰富的组件和功能,满足绝大部分网站场景
    • 提供开箱即用的管理员系统和高阶组件库,极大程度地节省开发成本
    • 提供专业,优质的一对一技术支持
    • 友好的API,自由灵活地使用空间
    • 细致,漂亮的UI
    • 事无巨细的文档
    • 可自定义主题

    因为 iView 目前是在 webpack 下使用的,所以你可以使用 webpack 丰富的插件和个性化配置。iView 也是使用了 ES2015 开发。iView 一个最大的特点,就是我们从使用者和场景出发来设计 API,这点后面会重点讲到。它的文档也是相当详细,每个功能都配有详细说明和实例代码,直接复制就可以使用,我们也计划在明年启动英文文档翻译计划。在开发组件时,我们阅读了很多已有组件库的代码,取长补短,实现代码的高质量。

    版本及兼容

    目前 iView 可以直接通过 npm安装,很快将发布一个重要版本 0.9.7,在这个版本中,我们对大部分组件的 UI 进行了调整和优化,也丰富了很多组件的功能。由于Vue 本身原因(这里不展开),iView 只能兼容到IE9+,表现最好的是ChromeSafariFirefox,有些功能和动画不能在IE下得到兼容。这也和使用场景有关,一般 to B的产品,我们可以要求客户去使用高级浏览器。

    计划

    下图为1.x的计划

    24栅格系统

    iView 借鉴了BootstrapAnt.Design的栅格系统,支持每行最多容纳 24 列的布局,栅格系统对高级浏览器支持 Flex布局,包括 Flex对齐、Flex排列、Flex顺序,也支持栅格的排序、偏移、间隔。友好栅格系统对页面的拆分布局起到了关键作用,你可能不用再写任何布局代码就可以轻松使用栅格完成你的需求,而且它很精准。

    事无巨细的文档

    iView 在文档编写上也是做到了事无巨细(由于文档用了一套相对重的方案来实现实例和代码的友好分离,故目前没有将文档开源,我们会在明年实现一个更好地提交文档bug及翻译的方案),每个组件的每个功能都有非常详细的说明,包括像哪些参数需要.sync使用,一些隐藏的功能、可能遇到的坑等等,同时每个 demo 都有完整的代码示例,一键复制,粘贴后就可以直接看到效果。API 也按照 props、events、slot 三部分拆分,避免混合说明遗漏和阅读不便利。iView 的文档是目前所有同类文档里最为详细的,也受到了很多开发者的好评,所以我们仍会在文档开发的工作上保持高产出。

    高质量,功能丰富

    分页组件 Page:

    分页组件从功能上借鉴了 Ant.Design,支持智能折叠页码(页码过多时,会左右折叠)、页码快进(点击···会快进或快退5页)、切换每页显示条数、电梯,同时还有迷你模式(支持所以普通模式的功能)和简介模式。

    选择器组件 Select

    与浏览器原生不同的是,首先 UI 统一而且很好看,这是大部分模拟 select 的主要原因,其次功能更加强大,支持单选、多选,键盘的快捷操作,还支持搜索、自定义模板、分组,以及大中小三种尺寸(iView 很多表单类组件都提供了不同的尺寸),在单选时还可以清空选项。

    相关文章

      网友评论

        本文标题:基于vue中后台组件库:iview

        本文链接:https://www.haomeiwen.com/subject/bbnpactx.html