Vue.js 超详细入门与项目实战（微课视频版）课件 第11章 Vant UI

第11章VantUI课件V1.0

教学内容第一节

Vant

介绍第二节Vant基础组件第三节

Vant表单组件第四节Vant业务组件第五节其他扩展插件知识目标教学目标理解和掌握

Vant

组件库安装和配置方法掌握

Vant

基础、表单和业务类组件的使用理解和掌握

Vant

其他核类组件的使用知识点预览#节知识点难点重点应用11C11-01Vant介绍1、Vant特点

2、Vant安装与配置C11-02Vant基础组件1、Button组件2、Image组件3、Layout组件C11-03Vant表单组件1、PasswordInput组件2、Rate组件3、Signature组件C11-04Vant业务组件1、Card组件2、Coupon优惠券3、SubmitBar提交订单栏

Vant是一个十分优秀的面向移动端应用的UI组件库，它体积轻量、可定制化。除了轻量和可定制化的特点外，Vant还有以下几个主要的特点。超过70多个高质量组件，几乎覆盖移动端主流场景。不需要外部依赖，也不依赖第三方的npm包的安装。提供Sketch和Axure设计资源的支持，便于开发。支持Vue2、Vue3和微信小程序前端的主流框架。支持TypeScript编写代码，并提供完整的类型定义。支持主题定制，内置超700个主题变量，方便定制风格。Vant特点

使用

Vue3

框架开发的应用，必须选择Vant4组件库进行安装，先在应用的根目录下，执行下列终端指令。npminstallvant-S完成成功后，还需要在应用中配置Vant组件库，才能在应用的各个组件中使用，只需要在main.js文件中导入Vant模块和对应的CSS文件，并将导入的Vant模块挂载到Vue实例上即可。Vant安装与配置Vant中的Button组件从外形和状态两个方面，对原始的Button元素进行了封装，使它支持5种类型的按钮，同时，还可以自定义按钮的图标、形状、尺寸和颜色，并可以设置按钮的点击状态和是否可用性。

Button

组件参数说明类型默认值type类型，可选值为primarysuccesswarningdangerstring defaultsize尺寸，可选值为largesmallministring normaltext按钮文字string

color按钮颜色，支持传入linear-gradient渐变色string

icon左侧图标名称或图片链接string

icon-prefix图标类名前缀string van-iconround是否为圆形按钮boolean falsedisabled是否禁用按钮boolean falsehairline是否使用0.5px边框 boolean falseloading是否显示为加载状态 boolean falseloading-text加载状态提示文字string

Vant将原生的img元素封装成增强版的image组件，并提供了多种图片填充的模式，使图片能按指定的方式呈现和缩放，同时，还支持图片懒加载，加载中提示，加载失败提示等。Image

组件参数说明类型默认值src图片链接string

fit图片填充模式，与原生的object-fit属性一致string fillposition图片位置，与原生的object-position属性一致string centerradius圆角大小，默认单位为pxnumber 0round是否显示为圆形boolean falselazy-load是否开启图片懒加载，须配合Lazyload组件使用booleanfalseshow-error是否展示图片加载失败提示boolean trueshow-loading是否展示图片加载中提示boolean trueerror-icon失败时提示的图标名称或图片链接 boolean photo-failloading-icon加载时提示的图标名称或图片链接 boolean photoicon-size加载图标和失败图标的大小number 32

在Vant中，Layout组件用于元素的响应式布局，分别由van-row和van-col两个组件来实现，前者表示行，后者被包裹在van-row组件中，表示列，共有24列栅格组成，在van-col组件中，span属性表示所占列的比例，offset属性表示列的偏移量。Layout

组件van-col组件常用属性说明Layout

组件名称说明类型默认值span列元素宽度number|string

offset列元素偏移距离number|string

tag自定义元素标签stringdivvan-row

组件常用属性说明Layout

组件名称说明类型默认值gutter列元素之间的间距number|string

tag自定义元素标签stringdivjustify主轴对齐方式stringstartalign交叉轴对齐方式stringtopwrap是否自动换行booleantrue

PasswordInput组件是一款带网格输入框的组件，用于输入密码和短信验证信息，通常结合数字键盘一起使用，常用的组件属性说明如下。

PasswordInput组件名称说明类型默认值value密码值string

info输入框下方文字提示string

error-info输入框下方错误提示string

length密码最大长度number|string6gutter输入框格子之间的间距number|string0mask是否隐藏密码内容booleantruefocused是否已聚焦，聚焦时会显示光标booleanfalse

Rate组件常用于对事物评级使用，如商品的质量、用户对服务的满意度等各种评级功能实现，都离不开Rate组件的使用，该组件可以自定义显示的图标、数量和样式，还能显示半星的评分效果，当用户点击图标时，可以获取到最后的评分值。Rate组件常用的属性如下。Rate组件名称说明类型默认值v-model当前分值number

count图标总数number|string5color选中时的颜色string#ee0a24void-color未选中时的颜色string#c8c9ccicon选中时的图标名称或图片链接stringstarallow-half是否允许半选是否允许半选falsetouchable是否可以通过滑动手势选择评分是否可以通过滑动手势选择评分true

Signature组件用于页面的手写签名，它的功能基于Canvas实现，Vant版本必须大于或等于4.3.0才能使用该组件，当完成签名并触发绑定的submit事件后，在事件中，可以获取格式为base64字符串的签名图片，用于保存签名数据和显示签名效果。Signature组件常用的属性如下。Signature组件名称说明类型默认值type导出图片类型stringpngpen-color笔触颜色string#000line-width线条宽度number 3background-color背景颜色string

tips当不支持Canvas时的提示信息string

clear-button-text清除按钮文案string清空confirm-button-text确认按钮文案string确认

Signature组件常用的事件如下Signature组件事件名称说明回调参数start开始签名时触发

end结束签名时触发

signing签名过程中触发event:TouchEventsubmit点击确定按钮时触发data:{image:string;canvas:HTMLCanvasElement}clear点击取消按钮时触发

Card组件用于展示商品的完整信息，包括商品图片、价格、标签和促销信息，还可以显示商品的多种标签，自定义商品的底部操作按钮，常用于购物车商品信息的展示和商品列表信息的显示，它的常用属性如下。Card组件名称说明类型默认值thumb左侧图片string

title标题string

desc描述string

tag图片角标string

num商品数量number|string

price商品价格number|string

origin-price商品划线原价number|string商品在展示时，通常会与一些优惠券一起显示，针对这种需求，Vant提供了专门用于优惠券展示的组件——Coupon，它用于优惠券的兑换和选择，点击CouponCell组件时，以弹框形式进入