注册
web

用Vant组件库来做移动端UI界面能有多方便?🚀🚀🚀

前言


最近写一个移动端的项目,用到了vant做UI界面设计,不得不再次感叹开源的力量,这个组件库封装的实在是太优雅了,只要你愿意看官方文档,就不会担心看不懂,也不会担心不会用,接下来就带大家去浅尝一下这个组件库。官网文档:Vant 4 - 轻量、可定制的移动端组件库 (vant-ui.github.io)


Vant


Vant 是一个轻量、可定制的移动端组件库,于 2017 年开源。


可以看到,移动端,用来做移动端的ui界面。


目前 Vant 官方提供了 Vue 2 版本Vue 3 版本微信小程序版本,并由社区团队维护 React 版本支付宝小程序版本


特性



  • 🚀 性能极佳,组件平均体积小于 1KB(min+gzip)
  • 🚀 80+ 个高质量组件,覆盖移动端主流场景
  • 🚀 零外部依赖,不依赖三方 npm 包
  • 💪 使用 TypeScript 编写,提供完整的类型定义
  • 💪 单元测试覆盖率超过 90%,提供稳定性保障
  • 📖 提供丰富的中英文文档和组件示例
  • 📖 提供 Sketch 和 Axure 设计资源
  • 🍭 支持 Vue 2、Vue 3 和微信小程序
  • 🍭 支持 Nuxt 2、Nuxt 3,提供 Nuxt 的 Vant Module
  • 🍭 支持主题定制,内置 700+ 个主题变量
  • 🍭 支持按需引入和 Tree Shaking
  • 🍭 支持无障碍访问(持续改进中)
  • 🍭 支持深色模式
  • 🍭 支持服务器端渲染
  • 🌍 支持国际化,内置 30+ 种语言包

没错,这是官网复制来的介绍。


那么从官方文档可以看到目前这是Vant4.x,适用于vue3,如果你用的是vue2,那么就用Vant2。我们切换到快速上手,就能看到如何快速入门使用


Vant使用


1.安装


在现有项目中使用 Vant 时,可以通过 npm 进行安装:


# Vue 3 项目,安装最新版 Vant
npm i vant

# Vue 2 项目,安装 Vant 2
npm i vant@latest-v2

看得出来,非常优雅,最新版直接安装vant,如果不是最新的才加了些-2...


当然,你也可以通过 yarnpnpm 或 bun 进行安装:什么方式都有,大家可以自己参照官方文档。


# 通过 yarn 安装
yarn add vant

# 通过 pnpm 安装
pnpm add vant

# 通过 Bun 安装
bun add vant

那么引入之后如何使用呢?我们常常需要做一个登陆注册页面,看看有了vant组件库之后,我们还需要去切页面吗?


image.png
此处我们需要放一个表单,接下来我们查阅官方文档,看看vant的表单如何使用。


image.png


2.引入


写的很清楚,表单会用到三个组件,我们只需要从vant库中引入这三个组件,然后都use掉即可


import { createApp } from 'vue';
import { Form, Field, CellGr0up } from 'vant';

const app = createApp();
app.use(Form);
app.use(Field);
app.use(CellGr0up);


引入之后,就可以在我们需要用到表单的页面使用了。直接将他写好的表单复制到我们的代码中


<van-form @submit="onSubmit">
<van-cell-group inset>
<van-field
v-model="username"
name="用户名"
label="用户名"
placeholder="用户名"
:rules="[{ required: true, message: '请填写用户名' }]"
/>

<van-field
v-model="password"
type="password"
name="密码"
label="密码"
placeholder="密码"
:rules="[{ required: true, message: '请填写密码' }]"
/>

</van-cell-group>

<div style="margin: 16px;">
<van-button round block type="primary" native-type="submit">
提交
</van-button>
</div>

</van-form>


可以看到,它使用了v-model双向绑定,因此我们就需要自己去定义一个username、passwor...看需要用到什么,然后官方文档就直接了当告诉我们了这些变量


import { ref } from 'vue';

export default {
setup() {
const username = ref('');
const password = ref('');
const onSubmit = (values) => {
console.log('submit', values);
};

return {
username,
password,
onSubmit,
};
},
};



  • 注意他这里提交表单事件,直接接收了一个参数values,事实上这个values可以直接通过values.name,我们input框上的name属性代表的input框拿到的数据,在这里其实就是values.用户名,所以我们可以直接改成英文,如:values.username。

