uni-ui是DCloud提供的一个跨端ui库,它是基于vue组件的、flex布局的、无dom的跨全端ui框架。

安装:

  1. yarn add @dcloudio/uni-ui
  2. yarn add -D node-sass sass-loader

:::warning uni-ui 不支持使用 Vue.use() 的方式安装 :::

组件列表

组件名 引用路径 说明
uniBadge ‘@dcloudio/uni-ui/lib/uni-badge/uni-badge.vue’ 数字角标
uniCalendar ‘@dcloudio/uni-ui/lib/uni-calendar/uni-calendar.vue’ 日历
uniCard ‘@dcloudio/uni-ui/lib/uni-card/uni-card.vue’ 卡片
uniCollapse ‘@dcloudio/uni-ui/lib/uni-collapse/uni-collapse.vue’ 折叠面板
uniCollapseItem ‘@dcloudio/uni-ui/lib/uni-collapse-item/uni-collapse-item.vue’ 折叠面板子组件)
uniCountdown ‘@dcloudio/uni-ui/lib/uni-countdown/uni-countdown.vue’ 倒计时
uniDrawer ‘@dcloudio/uni-ui/lib/uni-drawer/uni-drawer.vue’ 抽屉
uniGrid ‘@dcloudio/uni-ui/lib/uni-grid/uni-grid.vue’ 宫格
uniIcons ‘@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue’ 图标
uniList ‘@dcloudio/uni-ui/lib/uni-list/uni-list.vue’ 列表
uniListItem ‘@dcloudio/uni-ui/lib/uni-list-item/uni-list-item.vue’ 列表子组件
uniLoadMore ‘@dcloudio/uni-ui/lib/uni-load-more/uni-load-more.vue’ 加载更多
uniNoticeBar ‘@dcloudio/uni-ui/lib/uni-notice-bar/uni-notice-bar.vue’ 通告栏
uniNumberBox ‘@dcloudio/uni-ui/lib/uni-number-box/uni-number-box.vue’ 数字输入框
uniPagination ‘@dcloudio/uni-ui/lib/uni-pagination/uni-pagination.vue’ 分页器
uniPopup ‘@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue’ 弹出层
uniRate ‘@dcloudio/uni-ui/lib/uni-rate/uni-rate.vue’ 评分
uniSegmentedControl ‘@dcloudio/uni-ui/lib/uni-segmented-control/uni-segmented-control.vue’ 分段器
uniSteps ‘@dcloudio/uni-ui/lib/uni-steps/uni-steps.vue’ 步骤条
uniSwipeAction ‘@dcloudio/uni-ui/lib/uni-swipe-action/uni-swipe-action.vue’ 滑动操作
uniSwipeDot ‘@dcloudio/uni-ui/lib/uni-swipe-dot/uni-swipe-dot.vue’ 滑动操作
uniTag ‘@dcloudio/uni-ui/lib/uni-tag/uni-tag.vue’ 标签

使用方式

以 uni-icons 举例:

  1. <template lang="pug">
  2. .main: uniIcon(type="contact")
  3. </template>
  4. <script>
  5. import uniIcon from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'
  6. export default {
  7. components: {
  8. uniIcon
  9. },
  10. }
  11. </script>

参考资料