在vue3中使用datav完整引入时卡在加载页面的解决方法

文件修改

文件:node_modules/@dataview\datav-vue3/package.json

javascript 复制代码
  // "module": "./es/index.js",
  "module": "./es/index.mjs",  // 修改后

使用完整引入,需要为datav配置文件添加相应方法

文件:node_modules/@dataview\datav-vue3/es/index.mjs

javascript 复制代码
// 全局注册方法
// 存在问题,未对setClassPrefix方法处理
// D、E、G...符号代表BorderBox1、BorderBox10、BorderBox11...组件名称
export default {
  install: (app, options) => {
    const components = [
	  D,
	  E,
	  G,
	  I,
	  K,
	  g,
	  C,
	  P,
	  h,
	  k,
	  u,
	  w,
	  z,
	  N,
	  Q,
	  S,
	  U,
	  W,
	  Y,
	  _,
	  oo,
	  eo,
	];
	components.map((component) => {
		app.component(component.name, component);
	});
  }
}

在utils中添加文件datav.js

javascript 复制代码
import * as DataV from '@dataview/datav-vue3';

// 随便写即可
export default function (app) {
  const module = Object.keys(DataV);
  for (const m of module) {
    if (m === 'Loading') continue; // 因为项目饿了么注册过这个组件,就不用datav提供的,跳过本次循环
    app.component(DataV[m].name, DataV[m]);
  }
}

main.js中全局引入修改:

javascript 复制代码
import DataV from '@/utils/datav';
const app = createApp(App)
app.use(DataV);


即可解决!

若出现TypeError: Cannot read properties of null (reading '$el')报错,参考这篇文章的解决方法:

若依vue使用DataV设计大屏报错多是版本问题

报错问题Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node,参考这篇文章的解决方法:

datav+vue3 引用报错,跳转页面报错,DOMException: Failed to execute 'removeChild' on 'Node': The node to be remov

解决上述两种报错以后,使用vue3编程式导航实现页面跳转时不会再出现问题!

相关推荐
ldj202010 天前
vue3整合element-plus
vue3
陈嘿萌10 天前
probability tensor contains either `inf`, `nan` or element < 0
报错·模型下载·安装qwen大模型·校验错误
夜空孤狼啸14 天前
前端常用拖拽组件库(vue3、react、vue2)
前端·javascript·react.js·typescript·前端框架·vue3
sunshine_程序媛15 天前
vue3中的watch和watchEffect区别以及demo示例
前端·javascript·vue.js·vue3
秋意零15 天前
【排坑指南】MySQL初始化后,Nacos与微服务无法连接??
运维·数据库·mysql·微服务·nacos·报错
meng半颗糖16 天前
vue3 双容器自动扩展布局 根据 内容的多少 动态定义宽度
前端·javascript·css·vue.js·elementui·vue3
3D虚拟工厂16 天前
3D虚拟工厂
3d·vue3·blender·数字孪生·three.js
霸王蟹20 天前
前端项目Excel数据导出同时出现中英文表头错乱情况解决方案。
笔记·学习·typescript·excel·vue3·react·vite
佚名猫24 天前
vue3+vite+pnpm项目 使用monaco-editor常见问题
前端·vue3·vite·monacoeditor
技术闲聊DD1 个月前
Vue3学习(4)- computed的使用
vue3·computed