Vue 360懸浮球是一款可以在頁面中以全景模式或者圖片模式展現圖片的插件。通過懸浮球的形式，可以點擊進入全景模式查看圖片的全貌，也可以點擊查看縮略圖、圖片信息等等。這個插件可以用來提高頁面的交互性，讓用戶更好地了解展示的圖片。

<template>
<div class="vue-360">
<div class="vue-360-float-ball">
<div class="vue-360-ball-inner">
<img class="vue-360-ball-img" :src="ballImg">
</div>
<ul class="vue-360-ball-info">
<li class="vue-360-ball-info-item" v-for="(item, key) in ballInfo" :key="key">
{{ item.label }}：{{ item.value }}
</li>
</ul>
</div>
<div class="vue-360-modal" v-show="showModal">
<button class="vue-360-modal-close" @click="toggleModal(false)">×</button>
<img class="vue-360-modal-img" :src="modalImg">
</div>
<div class="vue-360-scene" v-show="showScene">
<pano :pano="sceneUrl"></pano>
<button class="vue-360-scene-close" @click="toggleScene(false)">關閉全景</button>
</div>
</div>
</template>

以上是Vue 360懸浮球的模板代碼。可以看到組件包括懸浮球、全景圖、圖片信息等多種功能，可以根據需求進行擴展和定制。在模板中，使用了Vue中的v-for、v-show等指令，還有自定義的toggleModal、toggleScene等函數，可以控制全景圖和模態框的顯示和隱藏。

在Vue中，需要在組件中進行數據和事件的綁定，通過這些綁定來實現懸浮球的交互和功能。

<script>
export default {
name: 'Vue360',
props: {
ballImg: String,
ballInfo: Array,
modalImg: String,
sceneUrl: String,
},
data() {
return {
showModal: false,
showScene: false,
};
},
methods: {
toggleModal(show) {
this.showModal = show;
},
toggleScene(show) {
this.showScene = show;
},
},
};
</script>

在Vue360組件中定義了props屬性，用于接收父組件傳遞過來的參數，例如ballImg、ballInfo等。此外，定義了data屬性，用于控制全景圖和模態框的顯示和隱藏。methods屬性定義了toggleModal和toggleScene函數，通過調用這兩個函數來實現全景圖和模態框的顯示和隱藏。

Vue 360懸浮球可以應用在各種網站中，如房產銷售網站、旅游景點展示網站、藝術品展示網站等等。不僅可以讓用戶更好地了解展示的物品，還可以提升頁面的交互性和美感，是一款非常實用的Vue插件。