小程序知识点:Vant!!!

2024-06-21 17:20
文章标签 知识点 程序 vant

本文主要是介绍小程序知识点: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-imagewidth="100"height="100"src="xxxx.jpg" rel="extenal nofollow" rel="external nofollow" rel="extenal nofollow"
rel="extenal nofollow" rel="extenal nofollow"/>

填充模式

通过fit属性可以设置图片填充模式

<van-imagewidth="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-imageroundwidth="10rem"height="10rem"src="xxxx.jpg" rel="extenal nofollow" rel="external nofollow" rel="extenal nofollow"
rel="extenal nofollow" rel="extenal nofollow"/>

这篇关于小程序知识点:Vant!!!的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1081847

相关文章

基本知识点

1、c++的输入加上ios::sync_with_stdio(false);  等价于 c的输入,读取速度会加快(但是在字符串的题里面和容易出现问题) 2、lower_bound()和upper_bound() iterator lower_bound( const key_type &key ): 返回一个迭代器,指向键值>= key的第一个元素。 iterator upper_bou

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来,一站式有声阅读平台听书系统 🌟&nbsp;开篇:遇见未来,从“智听”开始 在这个快节奏的时代,你是否渴望在忙碌的间隙,找到一片属于自己的宁静角落?是否梦想着能随时随地,沉浸在知识的海洋,或是故事的奇幻世界里?今天,就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统,它正悄悄改变着我们的阅读方式,让未来触手可及! 📚&nbsp;第一站:海量资源,应有尽有 走进“智听

EMLOG程序单页友链和标签增加美化

单页友联效果图: 标签页面效果图: 源码介绍 EMLOG单页友情链接和TAG标签,友链单页文件代码main{width: 58%;是设置宽度 自己把设置成与您的网站宽度一样,如果自适应就填写100%,TAG文件不用修改 安装方法:把Links.php和tag.php上传到网站根目录即可,访问 域名/Links.php、域名/tag.php 所有模板适用,代码就不粘贴出来,已经打

跨系统环境下LabVIEW程序稳定运行

在LabVIEW开发中,不同电脑的配置和操作系统(如Win11与Win7)可能对程序的稳定运行产生影响。为了确保程序在不同平台上都能正常且稳定运行,需要从兼容性、驱动、以及性能优化等多个方面入手。本文将详细介绍如何在不同系统环境下,使LabVIEW开发的程序保持稳定运行的有效策略。 LabVIEW版本兼容性 LabVIEW各版本对不同操作系统的支持存在差异。因此,在开发程序时,尽量使用

两个月冲刺软考——访问位与修改位的题型(淘汰哪一页);内聚的类型;关于码制的知识点;地址映射的相关内容

1.访问位与修改位的题型(淘汰哪一页) 访问位:为1时表示在内存期间被访问过,为0时表示未被访问;修改位:为1时表示该页面自从被装入内存后被修改过,为0时表示未修改过。 置换页面时,最先置换访问位和修改位为00的,其次是01(没被访问但被修改过)的,之后是10(被访问了但没被修改过),最后是11。 2.内聚的类型 功能内聚:完成一个单一功能,各个部分协同工作,缺一不可。 顺序内聚:

CSP 2023 提高级第一轮 CSP-S 2023初试题 完善程序第二题解析 未完

一、题目阅读 (最大值之和)给定整数序列 a0,⋯,an−1,求该序列所有非空连续子序列的最大值之和。上述参数满足 1≤n≤105 和 1≤ai≤108。 一个序列的非空连续子序列可以用两个下标 ll 和 rr(其中0≤l≤r<n0≤l≤r<n)表示,对应的序列为 al,al+1,⋯,ar​。两个非空连续子序列不同,当且仅当下标不同。 例如,当原序列为 [1,2,1,2] 时,要计算子序列 [

这些心智程序你安装了吗?

原文题目:《为什么聪明人也会做蠢事(四)》 心智程序 大脑有两个特征导致人类不够理性,一个是处理信息方面的缺陷,一个是心智程序出了问题。前者可以称为“认知吝啬鬼”,前几篇文章已经讨论了。本期主要讲心智程序这个方面。 心智程序这一概念由哈佛大学认知科学家大卫•帕金斯提出,指个体可以从记忆中提取出的规则、知识、程序和策略,以辅助我们决策判断和解决问题。如果把人脑比喻成计算机,那心智程序就是人脑的

uniapp设置微信小程序的交互反馈

链接:uni.showToast(OBJECT) | uni-app官网 (dcloud.net.cn) 设置操作成功的弹窗: title是我们弹窗提示的文字 showToast是我们在加载的时候进入就会弹出的提示。 2.设置失败的提示窗口和标签 icon:'error'是设置我们失败的logo 设置的文字上限是7个文字,如果需要设置的提示文字过长就需要设置icon并给

STL经典案例(四)——实验室预约综合管理系统(项目涉及知识点很全面,内容有点多,耐心看完会有收获的!)

项目干货满满,内容有点过多,看起来可能会有点卡。系统提示读完超过俩小时,建议分多篇发布,我觉得分篇就不完整了,失去了这个项目的灵魂 一、需求分析 高校实验室预约管理系统包括三种不同身份:管理员、实验室教师、学生 管理员:给学生和实验室教师创建账号并分发 实验室教师:审核学生的预约申请 学生:申请使用实验室 高校实验室包括:超景深实验室(可容纳10人)、大数据实验室(可容纳20人)、物联网实验

基于SpringBoot的宠物服务系统+uniapp小程序+LW参考示例

系列文章目录 1.基于SSM的洗衣房管理系统+原生微信小程序+LW参考示例 2.基于SpringBoot的宠物摄影网站管理系统+LW参考示例 3.基于SpringBoot+Vue的企业人事管理系统+LW参考示例 4.基于SSM的高校实验室管理系统+LW参考示例 5.基于SpringBoot的二手数码回收系统+原生微信小程序+LW参考示例 6.基于SSM的民宿预订管理系统+LW参考示例 7.基于