介绍 - 图1

基于vue 2+ ,为公司产品打(zao)造(lun)的(zi)可复用UI组件,适用于 移动 和 部分PC 端,其中包括 基础组件 和 应用组件,目前 组件 和 文档 在不断完善中。

特性

  • 基于 Vue>=v2.1.4 开发的可复用 UI 组件,并且可随产品需要扩展
  • 使用Vue官方的工作流,支持 ES6
  • 一系列产品线都在使用中
  • 关于SEO问题推荐使用插件 prerender-spa-plugin

浏览器支持

  • 适用于 移动 和 部分PC 端

开发

全局引入 — 在 webpack 入口文件 main.js 中如下配置:
  1. # 安装
  2. cnpm install x-m-ui --save
  3. # 引入css
  4. import 'x-m-ui/package/xmui.min.css'
  5. # 引入xmui.min.js
  6. import xmui from 'x-m-ui'
  7. # 注入到vue
  8. Vue.use(xmui)
按需引入 — 在 入口文件 main.js 或 组件内 中如下配置:
  1. # 全局组件 main.js引入
  2. import Toast from 'x-m-ui/package/comps/components/toast'
  3. Vue.prototype.$toast = Toast
  4. # 一般组件
  5. import xmButton from 'x-m-ui/package/comps/components/button'
  6. import xmButtonGroup from 'x-m-ui/package/comps/components/buttongroup'
  7. import xmModal from 'x-m-ui/package/comps/components/modal'
  8. ...
  9. components: {
  10. xmButton,
  11. xmButtonGroup,
  12. xmModal
  13. ...
  14. }

查看示例

在线示例

组件列表

  • 按钮
  • 标签
  • 加载更多
  • 搜索框
  • 单元格
  • 表单
  • 网格和图标
  • flexbox
  • Modal
  • Toast
  • Loading
  • 工单流程
  • skeleton骨架
  • Lazy延迟加载
  • 轮播
  • ActionSheet
  • Popup
  • 数字键盘
  • 无缝滚动
  • 左右滑菜单
  • 时间选择器
  • 标签页
  • 导航栏(顶部)
  • 标签栏(底部)

贡献

在此不一一感谢所有付出脑力体力的同仁,如有疑问,请与我们联系如果你在使用时遇到问题,或者有好的建议,欢迎给我们提 IssuePull Request

原文: https://monw3c.github.io/xmui/#/README