按照官网的教程总是报$的错误,还有也不符合vue的规范,于是使用AI先生成了个demo
<template><div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>
</template><script>
export default {mounted() {this.init();},methods: {init() {console.log("初始化");if (typeof luckysheet !== "undefined") {var options = {container: "luckysheet", // luckysheet为容器idtitle: "luckysheet", // 表 头名lang: "zh" // 中文};console.log(luckysheet);luckysheet.create(options);} else { console.error("luckysheet 没有正确加载!"); }}}
};
</script>
但是会报TypeError: luckysheet.create is not a function的错误,且无法加载,并且编译器插件会报错,于是加上了两行注释忽略
<template><div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>
</template><script>
export default {mounted() {this.init();},methods: {init() {console.log("初始化");if (typeof luckysheet !== "undefined") {var options = {container: "luckysheet", // luckysheet为容器idtitle: "luckysheet", // 表 头名lang: "zh" // 中文};// eslint-disable-next-line no-undefconsole.log(luckysheet);// eslint-disable-next-line no-undefluckysheet.create(options);} else { console.error("luckysheet 没有正确加载!"); }}}
};
</script>
看到有大佬说需要在html页面中引入,于是在自己项目的index.html里进行了引入果然可以了
TypeError: luckysheet.create is not a function · Issue #8 · dream-num/luckysheet-vue · GitHub
之后想着改成本地导入,但是把dist文件夹内容放在项目的src中相对路径设置正确不能被成功加载,把dist文件夹整体放在index.html目录里就可以了,怀疑是不能访问上级目录(只是怀疑,没有测试)
效果如下