使用Vant Weapp组件库

第一步：新建终端初始一个包的描述

包名自起（包名不能为中文，所以npm init不需要-y），然后一路回车

第二步：通过 npm 安装

# 通过 npm 安装

npm i @vant/weapp -S --production

安装完成后文件目录处会增加一个node_modules文件(在nodejs中可以直接使用)，现在在小程序中需要构建成小程序所能识别的包，点击工具选择构建npm。

第三步：修改 app.json

去除app.json中的 "style": "v2"，小程序的新版基础组件强行加上了许多样式难以覆盖，不删除会导致样式混乱。

第四步：修改 project.config.json

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

注意：由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为’./'即可

第五步：使用Vant组件

在app.json(全局)或index.json(当前)中引入组件

"usingComponents": { "van-field": "@vant/weapp/field/index"}

Button 按钮

引入

"usingComponents": { "van-button": "@vant/weapp/button/index"}

按钮类型

支持default、primary、info、warning、danger五种类型，默认为default。

<van-button type="default">默认按钮</van-button>

朴素按钮

通过plain属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。

<van-button plain type="primary">朴素按钮</van-button>

<van-button plain type="info">朴素按钮</van-button>

禁用状态

通过disabled属性来禁用按钮，此时按钮的bind:click事件不会触发。

<van-button disabled type="primary">禁用状态</van-button>

<van-button disabled type="info">禁用状态</van-button>

加载状态

<van-button loading type="primary" />

<van-button loading type="primary" loading-type="spinner" />

<van-button loading type="info" loading-text="加载中..." />

按钮形状

<van-button square type="primary">方形按钮</van-button>

<van-button round type="info">圆形按钮</van-button>

Popup 弹出层

介绍

弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示。

基础用法

通过show属性控制弹出层是否展示。

<van-cell title="展示弹出层" is-link bind:click="showPopup" />

<van-popup show="{{ show }}" bind:close="onClose">内容</van-popup>

Page({

data: {

show: false,

},

//显示弹出层

showPopup() {

this.setData({ show: true });

},

//关闭弹出层

onClose() {

this.setData({ show: false });

},

});

弹出位置

通过position属性设置弹出位置，默认居中弹出，可以设置为top、bottom、left、right。

<van-popup

show="{{ show }}"

position="top"

custom-style="height: 20%;"

bind:close="onClose"

/>

使用Vant Weapp组件库