hi-ucs/front/src/views/instructionManual/index.vue

<template>
  <div class="father">
    <home-header></home-header>
    <div id="container" class="content">
      <div class="left">
        <div class="first-title-text" @click="showManual" :style="{ color: showManualFlag ? '#0058e1' : '' }">新手指引</div>
        <div class="first-title-text" @click="showManual" :style="{ color: !showManualFlag ? '#0058e1' : '' }">技术文档
        </div>
        <abilityDocTree :dataList="treeArray" @treeClick="treeClick" :clickData="clickData"></abilityDocTree>
      </div>
      <div class="right">
        <div v-if="showManualFlag">新手指引</div>
        <div v-else>
          <!-- 技术文档 -->
          <iframe name="iframeName" width="1000" height="800" id="iframeId" :frameborder="0"
            :src="clickData.doc"></iframe>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import HomeHeader from '@/views/home/components/header'
import abilityDocTree from './components/abilityDocTree'
import { selectOne } from '@/api/home'
import { ref, reactive, onMounted, nextTick, watch } from 'vue'
import { useStore } from 'vuex'
import { Empty, message } from 'ant-design-vue'
import { getDevelopDocTree } from '@/api/home'

const showManualFlag = ref(false)
const showManual = () => {
  showManualFlag.value = !showManualFlag.value
}

const clickData = ref({})
const treeClick = (item) => {
  showManualFlag.value = false;
  console.log('item---treeClick--------->', item);
  clickData.value = item;
}
let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库'];

const treeArray = ref([])
const getTreeData = () => {
  getDevelopDocTree({}).then((res) => {
    console.log('res------文档树------>', res);
    if (res.data.code !== 0) {
      return message.error(res.data.msg)
    }
    treeArray.value = res.data.data || [];
  }).catch((err) => {
    message.error(err)
  });
}

onMounted(() => {
  getTreeData()
  // loadPage()

})

var x = document.getElementById("iframeId");
console.log('x------------>', x);

watch(
  () => clickData.value,
  (val) => {
    if (val) {
      console.log('val-watch---clickData-------->', val);

      // clickData.value = val
      loadPage()
    }
  },
  {
    //如果加了这个参数，值为true的话，就消除了惰性，watch会在创建后立即执行一次
    //那么首次执行，val为默认值,preVal为undefined
    // immediate: true,
    //这个参数代表监听对象时，可以监听深度嵌套的对象属性
    //比如message是一个对象的话，可以监听到message.a.b.c，也就是message下的所有属性
    deep: true,
  }
)


// window.onload = () => loadPage()




const loadPage = () => {
  console.log('2222----onload-------->', 2222);
  if (!clickData.value.doc) {
    return;
  }

  // var _iframe = document.getElementById('iframeId').contentWindow.document.getElementsByTagName('aside')//iframe下的id
  // console.log('_iframe------------>', _iframe);

  var x = document.getElementById("iframeId");
  console.log('x------------>', x);

  if (x) {
    var y = (x.contentWindow || x.contentDocument);
    if (y.document) {
      y = y.document;
    }
    let asideDom = y.body.getElementsByClassName('.aside') && y.body.getElementsByClassName('.aside')[0]
    if (asideDom) {
      asideDom.style.right = 0;
    }
    console.log('asideDom------------>', asideDom);

    let contentDom = y.body.getElementsByClassName('.content') && y.body.getElementsByClassName('.content')[0];
    console.log('contentDom------------>', contentDom);
    if (contentDom) {
      contentDom.style.left = 0
      contentDom.style.right = '16rem'
    }

    //id和class获取方式有一点点区别
    // y.getElementById('元素id').style.fontSize = '12px'
  }
}

</script>

<style scoped lang="less">
.father {
  // overflow: hidden;
  height: 100%;
}

.first-title-text {
  cursor: pointer;
  font-size: 18px;
  color: #333;
  padding-bottom: 10px;

  &:hover {
    color: #0058e1;
  }
}

.content {
  width: 1240px;
  display: flex;
  justify-content: flex-start;
  margin: 0 auto;
  margin-top: 84px;
}

.left {
  width: 240px;
  padding: 20px;
  height: 600px;
  margin-right: 20px;
  background: rgba(244, 245, 248, 0.8);
  overflow-y: auto;
}

.right {
  width: 880px;
}

.sidebar {
  right: 0 !important;
}

.content {
  right: 16rem !important;
  left: 0 !important;
}
</style>