vant组件库

目录

1.vant组件库-介绍

1.1 vant组件库安装

通过 npm 安装

2.组件用法

2.1全部引用

1.下载vant组件库到当前项目中

 2.导入所有组件, 在main.js中 

 2.2手动按需引入

 1.引入

2 注册

2.3自动按需引入 

1.安装插件

2.在babel配置文件里 (babel.config.js)

3.全局注册 - 会自动按需引入

3.基础组件

3.1.Button 按钮

1.引入

2.代码演示 按钮类型

朴素按钮

细边框

禁用状态

图标按钮

按钮尺寸

自定义颜色

1.vant组件库-介绍
Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。
1.1 vant组件库安装
通过 npm 安装
在现有项目中使用 Vant 时，可以通过 进行安装：npm

# Vue 3 项目，安装最新版 Vant
npm i vant
 
# Vue 2 项目，安装 Vant 2
npm i vant@latest-v2
当然，你也可以通过 或 进行安装：yarnpnpm

# 通过 yarn 安装
yarn add vant
 
# 通过 pnpm 安装
pnpm add vant
2.组件用法
2.1全部引用
1.下载vant组件库到当前项目中
yarn add vant -D
 2.导入所有组件, 在main.js中 
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
 
Vue.use(Vant);
 2.2手动按需引入
 1.引入
// 方式2: 手动 按需引入
// import Button from 'vant/lib/button'; // button组件
// import 'vant/lib/button/style'; // button样式
2 注册
// components: { // 手动注册组件名
//   // VanButton: Button
//   // 等价的
//   [Button.name]: Button
// }
2.3自动按需引入 
babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。

1.安装插件
yarn add babel-plugin-import -D
2.在babel配置文件里 (babel.config.js)
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};
3.全局注册 - 会自动按需引入
// 方式1: 全局 - 自动按需引入vant组件
// (1): 下载 babel-plugin-import
// (2): babel.config.js - 添加官网说的配置 (一定要重启服务器)
// (3): main.js 按需引入某个组件, Vue.use全局注册 - 某个.vue文件中直接使用vant组件
import { Button } from 'vant';
Vue.use(Button) // Button组件全局注册, 真正注册的组件名VanButton
3.基础组件
3.1.Button 按钮
1.引入
在app.json或index.json中引入组件，默认为ES6版本

"usingComponents": {
  "van-button": "path/to/vant-weapp/dist/button/index"
}
2.代码演示 按钮类型
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
朴素按钮
通过plain属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色

<van-button plain type="primary">朴素按钮</van-button>
<van-button plain type="danger">朴素按钮</van-button>
细边框
设置hairline属性可以开启 0.5px 边框，基于伪类实现

<van-button plain hairline type="primary">细边框按钮</van-button>
<van-button plain hairline type="danger">细边框按钮</van-button>
禁用状态
通过disabled属性来禁用按钮，此时按钮不可点击

<van-button disabled type="primary">禁用状态</van-button>
<van-button disabled type="danger">禁用状态</van-button>
加载状态 
<van-button loading type="primary" />
<van-button loading type="danger" loading-text="加载中..." />
图标按钮
通过icon属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL

<van-button icon="star-o" type="primary" />
<van-button icon="star-o" type="primary">按钮</van-button>
<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="danger">按钮</van-button>
按钮形状 
<van-button square type="primary">方形按钮</van-button>
<van-button round type="danger">圆形按钮</van-button>
按钮尺寸
支持large、normal、small、mini四种尺寸，默认为normal

<van-button type="primary" size="large">大号按钮</van-button>
<van-button type="primary" size="normal">普通按钮</van-button>
<van-button type="primary" size="small">小型按钮</van-button>
<van-button type="primary" size="mini">迷你按钮</van-button>
自定义颜色
通过color属性可以自定义按钮的颜色

<van-button color="#7232dd">自定义颜色</van-button>
<van-button color="#7232dd" plain>自定义颜色</van-button>
 
————————————————
版权声明：本文为CSDN博主「老leng不会飞」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_57569609/article/details/124481506