我把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”类名和渲染正确。
1条答案
按热度按时间juud5qan1#
尝试在
mounted
钩子中导入: