2021-07-21 vue3+vant 初步搭配 基础使用 修改主题

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