image.png


在官方文档上也能看见他的样式,甚至可以做校验


除此之外,再介绍一个,例如微信中点击某个东西成功之后,就会弹出一个弹出框,打勾,或者失败,如果这么一个UI界面要我们自己去写可能多少也有点麻烦,但是vant都给我们封装好了


image.png
引入


通过以下方式来全局注册组件,更多注册方式请参考组件注册


import { createApp } from 'vue';
import { Toast } from 'vant';

const app = createApp();
app.use(Toast);

显然就是引入一个封装好了的Toast组件,然后use掉,vant官方都给我们想好了,一般这种弹出提示框都是我们js中做判断,如果成功就弹出,因此一般都出现在函数里面,官方就直接给我们打造了函数调用的方式


import { showToast } from 'vant';

showToast('提示内容');


全局引入依赖之后,在js中直接引入,然后直接调用就能出现效果,帮助咱们切图仔省去了不少麻烦事儿。


image.png
除了成功、失败,他甚至可以自定义写图标,也是极度舒适了。


看看我的登录页面是如何使用的:


<template>
<div class="login">
<h1>登录</h1>
<div class="login-wrapper">
<div class="avatar">
<img src="https://q6.itc.cn/q_70/images03/20240601/80b789341c9b45cb8a76238650d288a5.png" alt="">
</div>

<van-form @submit="onSubmit">
<van-cell-group inset>
<van-field v-model="username" name="username" label="用户名" placeholder="用户名"
:rules="[{ required: true, message: '请填写用户名' }]" />

<van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
:rules="[{ required: true, message: '请填写密码' }]" />

</van-cell-group>
<div style="margin: 16px;">
<van-button round block type="primary" native-type="submit">
登录
</van-button>
</div>
</van-form>


</div>
</div>
</template>


<script setup>
import { ref } from 'vue'
import axios from '@/api/index.js'
const password = ref('')
const username = ref('')
// 登录
const onSubmit = (values) => {
// console.log(values); // 用户输入的账号和密码对象 name作为key
// 发送接口请求给后端 校验数据
axios.post('/user/login', {
username: values.username,
password: values.password
}).then((res) => {
console.log(res);
})
}
</script>


<style lang="less" scoped>
.login {
width: 100vw;
height: 100vh;
background-color: #fff;
padding: 0 0.3rem;
box-sizing: border-box;
overflow: hidden;

h1 {
height: 0.6933rem;
text-align: center;
font-size: 0.48rem;
margin-top: 1.12rem;
}

.login-wrapper {
width: 7.44rem;
height: 10.77rem;
border: 1px solid rgba(187, 187, 187, 1);
margin: 0 auto;
margin-top: 1.7rem;
border-radius: 0.3rem;
box-shadow: 0 0 0.533rem rgba(170, 170, 170, 1);

.avatar {
width: 2.4rem;
height: 2.4rem;
margin: 1rem auto 0.77rem auto;
border-radius: 50%;
overflow: hidden;

img {
width: 100%;
}
}
}
}

:deep(.van-cell__title.van-field__label) {
width: 45px;
}
</style>


非常方便,跟着上述步骤,官方文档写的很清楚,直接贴上去就实现了,然后自己再加一些less样式。


那么其他的就不做过多介绍了,大家在做项目需要用到一些东西的时候,直接查阅官方文档,直接拿去用即可。Vant 4 - 轻量、可定制的移动端组件库 (vant-ui.github.io)


在这里我写的都是rem单位,目的是做移动端的适配,根据宽度调整fontsize的大小,其实也可以通过vant封装好的移动端适配组件来做,这里不做过多介绍了。


小结


Vant 是一个轻量、可靠的移动端组件库,可用于快速构建风格统一的移动端 UI 界面。它提供了一系列高质量的组件,涵盖了导航、表单、按钮、列表、轮播图等常用功能。


我们只需要安装依赖后引入依赖还有在全局中引入他的整份css代码,最后按需取组件,就能轻松完成ui界面设计。


作者:zykk
来源:juejin.cn/post/7389577588174503936

0 个评论

要回复文章请先登录注册