[12天] Krpano 1.19 pr13 在VUE项目中使用

一、技术栈

• Krpano 1.19 pr13

• VUE3

• TypeScript

二、实践开始

2.1 准备好Krpano生成的vtour全景资源文件目录

关于Krpano的使用基础：Krpano 1.19 pr13前端全景初体验

Krpano生成的全景资源目录默认名为vtour

2.2 利用VUE-CLI建立一个VUE3项目

vue-cli建立vue3项目方法与过程不在本文范畴，略。

2.3 整合

 1. 将vtour全目录复制到vue app项目下的public目录,如： %vueappPath%public/vtour

2. 修改index.html

将全景JS文件tour.js引入到/public/index.html

<script src="./vtour/tour.js"></script>

这种引入方式没有模块化引入好，但限于Krpano自身没有提供模块化方案，没有更好的办法。

3. 编辑全景VUE组件

在src/components目录下新建Vtour.vue文件，并编写代码：

要注意embedpano方法中的xml文件路径写对

<template>
  <div class="vtour">
    <div :id="vtourId" class="vtour-context"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted } from 'vue';

export default defineComponent({
  name: 'Vtour',
  props: {
    msg: String,
  },

  setup() {

    const state = reactive({
      vtourId: 'vtour_' + new Date().toString()
    })

    onMounted(() => {
      const win = window as any
      win.embedpano({
        xml: '/vtour/tour.xml',
        target: state.vtourId,
        html5: 'auto',
        mobilescale: 1.0,
        passQueryParameters: true
      })
    })

    return {
      ...toRefs(state)
    }
  }

});
</script>

<style lang="scss" scoped>
.vtour{
  width: 800px;
  height: 600px;
  .vtour-context{
    height: 100%;
  }
}
</style>

然后在任意组件中使用该组件：

<template>
  <div class="vtour-page">
    <h1>这是一个全景组件使用页面</h1>
    <VtourVue></VtourVue>
  </div>
</template>
<script lang="ts" setup>
import VtourVue from '@/components/Vtour.vue';
</script>
<style lang="scss" scoped>
h1{
  margin: 0;
}
.vtour-page{
  background-color: #fff;
  height: 100vh;
}
</style>

如果顺的话，效果类似下面：

三、定制实践

定制实践： Krpano 1.19 pr13 定制实践