Bug 解决 | 组件库报错、或样式丢失不生效

目录

一、前言

二、版本问题

1、使用 VantUI 的 toast 组件报错？

2、引入 VantUI 组件库后，toast 组件样式丢失了？

3、使用 Ant Design Vue 组件库，启动后显示 antd.css 不存在？

4、Vant UI 组件库引入的 tabs 组件报错

5、Vant UI 组件的 Dialog.componemets 失效

二、代码问题

三、其他问题

---

一、前言

我相信很多同学在做项目的时候都会遇到组件库相关的问题， 明明用了这个样式怎么不生效？为什么还报错了？

其实很多时候不是咱们用的不对，是我们使用的组件库更新了！老的代码和新的版本不兼容，导致的各种问题。

所以如果我们觉得代码写的没毛病，那么首先就去确认下版本。

强烈建议使用各种组件的时候，需要对着官方文档来哦！

下面分享一些组件库报错或样式丢失的案例，供大家参考。

二、版本问题

1、使用 VantUI 的 toast 组件报错？

新版本的 VantUI 语法改变了，成功需要用 showSuccessToast() ，失败用 showFailToast() 。

2、引入 VantUI 组件库后，toast 组件样式丢失了？

因为版本不一致，假如你在视频教程中用的是 Vant3，而最新的 Vant4 版本需要这样设置：

1）先修改 main.ts 文件

把
import'./style.css'

改为：
import'vant/lib/index.css'

2）修改 vite.config.ts 文件

把
// https://vitejs. dev/config/
export default defineConfig({
  plugins: [vue(),
  Components({
    resolvers: [VantResolver()],
  }),
  ],
})

改为
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),
    Components({
    resolvers: [VantResolver({
      importStyle: false,
    }
    )],
  }),
  ],
})

同理，如果要使用 vant 4 的 data-picker、time-picker 代替 vant 3 的 datetime-picker ，需要改下代码。

vant3 组件代码：

<van-field
  is-link
  readonly
  name="datetimePicker"
  label="过期时间"
  :placeholder="addTeamData.expireTime??'点击选择过期时间"
  @click="showPicker = true"
1>
<van-popup v-model:show="showPicker" position="bottom">
<van-datetime-picker
  v-model="addTeamData.expireTime"
  @confirm="showPicker = false"
  type="datetime"
  title="请选择过期时间"
  :min-date="minDate"
/>

vant4 组件代码： 

<van-field
  is-link
  readonly
  name="datetimePicker"
  label="过期时间"
  :placeholder="currentDate[0] + '-' + currentDate[1] + '-' + currentDate[2]
  +''+ currentTime[0]+'：'+ currentTime[1]??'点击选择过期时间"
  @click="showPicker = true"
/>
<van-popup v-model:show="showPicker" position="bottom">
<van-picker-group
  title="请选择过期时间"
  ：tabs="['选择日期”，‘选择时间]”
  next-step-text="下一步"
  @confirm="showPicker = false"
  @cancel="onCancel"
  <van-date-picker
  V-model="currentDate"
  :min-date="minDate"
/>
	<van-time-picker v-model="currentTime"/>
</van-picker-group>

3、使用 Ant Design Vue 组件库，启动后显示 antd.css 不存在？

报错信息：路径 "ant-design-vue/dist/antd.css"不存在 css 文件。

原因是官方修改了样式文件的名称！现在这个 css 文件改名为 reset.css。

修改为：

import "ant-design-vue/dist/reset.css";

4、Vant UI 组件库引入的 tabs 组件报错

这是因为 vant 组件库的版本更新了，需要修改 packeage.json 文件里的 ant-design-vue 版本。

使用官方文档提供的最新命令下载：

npm i --save ant-design-vue@next

5、Vant UI 组件的 Dialog.componemets 失效

还是看官方文档：

https://vant-ui.github.io/vant/#/zh-CN/dialog#zu-jian-diao-yong

在 script setup 中导入 import { Dialog } from 'vant'; 。

然后加入 const VanDialog = Dialog.Component;。

这里强烈建议大家 对照官方文档的语法和使用方式来编写代码，因为组件库升级了，很多时候视频里的写法无法兼容！

二、代码问题

1） 比如 toast 引入 popup 之后，只显示白色？

这时候需要手动 import 'vant/es/toast/style';

因为在不引用 popup 的时候，默认的样式 index.css 是可以让 toast 正常显示，而引入 popup 后被 popup 的 background 样式所覆盖掉，从而显示白色。

2）为什么替换页面样式布局（界面配置）不生效？

点击右边蓝色的设置图标，可以打开抽屉来设置样式，调整完样式后直接复制配置即可。

复制配置后，粘贴到 defaultSettings.ts。

把 app.tsx 的 initialState?.settings 换成 defaultSetting 即可生效。

3）为什么页面只有文本，格式乱码（或组件紧凑居中在页面上）？

在 main.ts 引入 'vant/lib/index.css'后，把其他的样式文件都删了。

注释掉(或删除)在 main.ts 中的import./style.css。

4）md 编辑器全屏后有其他组件的出现？

:deep(.bytemd-fullscreen.bytemd) {
  z-index: 100;
}

三、其他问题

1）页面右下角没有"小米饭图标"怎么没了？或者为什么打开 umi ui（小米饭图标） 后，所有的组件都是空白的？

因为项目前端使用的 umi 框架在持续升级，所以现在不建议使用 umi ui 了，兼容性不好。鱼皮的项目中也没有用到，可以忽略，不影响后续的学习。

2）为什么登录时密码框有两个“眼睛”？

这是因为 ie 和 edge 浏览器会自带眼睛，所以才会出现这个问题。

解决方案：

<style>
      /*去除ie edge的密码框默认的快速清除钮（X图标）以及密码文字显示钮*/
      input[type="password"]::-ms-reveal{
        display: none;
      }
      input[type="password"]::-ms-clear{
        display: none;
      }
      input[type="password"]::-o-clear{
        display: none;
      }
</style>

---

以上就是本次的学习分享，希望对大家有所帮助，关注我！日更分享有用干货！！！

如果有疑问的可以评论提出来~