Vue中如何正确导入js-cloudimage-360-view并实现正常渲染

问题原因 #

脚本在页面初始加载时会自动扫描并初始化所有带cloudimage-360类的DOM元素，但Vue组件的DOM是在组件mounted阶段才动态渲染到页面的，此时脚本的自动扫描流程已经结束，因此无法识别组件内的目标元素。

方案1：CDN引入方式适配Vue组件 #

在组件的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() {
        // 确保脚本已加载后，手动初始化所有cloudimage-360元素
        if (window.Cloudimage360) {
            // 方式1：初始化页面中所有未被处理的cloudimage-360元素
            window.Cloudimage360.init();
            // 方式2：仅初始化当前组件内的目标元素（更精准）
            // window.Cloudimage360.init(document.getElementById('gurkha-suv'));
        }
    }
}
</script>

方案2：npm包引入方式适配Vue组件 #

安装包后，手动导入并在组件挂载时初始化，同时记得引入样式：

1. 先安装依赖：

npm install js-cloudimage-360-view --save

2. 组件内使用：

<template>
    <div
        ref="threeSixty"
        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>
import Cloudimage360 from 'js-cloudimage-360-view';

export default {
    name: "ShowComponent",
    mounted() {
        // 初始化当前组件内的目标元素
        Cloudimage360.init(this.$refs.threeSixty);
    },
    beforeUnmount() {
        // 可选：销毁实例避免内存泄漏
        if (this.$refs.threeSixty?.cloudimage360) {
            this.$refs.threeSixty.cloudimage360.destroy();
        }
    }
}
</script>

<style scoped>
/* 导入组件所需样式 */
@import 'js-cloudimage-360-view/dist/css/cloudimage-360.min.css';
</style>

内容的提问来源于stack exchange，提问作者king eugene