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

文件修改

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

  // "module": "./es/index.js",
  "module": "./es/index.mjs",  // 修改后

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

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

// 全局注册方法
// 存在问题，未对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

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中全局引入修改：

import DataV from '@/utils/datav';
const app = createApp(App)
app.use(DataV);

即可解决！

原文地址：https://blog.csdn.net/K_CRACKING/article/details/145296995

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！