在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编程式导航实现页面跳转时不会再出现问题!

相关推荐
har01d4 天前
【CSS3】录音中。。。
前端·css·vue.js·vue·vue3·css3
知识分享小能手5 天前
Vue3 学习教程,从入门到精通,Vue 3 + Tailwind CSS 全面知识点与案例详解(31)
前端·javascript·css·vue.js·学习·typescript·vue3
青柠代码录13 天前
【ElementPlus】深入探索ElementPlus:前端界面的全能组件库
前端·vue3·elementplus
知识分享小能手15 天前
Vue3 学习教程,从入门到精通,Vue3 中使用 Axios 进行 Ajax 请求的语法知识点与案例代码(23)
前端·javascript·vue.js·学习·ajax·vue·vue3
咔咔一顿操作15 天前
Vue 3 入门教程7 - 状态管理工具 Pinia
前端·javascript·vue.js·vue3
汪叽家的兔子羡17 天前
vue模块化导入
前端·javascript·vue.js·typescript·vue3·vue2·vite
朝阳3919 天前
vue3【组件封装】超级表单 S-form.vue
vue3·组件封装
清岚_lxn24 天前
vue3 antd modal对话框里的前端html导出成pdf并下载
pdf·vue3·html2canvas·jspdf
伍哥的传说1 个月前
Vue3 Anime.js超级炫酷的网页动画库详解
开发语言·前端·javascript·vue.js·vue·ecmascript·vue3
科技D人生1 个月前
Vue.js 学习总结(18)—— Vue 3.6.0-alpha1:性能“核弹“来袭,你的应用准备好“起飞“了吗?!
前端·vue.js·vue3·vue 3.6·vue3.6