Vue Zrender 应用一

先上问题：

SyntaxError: The requested module '/node_modules/.vite/deps/zrender.js?v=bf83ea43' does not provide an export named 'default'

原来我的引用是这么写的：import zrender from ‘zrender’

两种解决方法：

第一种：

import { defineComponent ,ref, onMounted,getCurrentInstance} from 'vue';

import { init, Rect, Line, Text, Group ,Circle} from 'zrender';

zrenderInit() {
const Obj2 = document.getElementById('canvas1'); //zrender取元素
const domOptions = { width: 500, height: 500 };
const zRenderDom = init(Obj2 , domOptions);
drawCircle();
zRenderDom.add(group);

}

第二种：

import * as zrender from 'zrender'

init() {

zr = zrender.init(document.getElementById('zrender-canvas'))

group = new zrender.Group()

drawCircle()

zr.add(this.group)

Vue Zrender 应用一相关推荐

vue+zrender实现医院体温单
项目背景医院医护项目需求,需要用H5做一个通用的体温单项目演示链接版本一版本二项目代码简介由vue-cli4脚手架快速搭建生成,主要代码都在thermometer.vue文件里面,后续修改 ...
使用vue+zrender绘制体温单三测单(2)
预览地址 http://132.232.99.217:8090/#/ 上期我们说了如何创建项目并把各个项目的文件结构创建好后这期我们来说如何画出图中代写线段首先我们在src/components/R ...
使用vue+zrender绘制体温单三测单(1)
先上预览地址 http://132.232.99.217:8090/#/ 1.创建项目使用vue init webpack temperaure 创建一个vue项目然后安装axios zrende ...
关于java的提问单_使用vue+zrender绘制体温单三测单(1)
1.创建项目使用vue init webpack temperaure 创建一个vue项目然后安装axios zrender 命令分别是 npm install axios -S npm ins ...
体温单怎么画体温表_准备好承受体温-很多
体温单怎么画体温表重点 (Top highlight) Last week, I dropped by my recently reopened gym to restart my lapsed ...
【ZRender 渲染引擎 - 贰】 | Vue 框架集成与绘制其他图元
theme: cyanosis 持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第 8 天,点击查看活动详情 1. Vue 中使用 ZRender 上一篇中,我们通过最原始的方式 ...
layui框架和vue哪个好_小颖的前端框架
前端已经不再像以前一样就是简单的写写页面和调调样式而已,现在的前端越来越复杂,知识点越来越丰富. 要做WEB前端,就需要知道前端到底是什么,需要学习那些知识:前端至少要懂的三个部分:HTML,CSS, ...
这个【vue】项目，让我明白了…
目标熟悉vue项目的注意点了解一些插件在vue项目中的使用写在前面写在前面:最近一直感觉对vue好像没有想象中的那么熟悉,对vue底层原理的理解还是若隐若现,于是模糊的自己上手了个vue项目, ...
Vue 之 echarts 图表数据可视化的基础使用（简单绘制各种图表、地图）
Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 目录 Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 一.简单介绍二.环境搭建三.使 ...

Vue Zrender 应用一

Vue Zrender 应用一相关推荐

最新文章

热门文章