侧边栏显示

常见的插件显示和多文档协同场景中，需要将内容侧边栏展示。在本例中，我们实现了一个侧边栏显示的文档，文档内容和布局会根据侧边栏的宽度动态进行调整。

参考实例

该实例主要实现了一个侧边栏显示的 word 文档，通过拖动侧边栏控件可灵活调节容器显示区域大小，文档内容会自适应调整。

实例中主要使用到以下 API：

参考代码

html

<template>
  <VPButton tag="button" text="立即体验" theme="brand" @click="show = true">
  </VPButton>
  <FullModal
    v-model:value="show"
    :loading="loading"
    title="侧边栏显示文档"
    @before-enter="onBeforeEnter"
  >
    <div class="resize__tip" :style="{ right: `calc(100vw - ${x}px)` }">
      拖动分隔线可以改变容器的宽度，WebOffice文档会自动调整布局以最佳比例显示。
    </div>
    <div
      ref="webofficeEl"
      :style="{ left: x + 'px' }"
      class="resize__weboffice"
    ></div>
    <div
      ref="resizeEl"
      :style="{ left: x + 'px' }"
      class="resize__control"
    ></div>
    <div class="resize__overlay"></div>
  </FullModal>
</template>

<script lang="ts" setup>
  import { watch, ref, nextTick } from 'vue'
  import VPButton from '@theme-components/VPButton.vue'
  import FullModal from '@/.vitepress/components/FullModal.vue'
  import { useWebOffice } from '@/.vitepress/composables/webOffice'
  import { useDraggable } from '@vueuse/core'

  // composition
  const { initWebOffice } = useWebOffice()

  // data
  let app: any
  const webofficeEl = ref()
  const show = ref(false)
  const loading = ref(true)
  const resizeEl = ref<HTMLElement | null>(null)

  const { x } = useDraggable(resizeEl, {
    initialValue: { x: 1200, y: 0 },
    preventDefault: true,
    stopPropagation: true
  })

  watch(x, () => {
    // 主动触发resize事件
    window.dispatchEvent(new Event('resize'))
    // 执行API，缩放视图以适应文档窗口的尺寸
    onFit()
  })
  function onBeforeEnter() {
    nextTick(async () => {
      loading.value = true
      app = await initWebOffice({
        officeType: 'w',
        fileId: `document_fields_template_${Date.now()}`,
        mount: webofficeEl.value,
        mode: 'simple',
        wpsOptions: {
          isShowDocMap: false, // 是否开启目录功能，默认开启
          isBestScale: true // 打开文档时，默认以最佳比例显示
        }
      })
      loading.value = false
    })
  }
  async function onFit() {
    // 对文档窗口大小进行调整后，是否缩放视图以适应文档窗口的尺寸
    app.ActiveDocument.ActiveWindow.View.Zoom.PageFit = 2
  }
</script>

<style scoped>
  .resize__tip {
    padding: 30px;
    font-size: 30px;
    line-height: 42px;
    position: absolute;
    left: 0;
    top: 60px;
    height: 100%;
  }
  .resize__weboffice {
    position: absolute;
    right: 0;
    top: 60px;
    height: 100%;
  }
  .resize__control:hover + .resize__overlay {
    display: block;
  }
  .resize__control:active + .resize__overlay {
    display: block;
  }
  .resize__control {
    position: absolute;
    top: 60px;
    height: 100%;
    width: 10px;
    background-color: #d2d2d2;
    transition: background-color 0.2s;
    z-index: 1001;
  }
  .resize__overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: none;
  }
  .resize__control:hover,
  .resize__control:active {
    background-color: #417ff9;
    cursor: w-resize;
  }
</style>

侧边栏显示 #

参考实例 #

参考代码 #

侧边栏显示

参考实例

参考代码