antd-mobile-vue-next v0.1.0-14
在此前发布的Antd Mobile Vue的基础上进行了vue3.0的升级 这是目前为止Ant Design Mobile移植到Vue最完整的组件库 新增部分v5组件移植
如有问题可添加个人微信(wuhao1200),欢迎共同交流

antd-mobile-vue
基于 Vue3 的组件库,代码由antd-mobile转为Vue版本,目前已具备antd-mobile的绝大部分组件
部分组件的示例已和 ant design mobile 官网同步
与antd-mobile的组件对比
antd-mobile 共有 47个组件,本项目截至现在移植了44个, 组件完成度达到95% antd-mobile V5 共有 58个组件(不含ConfigProvider),本项目截至现在移植了51个, 组件完成度达到88%
与ant design mobile的组件比较
| 组件名称 | antd-mobile | antd-mobile-vue | 示例移植 | 说明 |
|---|---|---|---|---|
| Accordion | √ | √ | √ | |
| ActionSheet | √ | √ | √ | |
| ActivityIndicator | √ | √ | √ | |
| Badge | √ | √ | √ | |
| Button | √ | √ | √ | |
| Calendar | √ | √ | √ | |
| Card | √ | √ | √ | |
| Carousel | √ | √ | √ | |
| Checkbox | √ | √ | √ | |
| DatePicker | √ | √ | √ | |
| DatePickerView | √ | √ | √ | |
| Drawer | √ | √ | √ | |
| Empty | √ | √ | √ | |
| Flex | √ | √ | √ | |
| Grid | √ | √ | ||
| Icon | √ | √ | √ | |
| ImagePicker | √ | √ | ||
| InfiniteScroll | √ | v | √ | |
| InputItem | √ | v | √ | |
| List | √ | √ | √ | |
| ListView | √ | 无 | ||
| Loading | √ | √ | √ | |
| Mask | √ | √ | √ | |
| Menu | √ | √ | √ | |
| Modal | √ | √ | √ | |
| NavBar | √ | √ | √ | |
| NoticeBar | √ | √ | √ | |
| Pagination | √ | √ | √ | |
| Picker | √ | √ | √ | |
| PickerView | √ | √ | ||
| Popover | √ | √ | √ | |
| Progress | √ | √ | √ | |
| Radio | √ | √ | √ | |
| PullToRefresh | √ | √ | √ | |
| Result | √ | √ | √ | |
| SearchBar | √ | √ | ||
| SegmentedControl | √ | √ | √ | |
| Space | √ | √ | √ | |
| Slider | √ | √ | √ | |
| Range | √ | √ | √ | |
| Stepper | √ | √ | √ | |
| Steps | √ | √ | √ | |
| SwipeAction | √ | √ | ||
| Switch | √ | √ | ||
| TabBar | √ | √ | √ | |
| Tabs | √ | √ | √ | |
| Tag | √ | √ | √ | |
| TextareaItem | √ | √ | √ | |
| Toast | √ | √ | √ | |
| WhiteSpace | √ | √ | √ | |
| WingBlank | √ | √ | √ | |
| LocaleProvider | √ | 无 | ||
| AutoCenter | √ | |||
| CapsuleTabs | √ | |||
| Cascader | √ | |||
| CascaderView | √ | |||
| Dropdown | √ | |||
| Ellipsis | √ | |||
| FloatingBubble | √ | |||
| ErrorBlock | √ | |||
| FloatingPanel | √ | |||
| Image | √ | |||
| ImageViewer | √ | |||
| ImageUploader | √ | |||
| IndexBar | √ | |||
| JumboTabs | √ | |||
| NumberKeyboard | √ | |||
| PasscodeInput | √ | |||
| ProgressCircle | √ | |||
| SafeArea | √ | |||
| Selector | √ | |||
| Skeleton | √ | |||
| SideBar | √ | |||
| Swiper | √ | |||
| TreeSelect | √ | |||
| VirtualInput | √ | |||
| WaterMark | √ |
安装
npm i antd-mobile-vue-next -S使用
import AntdMobile from 'antd-mobile-vue-next'
app.use(AntdMobile)按需引入
按需加载需要借助babel-plugin-import, 这样就可以只引入需要的组件,以减小项目体积
npm i babel-plugin-import -D将babel.config.js修改为:
module.exports = {
presets: ['@vue/app'],
plugins: [
[
'import',
{
libraryName: 'antd-mobile-vue-next',
libraryDirectory: 'es',
style: true
},
'antd-mobile-vue-next'
]
]
};引入组件
import { Alert } from "antd-mobile-vue-next";
defineComponent({
components: {
[Alert.name]: Alert
}
});开发环境启动
npm run dev 打包
npm run build发布到npm仓库
npm publish12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago