vue2-vant组件库的使用

2022-02-28 17:30:01 阅读：229 来源： 互联网

vant 官网：https://youzan.github.io/vant/v2/#/zh-CN/quickstart

注意：vue2 和 vue3 中安装 vant 有差别，具体安装和使用方法查阅官网文档
vant 有全局引入和按需引入，具体操作可以查阅 vant官方文档

安装使用步骤参考：

（1） npm 安装- - -npm i vant@latest-v2 -S
（2）在main.js 中进行 vant 配置

// 导入vant包 和其相关样式
import Vant from 'vant'
import 'vant/lib/index.css'

// 将 vant 组件库安装到 Vue 上
Vue.use(Vant)

（3）在vue文件中使用 vant标签，例如：

    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>

（4）如果有数据方面的操作，在vue文件的 js 部分进行相应设置，具体使用方法参考 vant 官方文档
（5）可以选择所需图标，icon=“标签名” 进行设置

（6）可以配合路由，在<van-tabbar> 上添加 route，to=“路由”

      <van-tabbar route>
        <!-- <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item> -->
        <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
        <van-tabbar-item icon="user-o" to="/user">我的</van-tabbar-item>
      </van-tabbar>

更多使用方法查阅 vant 官方文档~

标签：vant,查阅,使用,文档,vue2,按钮,组件,安装
来源： https://blog.csdn.net/qq_39111074/article/details/123187623

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue2-vant组件库的使用