|
@@ -1,64 +1,114 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <el-button class="instructionBtn" @click="showInstructions">说明书</el-button>
|
|
|
+ <el-button class="instructionBtn" @click="showInstructions"
|
|
|
+ >说明书</el-button
|
|
|
+ >
|
|
|
<!-- :w="w" -->
|
|
|
- <vue-drag-resize v-if="isShow" :snapToGrid="false" :isActive="true" :parentH="docY" :h="300" :z="1999" :y='y' id='instructions' @resizestop='onResizing' >
|
|
|
+ <vue-drag-resize
|
|
|
+ v-if="isShow"
|
|
|
+ :snapToGrid="false"
|
|
|
+ :isActive="true"
|
|
|
+ :parentH="docY"
|
|
|
+ :h="300"
|
|
|
+ :z="1999"
|
|
|
+ :y="y"
|
|
|
+ id="instructions"
|
|
|
+ @resizestop="resizestop"
|
|
|
+ @resizing="onResizing"
|
|
|
+ :preventActiveBehavior="true"
|
|
|
+ :isDraggable="false"
|
|
|
+ >
|
|
|
+ <div class="showBtnList">
|
|
|
+ <!-- <i class="el-icon-copy-document" @click="showInstructions"></i> -->
|
|
|
+ <i class="el-icon-minus minus" @click="showInstructions"></i>
|
|
|
+ </div>
|
|
|
+ <div class="iframeDiv" v-show="isResizing"></div>
|
|
|
<iframe
|
|
|
id="iframeId"
|
|
|
:src="url"
|
|
|
frameborder="0"
|
|
|
class="pc iframe"
|
|
|
- width="100%"
|
|
|
- :height="formeHeight"
|
|
|
+ :width="w"
|
|
|
+ :height="iframeHeight"
|
|
|
>
|
|
|
</iframe>
|
|
|
</vue-drag-resize>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import VueDragResize from 'vue-drag-resize'
|
|
|
+import VueDragResize from "vue-drag-resize";
|
|
|
const defaultSettings = require("@/settings.js");
|
|
|
+
|
|
|
export default {
|
|
|
- components:{
|
|
|
- 'vue-drag-resize': VueDragResize
|
|
|
+ components: {
|
|
|
+ "vue-drag-resize": VueDragResize,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- url: '/html/index.html'+'#g=1&p=新建乐团',
|
|
|
+ url: "/html/index.html" + "#g=1&p=新建乐团",
|
|
|
isShow: false,
|
|
|
- iframeHeight: document.querySelector(".instructions")?.offsetHeight||'300px',
|
|
|
- w:'',
|
|
|
- y:'',
|
|
|
- docY:''
|
|
|
+ iframeHeight:
|
|
|
+ document.querySelector("#instructions")?.offsetHeight || "300px",
|
|
|
+ w: "",
|
|
|
+ y: "",
|
|
|
+ docY: "",
|
|
|
+ isResizing: false,
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.w = document.documentElement.clientWidth || document.body.clientWidth
|
|
|
- this.docY = document.documentElement.clientHeight || document.body.clientHeight
|
|
|
- this.y =this.docY-300
|
|
|
+ this.w = document.documentElement.clientWidth || document.body.clientWidth;
|
|
|
+ this.docY =
|
|
|
+ document.documentElement.clientHeight || document.body.clientHeight;
|
|
|
+ this.y = this.docY - 300;
|
|
|
},
|
|
|
methods: {
|
|
|
+ resizestop(e) {
|
|
|
+ this.iframeHeight = Math.abs(e.height);
|
|
|
+ setTimeout(() => {
|
|
|
+ this.isResizing = false;
|
|
|
+ }, 800);
|
|
|
+ },
|
|
|
onResizing(e) {
|
|
|
- console.log(e)
|
|
|
- // this.iframeHeight = Math.abs(e.height)
|
|
|
+ console.log("开始移动");
|
|
|
+ this.isResizing = true;
|
|
|
},
|
|
|
showInstructions() {
|
|
|
this.isShow = !this.isShow;
|
|
|
},
|
|
|
+ showFullPage() {},
|
|
|
},
|
|
|
computed: {
|
|
|
- formeHeight() {
|
|
|
- return this.iframeHeight
|
|
|
+ key() {
|
|
|
+ this.isShow = false;
|
|
|
+ return this.$route.path;
|
|
|
},
|
|
|
},
|
|
|
watch:{
|
|
|
- iframeHeight(val){
|
|
|
+ key(val){
|
|
|
console.log(val)
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.iframeDiv {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1111;
|
|
|
+ filter: alpha(opacity=0);
|
|
|
+ opacity: 0;
|
|
|
+ background: transparent;
|
|
|
+ /*display: none;*/
|
|
|
+}
|
|
|
+</style>
|
|
|
<style lang="scss">
|
|
|
+.instructionBtn {
|
|
|
+ position: fixed;
|
|
|
+ right: 10px;
|
|
|
+ top: 200px;
|
|
|
+ z-index: 2000;
|
|
|
+}
|
|
|
.iframeId {
|
|
|
width: 100%;
|
|
|
}
|
|
@@ -71,4 +121,14 @@ export default {
|
|
|
left: 0;
|
|
|
border: 1px solid #ccc;
|
|
|
}
|
|
|
+.content-container {
|
|
|
+ width: 100% !important;
|
|
|
+ .showBtnList {
|
|
|
+ font-size: 20px;
|
|
|
+ position: absolute;
|
|
|
+ right: 20px;
|
|
|
+ top: 5px;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|