使用luckysheet报错：luckysheet.umd.js:26 Uncaught TypeError: $(...).mousewheel is not a function

vue-luckysheet踩坑百度方法:最终解决方案补充使用luckysheet报错：luckysheet.umd.js:26 Uncaught TypeError: $(…).mousewheel is not a function百度方法:但自己的VUE项目并没有引入jquery,并且自己下载了jquery 报错还是没有消失!!而且自己的问题是 excel 单元格无法点击后面查了有查,说

月下脆竹書閣

4296人浏览 · 2022-03-15 14:11:09

月下脆竹書閣 · 2022-03-15 14:11:09 发布

使用luckysheet报错：luckysheet.umd.js:26 Uncaught TypeError: $(…).mousewheel is not a function

在这里插入图片描述

百度方法:

在这里插入图片描述

但自己的VUE项目并没有引入jquery,并且自己下载了jquery 报错还是没有消失!!
而且自己的问题是 excel 单元格无法点击 后面查了有查,说是jquery引入无效.但所有的demo,官方示例都是如下引入的在这里插入图片描述

最终解决方案

将JS 文件在body下面引入

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="pragram" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="expires" content="0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
      <link rel='stylesheet' href='./plugins/css/pluginsCss.css' />
    <link rel='stylesheet' href='./plugins/plugins.css' />
    <link rel='stylesheet' href='./css/luckysheet.css' />
    <link rel='stylesheet' href='./assets/iconfont/iconfont.css' />   
    <title><%= htmlWebpackPlugin.options.title %></title>  
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
      <strong>（当您看到此页面,推荐使用Chrome浏览器获取最佳体验）</strong>
    </noscript>
    <div id="app"></div>
  </body>
  <script type="text/javascript" src="./plugins/js/plugin.js"></script>
  <script type="text/javascript" src="./luckysheet.umd.js"></script>
</html>

补充

为什么js要在body下面引入

1）js放在head里面，会堵塞DOM的生成。使用就无法获取通过选择器获取DOM元素进行操作。
2）代浏览器除了dom解析完成之后渲染外，为了提高用户体验，会有个first paint。部分内容将被解析并显示，也就是浏览器能够渲染不完整的dom。（如果js放在head里面，就不会出现DOM，所以无法提前渲染，而且提前渲染的前提是发送请求，同步的JS只会卡死GUI渲染，就算发生了paint ，也不会渲染到界面上）

jquery引入注意项

1） jquery 要在js文件引入之前
2）路径和引入都要写对,要不然会报$(...).error is not function

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^