dy-admin-manager/src/layout/components/instructions.vue

<template>
  <div>
    <el-button @click="showInstructions">说明书</el-button>
    <div class="instructions" v-resize="onResize" v-show="isShow">
      <iframe
        id="iframeId"
        :src="url"
        frameborder="0"
        class="pc iframe"
        width="100%"
        :height="formeHeight"
      >
      </iframe>
    </div>
  </div>
</template>
<script>
import resize from "vue-resize-directive";
const defaultSettings = require("@/settings.js");
export default {
  directives: {
    resize,
  },
  data() {
    return {
      url: defaultSettings.instructions+'/#g=1&p=新建乐团',
      isShow: false,
    };
  },
  mounted() {
    document.querySelector(".instructions")?.offsetHeight
  },
  methods: {
    onResize(e) {
      console.log(e);
    },
    showInstructions() {
      this.isShow = !this.isShow;
    },
  },
  computed: {
    formeHeight() {
      return document.querySelector(".instructions")?.offsetHeight+'px';
    },
  },
};
</script>
<style lang="scss">
.iframeId {
  width: 100%;
}
.instructions {
  background-color: #fff;
  width: 100%;
  position: fixed;
  z-index: 9999;
  bottom: 0;
  left: 0;
  border: 1px solid #ccc;
  min-height: 300px;
}
</style>