You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
132 lines
2.7 KiB
132 lines
2.7 KiB
<template>
|
|
<div
|
|
id="iframe-app"
|
|
>
|
|
<!-- <Wujie id="wujie-app"-->
|
|
<!-- width="100%"-->
|
|
<!-- sync-->
|
|
<!-- alive-->
|
|
<!-- degrade-->
|
|
<!-- height="100%"-->
|
|
<!-- :name="props.module_name"-->
|
|
<!-- :url="module_uri"-->
|
|
<!-- :props="props">-->
|
|
<!-- </Wujie>-->
|
|
<div
|
|
v-show="isLoading"
|
|
v-loading="isLoading"
|
|
class="loading"
|
|
element-loading-text="拼命加载中"
|
|
element-loading-spinner="el-icon-loading"
|
|
element-loading-background="rgb(255, 255, 255)"
|
|
/>
|
|
<iframe
|
|
id="iframe-cpn"
|
|
ref="program"
|
|
:src="auth_uri"
|
|
frameborder="0"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getToken } from '@/utils/auth'
|
|
import Wujie from 'wujie-vue2'
|
|
import { mapGetters } from 'vuex'
|
|
import Cookies from 'js-cookie'
|
|
export default {
|
|
components: {
|
|
Wujie
|
|
},
|
|
data() {
|
|
return {
|
|
props: {
|
|
auth_token: '',
|
|
module_name: ''
|
|
},
|
|
auth_uri: '',
|
|
isLoading: false
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['module_uri', 'module_name'])
|
|
},
|
|
watch: {
|
|
module_uri: {
|
|
handler: function(newVal) {
|
|
// this.isLoading = true
|
|
this.props.module_name = this.module_name
|
|
this.props.auth_token = getToken()
|
|
this.auth_uri = `${newVal}?auth_token=${window.encodeURIComponent(getToken())}&module_name=${this.module_name}&theme=${window.encodeURIComponent(Cookies.get('defaultTheme'))}`
|
|
// this.$nextTick(() => {
|
|
// this.$refs['program'].onload = this.postMessage
|
|
// console.log(loadedModels)
|
|
// if (loadedModels.indexOf(this.props.module_name) === -1) {
|
|
// setTimeout(() => {
|
|
// this.isLoading = false
|
|
// }, 1500)
|
|
// loadedModels.push(this.props.module_name)
|
|
// } else {
|
|
// this.isLoading = false
|
|
// }
|
|
// })
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
created() {
|
|
|
|
},
|
|
mounted() {
|
|
},
|
|
beforeDestroy() {
|
|
this.$refs['program'].onload = null
|
|
},
|
|
methods: {
|
|
postMessage() {
|
|
if (this.props.auth_token && this.props.module_name) {
|
|
this.$refs['program'].contentWindow.postMessage(this.props)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
#wujie-app {
|
|
overflow: hidden;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
#iframe-app {
|
|
overflow: hidden;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.loading {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
<style>
|
|
.app-main:has(#wujie-app) {
|
|
padding: 0!important;
|
|
}
|
|
</style>
|