Vant使用,我要注意!!!

416 阅读1分钟
  • Toast/Dialog/Notify 需要单独引入组件样式
import 'vant/es/dialog/index.less'
import 'vant/es/notify/index.less'
import 'vant/es/toast/index.less'
  • Tab 标签页组件会两两加载,第一个tab和第二个tab会同时加载,开发过程注意因此产生的异步问题
  • Popover 出现定位跑偏的情况,记得设置 teleport 指向父级元素(实在不行就绑到'#app'上吧)
  • 修改Vant组件样式最好这样:
<template>
  <van-config-provider :theme-vars="themeVars">  <!--组件外包裹此标签-->
      <router-view></router-view>
  </van-config-provider>
</template>
<script setup lang="ts">
// 统一样式修改,变量F12查找或文档查找
const themeVars = {
  tabsBottomBarColor: '#003cbf',
  tabsNavBackgroundColor: 'rgba(255,255,255,0)',
  tabsLineHeight: '50px',
  tabsBottomBarWidth: '2rem'
}

- 下拉菜单还是用官方 DropdownMenu 吧,Popover 配置有局限