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