什么是 dnr-interface
dnr-interface 是一个基于 Vue.js 和 Element 组件库开发的前端 UI 组件库,拥有丰富的 UI 组件,包括了表单、导航、对话框、数据展示等常用组件。与 Element 的区别在于,dnr-interface 集成了一些 Element 不具备的特殊组件,例如文本瀑布流展示、动态横幅等。
dnr-interface 不仅提供了丰富的组件和样式,还提供了强大的组件拓展能力,用户可以方便地扩展组件,满足自己的需求。
安装
dnr-interface 包已经发布到了 npm 上,可以通过 npm install 命令安装到项目中:
--- ------- -------------
如何使用
在项目的 main.js 文件中引入:
------ --- ---- ----- ------ ------- ---- ------------ ------ ------------ ---- --------------- ------ -------------------------------------- ------ -------------------------------------- ---------------- --------------------- --- ----- --- ------- ------- - -- ------ --
这样我们在项目中就可以直接通过 标签使用 dnr-interface 提供的组件了。
组件列表
下面是 dnr-interface 中常用的组件列表:
Button
按钮组件,支持不同颜色、Icon 按钮、禁用状态等。
----------- --------------------------------
Input
输入框组件,支持不同类型的输入框、不同尺寸、前置/后置图标、清空按钮等。
---------- --------------------------------
Select
选择器组件,支持多选、自定义列表、远程搜索等。
----------- ------------------ ------------------ ----------- ----------- -- ------ ----------------- ---------------------- ---------- --------------- -------------
Table
表格组件,支持分页、自定义列、排序等。
---------- ------------------ -------------------------
Dialog
弹窗组件,支持多种位置、样式、自定义标题等。
----------- ---------- ------------------------ ----------- -------------
结语
dnr-interface 是一个非常优秀的 UI 组件库,拥有丰富的组件和强大的扩展能力,可以帮助我们快速完成前端开发。希望这篇 dnr-interface 的使用教程对大家有所帮助。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/70124