@zhsz/cool-design-dv
Version:
81 lines (80 loc) • 2.12 kB
JavaScript
import { defineComponent, ref, onMounted, watchEffect, onUnmounted, openBlock, createElementBlock, normalizeStyle, unref, toDisplayString } from "vue";
import { uniqueId } from "lodash-es";
import { Viewer } from "photo-sphere-viewer";
import "photo-sphere-viewer/dist/photo-sphere-viewer.css";
const _hoisted_1 = ["id"];
const _hoisted_2 = {
key: 1,
absolute: "",
"top-0": "",
"left-0": "",
"wh-full": "",
"z-1": "",
"bg-hex-f2f2f2": "",
"f-c-c": ""
};
const __default__ = defineComponent({
name: "vr-preview"
});
const _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
props: {
url: { default: "" },
token_header: {},
token: {},
style: { default: {
width: "100%",
height: "100px"
} },
errorText: { default: "加载失败" }
},
setup(__props) {
const props = __props;
let viewer;
const vrRef = ref(null);
const vrId = uniqueId("vr_");
const hasError = ref(false);
onMounted(() => {
const headers = {};
if (props.token_header) {
headers[props.token_header] = props.token;
}
viewer = new Viewer({
container: vrId,
navbar: ["fullscreen"],
requestHeaders: headers
});
watchEffect(() => {
if (props.url) {
viewer.setPanorama(props.url).then(() => {
hasError.value = false;
}).catch((_e) => {
hasError.value = true;
window.console.log("error");
});
}
});
});
onUnmounted(() => {
if (viewer)
viewer.destroy();
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
style: normalizeStyle(props.style),
relative: ""
}, [
!hasError.value ? (openBlock(), createElementBlock("div", {
key: 0,
id: unref(vrId),
ref_key: "vrRef",
ref: vrRef,
"wh-full": ""
}, null, 8, _hoisted_1)) : (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(props.errorText), 1))
], 4);
};
}
});
export {
_sfc_main as default
};