在自己的vue项目中使用luckysheet

按照官网的教程总是报$的错误,还有也不符合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目录里就可以了,怀疑是不能访问上级目录(只是怀疑,没有测试)

效果如下

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/1560642.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

apache.poi读取.xls文件时The content of an excel record cannot exceed 8224 bytes

目录 问题描述版本定位&#xff1a;打印size最大的Record定位&#xff1a;RefSubRecord解决代码 问题描述 使用apache.poi读取.xls文件时有The content of an excel record cannot exceed 8224 bytes的报错。待读取的文件的内容也是通过apache.poi写入的&#xff0c;我的文件修…

Vue3 集成Monaco Editor编辑器

Vue3 集成Monaco Editor编辑器 1. 安装依赖2. 使用3. 效果 Monaco Editor &#xff08;官方链接 https://microsoft.github.io/monaco-editor/&#xff09;是一个由微软开发的功能强大的在线代码编辑器&#xff0c;被广泛应用于各种 Web 开发场景中。以下是对 Monaco Editor 的…

继承--C++

文章目录 一、继承的概念及定义1、继承的概念 二、继承定义1、定义格式2、继承基类成员访问方式的变化3、继承类模板 三、基类和派生类间的转换1、继承中的作用域2、隐藏规则&#xff1a; 四、派生类的默认成员函数1、4个常见默认成员函数2、实现⼀个不能被继承的类 五、继承与…

基于s32ds平台指定变量储存位置

开启一段ram空间 打开ld文件 配置一段ram空间 开辟一个段 .shareable_data1 : {. ALIGN(4);KEEP(*(.mcal_shared_data1)) . ALIGN(4);} > int_sram_shareable1定义一个变量并将变量指定在段中 volatile uint32 u32SbcmGenState __attribute__((section (".mcal_s…

Spring MVC:精通JSON数据返回的几种高效方式

前言 在实际开发中&#xff0c;我们在前后端传送数据通常使用Json格式&#xff0c;而在Spring MVC中返回Json格式的方式有多种&#xff0c;接下来我将介绍其中一些。 准备工作 为了演示Json格式的数据&#xff0c;我们准备一个实体类&#xff0c;例如User&#xff0c;这些可以测…

HUAWEI_HCIA_实验指南_Lib2.1_交换机基础配置

1、原理概述 交换机之间通过以太网电接口对接时需要协商一些接口参数&#xff0c;比如速率、双工模式等。交换机的全双工是指交换机在发送数据的同时也能够接收数据&#xff0c;两者同时进行。就如平时打电话一样&#xff0c;说话的同时也能够听到对方的声音。而半双工指在同一…

Json-Rpc框架(项目设计 —— 服务端客户端 模块功能划分简介)

阅读导航 引言一、理解项目功能⭕分布式RPC服务发现/注册/订阅/创建 结构图⭕项目三大核心功能 二、服务端模块划分简介三、客户端模块划分简介 引言 在上一篇文章中&#xff0c;我们深入探讨了Json-Rpc框架中不可或缺的序列化与反序列化利器——JsonCpp库。 在本篇文章中&am…

Github 2024-10-11 Java开源项目日报 Top9

根据Github Trendings的统计,今日(2024-10-11统计)共有9个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Java项目9TypeScript项目1Vue项目1C++项目1JeecgBoot 企业级低代码开发平台 创建周期:2062 天开发语言:Java, Vue协议类型:Apache License 2.…

性能测试流程规范测试准备阶段

目录 1.目的 2.工作内容 3.材料 1)《性能测试脚本规范》。 2)《性能测试参数文件检查备份指南》。 3)《性能测试资源监控操作指南》。 4)《脚本开发参数化》。 5)《脚本开发异常捕获处理》。 6)测试脚本文件。 7)模拟器代码文件。 8)生产环境参数配置文件。 9)《XX…

解决 IntelliJ IDEA 运行时 “Command line is too long“ 问题

文章目录 文章标题&#xff1a;解决 IntelliJ IDEA 运行时 "Command line is too long" 问题简介问题描述解决方案代码示例代码示例1&#xff1a;使用JAR Manifest代码示例2&#xff1a;使用Classpath File代码示例3&#xff1a;优化项目依赖 结论进一步的资源 文章标…

