小程序知识点：Vant！！！
小伙伴们好啊，今天我们来学习vant。
介绍：
特性：
- 提供60多个高质量组件，覆盖移动端各类场景
- 性能极佳，组件平均体积不到1kb
- 单元测试覆盖率90%+，提供稳定性保障
- 完善的中英文文档和示例
- 支持Vue2&Vue3
- 支持按需引入
- 支持主题定制
- 支持国际化
- 支持TypeScript
- 支持SSR
快速上手
脚手架
在新项目中使用Vant时，推荐使用Vue官方提供的脚手架Vue Cli创建项目
#安装Vue Cli
npm install -g@vue/cli
#创建一个项目
vue creat helllo-world
#创建完成后，可以通过命令打开图形化界面通过npm安装
在现有的项目中使用Vant时，可以通过npm或者yarn安装
#通过npm安装
npm i vant -s
#通过yarn安装
yarn add vant引入组件
方式一，自动按需引入组件
babel-plugin-import是一款babel插件，它会在编译过程中将import的写法自动转换为按需引入的方法
#安装插件
npm i babel-pulgin-import-D//在.babelrc 中添加配置
//注意: webpack 1 无需设置 libraryDirectory
{
"plugins"[
["import",{
"libraryName","vant",
"libarayDirectory":"es",
"style":true
}]
]
}
//对于使用 babel7的用户，可以在 babel.config.js中配置
module.export = {
plugins:[
['import',{
libraryDirectory:'es',
style:true
},'vant']
]
};//接着你可以在代码中直接引入vant组件
//插件会自动将代码转化为方式二中的按需引入形式
import {Button} from 'vant'基础组件
Vant Button按钮
引入
import Vue from 'vue'
import{ Button } from 'vant';
Vue.use(Button);按钮类型
支持default，p'rimary，，warning，danger五种类型，默认为default
<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="info">朴素按钮</van-button>
细边框
设置hairline属性可以开启0.5px边框，基于伪类实现
<van-button plain hairline type="primary">细边框按钮</van-button>
<van-button plain hairline type="info">细边框按钮</van-button>
禁用状态
通过disabled属性来禁用按钮，禁用状态下按钮不可点击
<van-button disabled type="primary">禁用状态</van-button>
<van-button disabled type="info">禁用状态</van-button>
按钮形状
通过square设置方形按钮，通过round设置圆形按钮
<van-button square type="primary">方形按钮</van-button>
<van-button round type="info">圆形按钮</van-button>按钮尺寸
支持large，normal，small，mini四种尺寸，默认为normal
<van-button type="primary" side="large">大号按钮</van-button>
<van-button type="primary" side="normal">普通按钮</van-button>
<van-button type="primary" side="small">小号按钮</van-button>
<van-button type="primary" side="mini">迷你按钮</van-button>自定义颜色
通过color属性可以自定义按钮的颜色
<van-button color="#7232dd">单色按钮</van-button>
<van-button color="#7232dd" plain>单色按钮</van-button>
<van-button color="linear-gradient(to right,#4bb0ff,#6149f6">渐变色按钮</van-button> Vant Image图片
引入
import Vue from 'vue'
import {Image } from 'vant'
Vue.use(Image);基础用法
基础用法与原生img标签一致，可以设置src，width，height，alt等原生属性
<van-image
width="100"
height="100"
src="xxxx.jpg" rel="extenal nofollow" rel="external nofollow" rel="extenal nofollow"
rel="extenal nofollow" rel="extenal nofollow"/>填充模式
通过fit属性可以设置图片填充模式
<van-image
width="10rem"
height="10rem"
fit="contain"
src="xxxx.jpg" rel="extenal nofollow" rel="external nofollow" rel="extenal nofollow"
rel="extenal nofollow" rel="extenal nofollow"/>圆形图片
通过round属性可以设置图片变圆，注意当图片宽高不相等且fit为contain或scale-down时，将无法填充一个完整的圆形。
<van-image
round
width="10rem"
height="10rem"
src="xxxx.jpg" rel="extenal nofollow" rel="external nofollow" rel="extenal nofollow"
rel="extenal nofollow" rel="extenal nofollow"/>原文地址：https://blog.csdn.net/KiCCZha/article/details/139803131
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！