javascript 如何正确导入js文件

sz81bmfz  于 2023-03-21  发布在  Java
关注(0)|答案(1)|浏览(144)

我把js-cloudimage-360-view(https://github.com/scaleflex/js-cloudimage-360-view)导入index.html,但是vue模板中的代码没有渲染成功,什么都没有显示,chrome控制台没有报错。在我的测试中,当代码粘贴在index.html中时可以工作,但是在myComponent.vue中失败。如何导入js-cloudimage-360-view.min.js功能齐全
在index.html中导入js

<div id="app"></div>
<!-- built files will be auto injected -->
<script src="https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/latest/js-cloudimage-360-view.min.js?func=proxy"></script>
</body>
</html>

***.vue文件失败

<template>
    <div
        id="gurkha-suv"
        class="cloudimage-360"
        data-amount-x="73"
        data-filename-x="orange-{index}.jpg"
        data-folder="https://scaleflex.cloudimg.io/v7/demo/suv-orange-car-360/"
    ></div>
</template>

<script>
export default {
    name: "ShowComponent",
    mounted() {

    }
}
</script>

我尝试使用npm模块,但文档没有显示如何在vue中正确导入插件的方法。(https://www.npmjs.com/package/js-cloudimage-360-view)我直接将代码复制粘贴到index.html而不是vue(在#app div之外),代码工作正常

<div id="app"></div>
<div
        id="gurkha-suv"
        class="cloudimage-360"
        data-amount-x="73"
        data-filename-x="orange-{index}.jpg"
        data-folder="https://scaleflex.cloudimg.io/v7/demo/suv-orange-car-360/"
></div>
<!-- built files will be auto injected -->
<script src="https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/latest/js-cloudimage-360-view.min.js?func=proxy"></script>

我期待代码在vue中工作,这个js检测div与“cloudimage-360”类名和渲染正确。

juud5qan

juud5qan1#

尝试在mounted钩子中导入:

<template>
    <div
        id="gurkha-suv"
        class="cloudimage-360"
        data-amount-x="73"
        data-filename-x="orange-{index}.jpg"
        data-folder="https://scaleflex.cloudimg.io/v7/demo/suv-orange-car-360/"
    ></div>
</template>

<script>
export default {
    name: "ShowComponent",
    mounted() {
      const scriptEl = document.createElement("script");
      scriptEl.setAttribute(
        "src",
        "https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/latest/js-cloudimage-360-view.min.js?func=proxy"
      );
      scriptEl.async = true;
      document.head.appendChild(scriptEl);
    }
}
</script>

相关问题