登录
原创

vue2-vant组件库的使用

发布于 2022-02-24 阅读 664
  • 前端
  • Vue.js
  • Vant
原创

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=“标签名” 进行设置
image.png
(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 官方文档~

评论区

零00
7粉丝

时光荏苒,我自清欢

0

0

0

举报