实现krpano+js+vue交互，在vue中操作krpano中xml文件

原创

已于 2023-09-28 11:01:42 修改 · 747 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

于 2023-09-27 17:13:27 首次发布

1.传值交互
首先在创建的.js文件中定义handleHotspotClick方法在xml文件引入

// console.log('action.js文件');
import { ref } from 'vue';
export const hotspot = ref('');
export const xianshiqqq = ref('');
export const click =ref('');

export async function handleHotspotClick(code,qqq) {
  // console.log('热点被点击xml-js:', code,qqq);

  hotspot.value = code
  xianshiqqq.value =qqq
  if(hotspot.value==code){
    hotspot.value = code
    xianshiqqq.value =qqq
    click.value += 1
  }else{
    click.value='111'
    hotspot.value = code
    xianshiqqq.value =qqq
  }
 
  // 触发自定义事件，将 hotspot 值传递给 Vue 组件:
  const event = new CustomEvent('hotspotUpdated', { detail: hotspot.value,xxx:xianshiqqq.value,sss:click.value});
  window.dispatchEvent(event);

  return hotspot.value ,xianshiqqq.value,click.value;
}
window.hotspot = hotspot;
window.handleHotspotClick = handleHotspotClick;