首页 > 其他分享 >vant3升级vant4后,使用Toast、Dialog报样式不存在异常解决方法

vant3升级vant4后,使用Toast、Dialog报样式不存在异常解决方法

时间:2024-08-22 16:31:01浏览次数:8  
标签:Toast style name show vant4 vant3 dialog es vant

异常现象:

vant3升级vant4,直接采用v4的方法使用showToast/showDialog,但直接就报错了,如下:

[vite] Internal server error: Failed to resolve import "E:/git_sh/project_code/node_modules/vant/es/show-confirm-dialog/style" from "src\service\index.ts". Does the file exist?  

异常分析:

查看node_modules目录中,vant库中只有一个toast,没有showToast,故,自然找不到 /node_modules/vant/es/show-confirm-dialog/style 这个文件。

感觉是vant4的bug,那就需要我们改配置来解决这个问题了。

处理方案:

修改vite.config.ts文件:

export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: "vant",
          esModule: true,
          resolveStyle: name => {
            //v3 return `../es/${name}/style`;
            //v4
            if (name == "show-toast" || name == "show-loading-toast") {
              return `../es/toast/style`;
            } else if (name == "show-dialog" || name == "show-confirm-dialog") {
              return `../es/dialog/style`;
            } else {
              return `../es/${name}/style`;
            }
          }
        }
      ]
    }),
...

按这个修改配置,就能解决前边找不到样式文件的报错了。

希望后边vant官方能解决这个bug,现在也只能遇到具体问题具体分析处理了。

标签:Toast,style,name,show,vant4,vant3,dialog,es,vant
From: https://www.cnblogs.com/xyyt/p/18374136

相关文章

  • TOAST技术
    https://cloud.tencent.com/developer/article/1004455什么是TOAST技术TOAST是TheOversized-AttributeStorageTechnique的缩写,即行外存储,主要用于存储大字段的值。由于PostgreSQL块的大小是固定的(通常是8KB),且不允许行跨越多个页面,因此不可能存储非常大的字段值。为了突破这个......
  • 超简单!vue3+vant4+pinia+vue-router+mockjs移动端实现水果商城项目【原创】
    ......
  • Simple WPF: WPF使用Windows API发送Toast通知
    最新内容优先发布于个人博客:小虎技术分享站,随后逐步搬运到博客园。创作不易,如果觉得有用请在Github上为博主点亮一颗小星星吧!以前看到Windows10的气泡通知觉得很有意思,但是一直不知道该如何实现。最近一次上网冲浪过程中偶然的机会看到了相关资料就自己来试试。本文介绍了在WPF......
  • Android中自定义Toast文字大小
    在Android开发中,Toast是一种轻量级的提示框,用于在屏幕上显示临时消息。一般情况下,Toast显示的文字大小是固定的,无法直接改变。但是,我们可以通过一些方法来实现在Toast中显示不同大小的文字。方法一:使用自定义布局创建custom_toast.xml布局文件,如:<?xmlversion="1.0"encoding......
  • Windows11系统WmsToastApi.dll文件丢失问题
    其实很多用户玩单机游戏或者安装软件的时候就出现过这种问题,如果是新手第一时间会认为是软件或游戏出错了,其实并不是这样,其主要原因就是你电脑系统的该dll文件丢失了或没有安装一些系统软件平台所需要的动态链接库,这时你可以下载这个WmsToastApi.dll文件(挑选合适的版本文件)把......
  • Toast自定义
    一、创建布局文件toast.xml<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="wrap_content"android:layout_height="wra......
  • Android Toast弹出消息在指定位置(setGravity)
    importandroid.widget.Toastimportandroid.view.Gravity默认Toast是显示在底部的,可以通过以下方法让其显示在顶部正中Toasttoast=Toast.makeText(SearchActivity.this,"取消关注失败",Toast.LENGTH_SHORT);toast.setGravity(Gravity.CENTER,0,0);toast.show();这样......
  • vue3 vant4 h5图片上传时压缩
    代码如下upload组件的afterRead方法:constafterRead=asyncfile=>{file.status="uploading";file.message="上传中...";const{data}=awaitupLoaderImg(file.file);//使用上传的方法。file.fileif(data){file.status="done&q......
  • vue3 使用vant4中的List分页加载时,会回滚到页面顶部
    问题项目中使用vue3+vant4,列表页使用了List来做列表加载,代码如下:<van-listv-model:loading="loading":finished="finished"finished-text="没有更多了"@load="onLoad"><divv-if="list&&list.length"class=......
  • vue3 + vant4 checkbox多选弹框
    实现效果代码如下多选组件DictSelect.vue<template><van-popup:show="showPicker"position="bottom":style="{height:'34vh'}"><divclass="con"><divclass="confirmBtns"&......