vue自定义插件结合iframe封装组件及函数实现弹窗预览文件功能

最新推荐文章于 2025-08-14 17:31:00 发布

原创

最新推荐文章于 2025-08-14 17:31:00 发布 · 333 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

在这里插入图片描述

1、文件预览弹窗组件
<template>
  <!-- 公司组件库的弹窗组件，和element的弹窗组件用法一样 -->
  <sc-tf-dialog-base
    ref="scTfDialog"
    class="prod-dialog"
    :cancelBtnText="'关闭'"
    dialog-name="文件预览"
    :fullscreen="magnify"
    :height="magnify ? '90vh' : '550px'"
    :show-confirm-button="false"
    @beforeClose="closeDialog"
  >
    <template #title>
      <div class="file-title">
        <div>文件预览</div>
        <div>
          <sp-icon
            :type="magnify ? 'restore' : 'magnify'"
            color="#8998AC"
            style="margin-right: 10px"
            @click.native="magnify = !magnify"
            fontSize="25"
          ></sp-icon>
        </div>
      </div&g