【C++入门篇 - 1】:C++编程等演示环境介绍

文章目录 C编程等演示环境介绍VS2022的下载创建项目运行一个基本程序 Visual Studio中程序的调试方法普通的断点调试调试时查看内存中的内容调试中查看反汇编窗口 开启isual Studio 2019对C最新标准的编译支持 C编程等演示环境介绍 VS2022的下载 官网&#xff1a;VS下载官网 …

ProtoBuf 安装

一、ProtoBuf 在 window 下的安装 1.1、下载 ProtoBuf 编译器 下载地址&#xff1a;https://github.com/protocolbuffers/protobuf/releases 可以不⽤下载最新版本&#xff0c;具体的下载根据电脑情况选择。 下载之后将压缩包解压到本地⽬录下。解压后的⽂件内包含 bin、in…

利用网络流量分析仪进行网络故障排除:提升IT运维效率的关键工具

目录 一、什么是网络流量分析仪&#xff1f; 主要功能&#xff1a; 二、为什么网络流量分析仪在网络故障排除中如此重要&#xff1f; 三、实际案例&#xff1a;使用网络流量分析仪快速排查网络故障 案例一&#xff1a;流量拥塞导致的带宽不足 案例二&#xff1a;服务器响…

【Kubernets】容器网络基础二:通讲CNI(Container Network Interface)容器网络接口实现方案

文章目录 背景知识Underlay网络Overlay网络一、基本概念二、工作原理三、实现方案四、应用场景 两者对比示意图 CNI实现有哪些&#xff1f;FlannelFlannel 的工作原理Flannel 的主要组件数据传输机制总结 Calico一、架构基础二、核心组件与功能三、路由与数据包转发四、安全策略…

精华版80页PPT | 智能工厂数字化顶层架构

项目背景及需求理解 随着科技的飞速发展&#xff0c;智能工厂的概念逐渐从理论走向实践&#xff0c;成为制造业转型升级的重要方向。方案对智能工厂数字化顶层架构进行全面介绍。在当前的市场环境下&#xff0c;消费者需求日益多样化、个性化&#xff0c;对产品质量、价格、环…

PMP--冲刺题--解题--121-130

文章目录 9.资源管理--1.规划资源管理--可以直接使用排除法&#xff0c;A和C的做法都是逃避了组织和参与这个会议&#xff0c;D组织多次会议的做法明显不够高效。121、 [单选] 项目经理被指派与技术和运营团队一起负责现有产品新版本的设计。项目经理组织一次联合需求会议&…

【拥抱AIGC】应该如何衡量AI辅助编程带来的收益

本文主要介绍了如何度量研发效能&#xff0c;以及AI辅助编程是如何影响效能的&#xff0c;进而阐述如何衡量AI辅助编程带来的收益。 理解度量&#xff1a;有效区分度量指标 为了帮助研发团队更好地理解和度量研发效能&#xff0c;可以将指标分为三类&#xff1a;能力和行为指…

【C++入门篇 - 3】:从C到C++第二篇

文章目录 从C到C第二篇new和delete命名空间命名空间的访问 cin和coutstring的基本使用 从C到C第二篇 new和delete 在C中用来向系统申请堆区的内存空间 New的作用相当于C语言中的malloc Delete的作用相当于C语言中的free 注意&#xff1a;在C语言中&#xff0c;如果内存不够…

【数学分析笔记】第5章第1节 微分中值定理(1)

5. 微分中值定理及其应用 5.1 微分中值定理 5.1.1 极值与极值点 【定义5.1.1】 f ( x ) f(x) f(x)定义域为 ( a , b ) (a,b) (a,b)&#xff0c; x 0 ∈ ( a , b ) x_0\in(a,b) x0​∈(a,b)&#xff0c;若 ∃ O ( x 0 , ρ ) ⊂ ( a , b ) \exists O(x_0,\rho)\subset(a,b) ∃…

web基础-攻防世界

get-post 一、WP &#xff08;题目本质&#xff1a;get与post传参方法&#xff09; 用 GET 给后端传参的方法是&#xff1a;在?后跟变量名字&#xff0c;不同的变量之间用&隔开。例如&#xff0c;在 url 后添加/&#xff1f;a1 即可发送 get 请求。 利用 hackbar 进行…