UNPKG

@vuemap/vue-amap-extra

Version:

@vuemap/vue-amap扩展库,包含threejs相关图层

155 lines (150 loc) 3.68 kB
'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); var vue = require('vue'); var vueAmap = require('@vuemap/vue-amap'); var ThreeVideo = require('./ThreeVideo.js'); const _hoisted_1 = ["src"]; var script = /* @__PURE__ */ vue.defineComponent({ ...{ name: "ElAmapThreeVideo", inheritAttrs: false }, __name: "ThreeVideo", props: vueAmap.buildProps({ video: { type: [String, Array, HTMLVideoElement], required: true }, videoTranslate: { type: Object, default() { return { x: 0, y: 0, z: 0 }; } }, videoWidth: { type: Number }, // 视频宽度 videoHeight: { type: Number }, // 视频高度 canvas: { type: Object }, position: { type: Array, required: true }, altitude: { type: Number, default: 0 }, rotation: { type: Object }, scale: { type: [Number, Array], default: 1 }, angle: { type: Number, default: 0 }, opacity: { type: Number, default: 1 }, // 透明度,默认 1 alwaysFront: { type: Boolean, default: false } //是否一直面朝屏幕 }), emits: ["init", "click", "mousemove", "mouseover", "mouseout"], setup(__props, { expose: __expose, emit: __emit }) { const emits = __emit; let $amapComponent; const videoUrlList = vue.ref([]); const videoRef = vue.ref(); const { $$getInstance, parentInstance } = vueAmap.useRegister((options, parentComponent) => { const urlType = Object.prototype.toString.call(options.video); if (urlType === "[object String]") { videoUrlList.value = [options.video]; } else if (urlType === "[object Array]") { videoUrlList.value = options.video; } if (videoUrlList.value.length > 0) { options.video = videoRef.value; } $amapComponent = new ThreeVideo.default(parentComponent); return new Promise((resolve) => { vue.nextTick(() => { $amapComponent.init(options, this).then(() => { resolve($amapComponent); }); }); }); }, { emits, destroyComponent() { if ($amapComponent && (parentInstance == null ? void 0 : parentInstance.$amapComponent)) { if (!parentInstance.isDestroy) { $amapComponent.remove(); } $amapComponent.destroy(); $amapComponent = null; } } }); const $$start = () => { $amapComponent.start(); }; const $$pause = () => { $amapComponent.pause(); }; __expose({ $$getInstance, $$start, $$pause }); return (_ctx, _cache) => { return vue.openBlock(), vue.createElementBlock( "video", { ref_key: "videoRef", ref: videoRef, style: { "display": "none" }, muted: "", loop: "", autoplay: "", crossOrigin: "anonymous" }, [ (vue.openBlock(true), vue.createElementBlock( vue.Fragment, null, vue.renderList(videoUrlList.value, (item) => { return vue.openBlock(), vue.createElementBlock("source", { key: item, src: item, type: "video/mp4" }, null, 8, _hoisted_1); }), 128 /* KEYED_FRAGMENT */ )) ], 512 /* NEED_PATCH */ ); }; } }); exports.default = script; //# sourceMappingURL=ThreeVideo.vue2.js.map