vue-antd-mobile

Ant Design mobile of Vue

• 基于Vue2.0
• 样式库使用Ant Design Mobile

主页 示例

安装

This module is still working in progress right now, so it is just for placeholder.

使用

开发

• 打包 npm run build
• 启动文档开发服务器 npm run start:desktop
• 启动示例开发服务器 npm run start:mobile
• 测试 npm test

目录结构

vue-antd-mobile/
|--dist/               组件库打包文件
|--docs/               文档 & 示例
|  |--desktop/         项目文档（for desktop）
|  |--mobile/          项目示例（for mobile）
|--scripts/            Webpack配置文件
|--src/                组件库源码
|  |--index.js         组件库入口
|  |--components/      组件库源文件
|  |--style/           组件库公共样式
|--sites/              文档 & 示例源码
|  |--desktop/         文档源码（for desktop）
|  |--mobile/          示例源码（for mobile）
|--test/               测试
|  |--unit             单元测试

组件完成情况

• Layout

• Flex Flex布局
• WingBlank 两翼留白
• WhiteSpace 上下留白

• Navigation

• ~~Drawer~~ 抽屉
• ~~Menu~~ 菜单
• ~~NavBar~~ 导航栏
• ~~Pagination~~ 分页器
• ~~Popover~~ 气泡
• ~~SegmentedControl~~ 分段器
• ~~Tabs~~ 标签页
• ~~TabBar~~ 标签栏

• Data Entry

• ~~Button~~ 按钮
• ~~Checkbox~~ 复选框
• ~~DatePicker~~ 日期选择
• ~~ImagePicker~~ 图片选择
• ~~InputItem~~ 文本输入
• ~~PickerView~~ 选择器
• ~~Picker~~ 选择器
• ~~Radio~~ 单选框
• ~~Range~~ 区域选择
• ~~Switch~~ 滑动开关
• ~~SearchBar~~ 搜索栏
• ~~Slider~~ 滑动输入条
• ~~Stepper~~ 步进器
• ~~textareaItem~~ 多行输入

• DataDisplay

• ~~Accordion~~ 手风琴
• ~~Badge~~ 徽标数
• ~~Carousel~~ 走马灯
• ~~Card~~ 卡片
• ~~Grid~~ 栅格
• ~~Icon~~ 图标
• ~~List~~ 列表
• ~~NoticeBar~~ 通告栏
• ~~Steps~~ 步骤条
• ~~Tag~~ 标签

• Feedback

• ~~ActionSheet~~ 动作面板
• ~~ActivityIndicator~~ 活动指示器
• ~~Modal~~ 对话框
• ~~Progress~~ 进度条
• ~~Popup~~ 弹出层
• ~~Toast~~ 轻提示

• Gesture

• ~~RefreshControl~~ 下拉刷新
• ~~SwipeAction~~ 滑动操作

• Combination

• ~~ListView~~ 长列表
• ~~Result~~ 结果页

参考项目

• ant-design-mobile
• element
• mint-ui
• vue-beauty