vue3 + vant 使用
一、基础使用
2.项目初始化完成,安装vant
Vue 3 项目,安装 Vant 3:
npm i vant@next -S
3.组件按需引入
安装插件
npm i babel-plugin-import -D
4.bable.config.js中增加配置
"plugins": [
[
"import",
{
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}
]
]
5.在main.js中引入vant组件并挂载
// 引入vant按钮组件
import {Button} from 'vant';
// 挂载
createApp(App).use(store).use(router).use(Button).mount('#app')
6.在页面中使用组件
<van-button type="primary" >大号按钮</van-button>
二、主题配置
1.通过 ConfigProvider 覆盖
引入ConfigProvider 组件
// 引入vant
import {Button,ConfigProvider } from 'vant';
createApp(App).
use(store).
use(router).
use(ConfigProvider).
use(Button).mount('#app')
在根节点包裹一个 ConfigProvider
组件,通过 theme-vars
属性修改主题变量
<van-config-provider :theme-vars="themeVars">
<van-form>
...
</van-form>
</van-config-provider>
themeVars 内的值会被转换成对应 CSS 变量
比如 sliderBarHeight 会转换成 --van-slider-bar-height
export default {
setup() {
const themeVars = {
buttonPrimaryBorderColor: '#07c160',
buttonPrimaryBackgroundColor: '#07c160',
};
return {
themeVars
};
},
};
按钮颜色修改成功
2.通过插槽定制个性样式
通过插槽对组件的某一部分进行个性化定制
<!-- 原组件样式 -->
<van-checkbox v-model="checked">复选框</van-checkbox>
<!-- 自定义组件样式 -->
<van-checkbox v-model="checked">
<!-- 使用组件提供的 icon 插槽 -->
<!-- 将默认图标替换为个性化图片 -->
<template #icon="props">
<img :src="props.checked?activeIcon:inactiveIcon" style="width:16px;height:16px" />
</template>
用户
</van-checkbox>
data() {
return {
checked: true,
activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png',
};
},
效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I4Ny7gL2-1626853049606)(C:\Users\bytech\AppData\Roaming\Typora\typora-user-images\image-20210721145204534.png)]
3.rem适配移动端
1.rem与px换算
对浏览器默认1rem = 16px 0.875rem = 14px 1px = 0.0625rem
如果是375px的设计稿,手机是375px的屏,css设置rem值 = 设计稿px/16px
如果是750px设计稿,手机是375px的屏,呈两倍关系,css设置rem值 = 设计稿px/2/16px