react项目的组件库antd-mobile

ゝ一世哀愁。 2022-06-07 20:42 310阅读 0赞

1.antd-mobile是由蚂蚁金融团队推出的一个开源的react组件库，这个组件库拥有很多使用的组件，下面我来介绍一下他的用法：

2.按照官网http://beta.mobile.ant.design/docs/react/introduce-cn上的操作步骤：

npm install antd-mobile@next --save

3.在你的项目中的package.json文件里会有antd-mobile的引用版本，同时它会保存到项目的node\_modules目录下，如下图：

![20170920151817638][]

4.之前项目需要做一个日历选择时间，但是一个完整成熟的日历很麻烦，最好是选用一些已经开源，比较成熟的组件，比如这个，在官网的一个简单的时间选择器：

![20170920152239739][]![20170920152246803][]

5.ok，我们把它放到项目中：

按照官网上http://beta.mobile.ant.design/components/date-picker-cn/ 的要求，在你的页面上import，如下：

![20170920152526023][]

然后在你的布局中加入：

![20170920152534157][]

注意：一定要根据官网！！！

6.最后我们用的是webstorm打开项目：在底部栏输入：npm start

![20170920152910963][]

然后在浏览器中启用你的目录，（项目开始的时候老大会告诉你的。。。）加上你自己的文件名（配置好router）

刚刚展示的是一个弹框，和日历这些组件的用法是一样的，效果如下：

![20170920153213258][]![20170920153219844][]

（完）

[20170920151817638]: /images/20220608/73467f8aa83a4d08b58dbe2bfd7fa275.png
[20170920152239739]: https://img-blog.csdn.net/20170920152239739
[20170920152246803]: /images/20220608/8d813b2719264a6d93a226bdacded09f.png
[20170920152526023]: /images/20220608/8d34e28a67ca4458ab6f1bc32dfe4428.png
[20170920152534157]: /images/20220608/cfedcd79b44047578f9550a00bd96c9f.png
[20170920152910963]: /images/20220608/636ab2db49964bd2a12600938d556330.png
[20170920153213258]: https://img-blog.csdn.net/20170920153213258
[20170920153219844]: /images/20220608/b84566fc94da4064a1dbdd1480eb42d2.png

发表评论取消回复

表情：

评论列表（有 0 条评论，310人围观）

还没有评论，来说两句吧...

相关阅读

相关 React的组件学习

React的组件学习参考资料：https://zh-hans.react.dev/learn/your-first-component 一、定义组件 e

╰半夏微凉°/ 2024年02月20日 11:11/ 0 赞/ 25 阅读

相关 ElementUI（vue UI库）、iView（vue UI库）、ant design（react UI库）中组件的区别

ElementUI（vue UI库）、iView（vue UI库）、ant design（react UI库）中组件的区别： ![在这里插入图片描述][2020031815

àì夳堔傛蜴生んèń/ 2023年07月16日 10:56/ 0 赞/ 329 阅读

相关在react项目中使用jQuery库

1、安装jQuery cnpm i jquery -S 2、在组件中引入jquery库 import React, { Component } f

曾经终败给现在/ 2023年07月15日 02:48/ 0 赞/ 24 阅读

相关 vue项目组件库Avue表格组件avue-crud

vue项目一直在用的pc端后台管理系统的组件库是`ElementUI`，但是在最近的项目中使用了`avue-crud`这个组件，他是[Avue这个库里面的表格组件][Avue]

待我称王封你为后i/ 2023年02月08日 12:37/ 0 赞/ 15 阅读

相关 React 项目--创建组件（7）

创建组件在上一篇的博客中我们介绍了react中字符串的处理方式和字符串数组的处理方式，如需回顾: [https://blog.csdn.net/datouniao1/

冷不防/ 2022年09月03日 12:27/ 0 赞/ 174 阅读

相关 React 项目---class 创建组件 (11)

回顾 function 创建组件在前面的学习中，我们已经介绍了一种方法来创建组件利用function，这里我们一起来回顾一下 function Hello

短命女/ 2022年08月29日 00:18/ 0 赞/ 189 阅读

相关 react项目中的组件编写，和数据循环

1.还是之前项目的同一个页面，同一个模拟数据 ![20170920164357143][]![20170920164403241][] 2.在页面当中我们写一个ui组件，通

╰+攻爆jí腚メ/ 2022年06月08日 08:46/ 0 赞/ 304 阅读

相关 react项目的组件库antd-mobile

1.antd-mobile是由蚂蚁金融团队推出的一个开源的react组件库，这个组件库拥有很多使用的组件，下面我来介绍一下他的用法： 2.按照官网http://beta.mo

ゝ一世哀愁。/ 2022年06月07日 20:42/ 0 赞/ 311 阅读

相关 react放大镜组件

放大镜效果图 ![放大镜效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

àì夳堔傛蜴生んèń/ 2021年09月21日 09:38/ 0 赞/ 629 阅读

相关 03-React脚手架工具dva和umi，组件库引入，高阶组件

一、DVA 1、安装dva-cli 确保dva版本在0.9.1或以上 $ npm install dva-cli -g $ dva -v dv

亦凉/ 2021年07月26日 02:12/ 0 赞/ 491 阅读