Vue DevUI 组件又添11位新成员，看看都是哪些吧？

前端

2023-11-16 07:17:36

Vue DevUI 是一个开源的前端组件库，提供了一系列常用的UI组件，如按钮、表单、对话框、表格等。这些组件都经过精心设计，符合现代设计趋势，并且易于使用。

上个月，Vue DevUI 发布了最新版本，新增了11个组件。这些组件包括：

面包屑导航
卡片
抽屉
折叠面板
图标
输入框
加载中
分页
弹出层
进度条
标签页

这些组件都非常实用，可以帮助开发者快速构建出美观、易用的Web应用程序。

本文将介绍这些新组件的特性和使用方法，并提供相关代码示例，帮助读者快速上手使用这些组件。

面包屑导航

面包屑导航是一种显示用户当前位置的导航组件。它通常位于页面的顶部，由一系列链接组成，每个链接代表用户从根目录到当前页面的路径。

Vue DevUI 的面包屑导航组件非常易于使用。您只需要在组件中指定面包屑项的文本和链接，组件就会自动生成面包屑导航。

<vue-breadcrumb>
  <vue-breadcrumb-item to="/">首页</vue-breadcrumb-item>
  <vue-breadcrumb-item to="/products">产品</vue-breadcrumb-item>
  <vue-breadcrumb-item>详细</vue-breadcrumb-item>
</vue-breadcrumb>

卡片

卡片是一种用来显示内容的容器组件。它可以用来显示产品信息、新闻文章、用户评论等。

Vue DevUI 的卡片组件非常灵活，可以根据需要进行自定义。您可以设置卡片的标题、副标题、内容和操作按钮。

<vue-card>
  <template #header>
    <h2 class="card-title">产品名称</h2>
  </template>
  <template #body>
    <p>产品</p>
  </template>
  <template #footer>
    <vue-button @click="addToCart">加入购物车</vue-button>
  </template>
</vue-card>

抽屉

抽屉是一种从侧面滑出的面板组件。它通常用来显示辅助信息，如过滤器、导航菜单或聊天窗口。

Vue DevUI 的抽屉组件非常易于使用。您只需要在组件中指定抽屉的内容和触发器，组件就会自动生成抽屉。

<vue-drawer v-model="drawerVisible">
  <template #trigger>
    <vue-button @click="drawerVisible = true">打开抽屉</vue-button>
  </template>
  <template #content>
    <p>抽屉内容</p>
  </template>
</vue-drawer>

折叠面板

折叠面板是一种可以展开和折叠的容器组件。它通常用来显示额外的信息，如产品规格、用户评论或常见问题解答。

Vue DevUI 的折叠面板组件非常易于使用。您只需要在组件中指定折叠面板的标题和内容，组件就会自动生成折叠面板。

<vue-collapse>
  <vue-collapse-item title="产品规格">
    <p>产品规格</p>
  </vue-collapse-item>
  <vue-collapse-item title="用户评论">
    <p>用户评论</p>
  </vue-collapse-item>
  <vue-collapse-item title="常见问题解答">
    <p>常见问题解答</p>
  </vue-collapse-item>
</vue-collapse>

图标

图标是一种用来表示概念或动作的图形元素。它通常用来美化界面、传达信息或引导用户操作。

Vue DevUI 提供了一系列内置图标。这些图标都经过精心设计，并且可以轻松地与其他组件一起使用。

<vue-icon name="home"></vue-icon>
<vue-icon name="search"></vue-icon>
<vue-icon name="heart"></vue-icon>

输入框

输入框是一种用来收集用户输入的组件。它通常用来收集用户的名字、电子邮件、密码等信息。

Vue DevUI 的输入框组件非常灵活，可以根据需要进行自定义。您可以设置输入框的类型、大小、颜色和占位符。

<vue-input type="text" placeholder="请输入您的姓名"></vue-input>
<vue-input type="email" placeholder="请输入您的电子邮件"></vue-input>
<vue-input type="password" placeholder="请输入您的密码"></vue-input>

加载中

加载中组件是一种用来显示加载状态的组件。它通常用来在数据加载时向用户提供反馈。

Vue DevUI 的加载中组件非常易于使用。您只需要在组件中指定加载中的文本，组件就会自动生成加载中组件。

<vue-loading text="正在加载中"></vue-loading>

分页

分页组件是一种用来将数据分成多个页面的组件。它通常用来在列表或表格中显示大量数据。

Vue DevUI 的分页组件非常易于使用。您只需要在组件中指定总页数、当前页码和每页显示的数据量，组件就会自动生成分页组件。

<vue-pagination :total="100" :current-page="1" :page-size="10"></vue-pagination>

弹出层

弹出层是一种用来显示模态对话框的组件。它通常用来显示警告信息、确认信息或输入框。

Vue DevUI 的弹出层组件非常易于使用。您只需要在组件中指定弹出层的内容和触发器，组件就会自动生成弹出层。

<vue-dialog v-model="dialogVisible">
  <template #trigger>
    <vue-button @click="dialogVisible = true">打开弹出层</vue-button>
  </template>
  <template #content>
    <p>弹出层内容</p>
  </template>
</vue-dialog>

进度条

进度条是一种用来显示任务进展的组件。它通常用来在数据加载、文件上传或其他耗时任务时向用户提供反馈。

Vue DevUI 的进度条组件非常易于使用。您只需要在组件中指定进度条的百分比，组件就会自动生成进度条。

<vue-progress :percentage="50"></vue-progress>

标签页

标签页组件是一种用来将内容分成多个选项卡的组件。它通常用来在同一个页面中显示不同的内容。

Vue DevUI 的标签页组件非常易于使用。您只需要在组件中指定标签页的标题和内容，组件就会自动生成标签页。

<vue-tabs>
  <vue-tab title="选项卡 1">
    <p>选项卡 1 内容</p>
  </vue-tab>
  <vue-tab title="选项卡 2">
    <p>选项卡 2 内容</p>
  </vue-tab>
  <vue-tab title="选项卡 3">
    <p>选项卡 3 内容</p>
  </vue-tab>
</vue-tabs>