FilePreview 文件预览

WARNING

注意： 在多图预览模式下，组件会自动过滤掉不支持预览的图片，仅展示可预览项；对于 Office 文档、文本、视频、音频等其他文件类型，因暂不支持预览，点击预览将不会产生任何响应。

TIP

目前支持文件预览：

office	文本	视频	音频	图片
doc	html	mp4	mp3	svg
docx	txt	webm		png
xls	json	ogv		jpeg
xlsx	js			jpg
pdf	css			gif
ppt				webp
pptx

引入

import { WFilePreview } from '@wyg/file-upload'

import '@wyg/file-upload/dist/style.css'

图片预览（多图预览）

您可以给 image-preview-carousel 属性，传递一个数组公共可读的文件网络地址。

WARNING

注意：建议您为图片预览设置 close 事件处理程序。如果不设置，在连续点击同一图片以进行预览时，可能会导致预览无法正确打开的情况。

WARNING

如果点击 ‘上一张’和‘下一张’切换按钮无反应，可以通过绑定 v-model:current 属性解决。

Office 文件与图片预览的组合功能 - 1

Office 文件与图片预览的组合功能 - 2

WARNING

不能同时传递 fileURL 和 image-preview-carousel，因为组件无法明确优先预览哪个，这可能导致预览功能失效。

使用 URL 预览 Office 文件

您可以给 fileURL 属性，传递一个公共可读的文件网络地址。

使用 File 预览 Office 文件

您可以传递一个 File 类型的文件数据给 file 属性，您可以尝试预览目前支持的文件。

Drawer 抽屉预览 Office 文件

点击触发按钮抽屉从右侧滑出，点击遮罩区关闭。

全屏预览 Office 文件

开启 fullscreen 属性，可以让 Modal 占满整个容器。 开启 drawer-fullscreen 属性，可以让 Drawer 占满整个容器。

<filePreview> Props：

属性名	说明	类型	默认值
modal-props	arco Modal 组件 Props	ModalProps	-
modal-container-style	arco Modal 组件中 arco-modal-container 元素的自定义样式（style）属性	CSSProperties	-
drawer-props	arco Drawer 组件 Props	DrawerProps	-
drawer-container-style	arco Drawer 组件中 arco-drawer-container 元素的自定义样式（style）属性	CSSProperties	-
image-preview-group-props	arco imagePreviewGroup 组件 Props（多个图片预览组件）	ImagePreviewProps	-
file-config	文件预览配置，只能传入一个 file 或 url（只支持 office 文件预览）	FileConfig	-
image-preview-carousel	图片预览的url数组，支持左右翻页查看其它图片（多个图片预览）	string[]	-
current	多图预览时当前展示的图片下标	number	0
show-modal	是否使用 modal 模式预览，图片除外	boolean	false
show-downLoad	是否显示下载按钮。如果为 false, 则显示确认按钮	boolean	true
drawer-fullscreen	抽屉 drawer 是否开启全屏	boolean	false
show-drawer	是否使用抽屉 drawer 模式预览，图片除外	boolean	false

WARNING

在使用 show-modal 和 show-drawer 属性时，需要使用 v-model 来绑定。否则无法使用 maskClosable 和 escToClose 等其它相关属性操作。注意：这两个属性无法控制预览图片的操作。

interface Props {
    /** arco Modal 组件 Props */
    modalProps?: ModalProps;
    /** arco Modal 组件中 `arco-modal-container` 元素的自定义样式（style）属性 */
    modalContainerStyle?: CSSProperties;
    /** arco Drawer 组件 Props */
    drawerProps?: DrawerProps;
    /** arco Drawer 组件中 `arco-drawer-container` 元素的自定义样式（style）属性 */
    drawerContainerStyle?: CSSProperties;
    /** arco imagePreviewGroup 组件 Props（多个图片预览组件） */
    imagePreviewGroupProps?: ImagePreviewGroupProps;
    /** 文件预览配置，只能传入一个 file 或 url（只支持 office 文件预览） */
    fileConfig?: FileConfig;
    /** 图片预览的url数组，支持左右翻页查看其它图片（多个图片预览） */
    imagePreviewCarousel?: string[];
    /** 多图预览时当前展示的图片下标 */
    current?: number;
    /** 是否使用 modal 模式预览，图片除外 */
    showModal?: boolean;
    /** 是否显示下载按钮。如果为 false, 则显示确认按钮 */
    showDownLoad?: boolean;
    /** 抽屉 Drawer 是否开启全屏 */
    drawerFullscreen?: boolean;
    /** 是否使用抽屉 Drawer 模式预览，图片除外 */
    showDrawer?: boolean;
}

/** arco Modal 组件 Props, 除(visible, default-visible, okLoading)*/
export interface ModalProps {
    /** 对话框是否可见 */
    // visible: boolean;
    /** 对话框默认是否可见（非受控状态） */
    // defaultVisible: boolean;
    /** 对话框的宽度，不设置的情况下会使用样式中的宽度值 */
    width?: number | string;
    /** 对话框的距离顶部的高度，居中显示开启的情况下不生效 */
    top?: number | string;
    /** 是否显示遮罩层 */
    mask?: boolean;
    /** 标题 */
    title?: string;
    /** 标题的水平对齐方向 */
    titleAlign?: 'start' | 'center'
    /** 对话框是否居中显示 */
    alignCenter?: boolean;
    /** 关闭时是否卸载节点 */
    unmountOnClose?: boolean;
    /** 是否点击遮罩层可以关闭对话框 */
    maskClosable?: boolean;
    /** 是否隐藏取消按钮 */
    hideCancel?: boolean;
    /** 是否开启简单模式 */
    simple?: boolean;
    /** 是否显示关闭按钮 */
    closable?: boolean;
    /** 确认按钮的内容 */
    okText?: string;
    /** 取消按钮的内容 */
    cancelText?: string;
    /** 确认按钮是否为加载中状态 */
    // okLoading?: boolean;
    /** 确认按钮的Props */
    okButtonProps?: ButtonProps;
    /** 取消按钮的Props */
    cancelButtonProps?: ButtonProps;
    /** 是否展示页脚部分 */
    footer?: boolean;
    /** 对话框是否挂载在 body 元素下 */
    renderToBody?: boolean;
    /** 弹出框的挂载容器 */
    popupContainer?: string | HTMLElement;
    /** 蒙层的样式 */
    maskStyle?: CSSProperties;
    /** 对话框的类名 */
    modalClass?: string | any[];
    /** 对话框的样式 */
    modalStyle?: CSSProperties;
    /** 触发 ok 事件前的回调函数。如果返回 false 则不会触发后续事件，也可使用 done 进行异步关闭。 */
    onBeforeOk?: ( done: (closed: boolean) => void) => void | boolean | Promise<void | boolean>;
    /** 触发 cancel 事件前的回调函数。如果返回 false 则不会触发后续事件。 */
    onBeforeCancel?: () => boolean;
    /** 是否支持 ESC 键关闭对话框 */
    escToClose?: boolean;
    /** 是否支持拖动 */
    draggable?: boolean;
    /** 是否开启全屏 */
    fullscreen?: boolean;
    /** 遮罩层动画名字 */
    maskAnimationName?: string;
    /** 对话框动画名字 */
    modalAnimationName?: string;
    /** 对话框内容部分的类名 */
    bodyClass?: string | any[];
    /** 对话框内容部分的样式 */
    bodyStyle?: StyleValue;
    /** 是否隐藏标题 */
    hideTitle?: boolean;
}

/** arco Drawer 组件 Props, 除(visible, default-visible, okLoading) */
export interface DrawerProps {
    /** 抽屉是否可见 */
    // visible: boolean;
    /** 抽屉默认是否可见（非受控模式） */
    // defaultVisible: boolean;
    /** 抽屉放置的位置 */
    placement?: 'top' | 'right' | 'bottom' | 'left';
    /** 标题 */
    title?: string;
    /** 是否显示遮罩层 */
    mask?: boolean;
    /** 点击遮罩层是否可以关闭 */
    maskClosable?: boolean;
    /** 是否展示关闭按钮 */
    closable?: boolean;
    /** 确认按钮的内容 */
    okText?: string;
    /** 取消按钮的内容 */
    cancelText?: string;
    /** 确认按钮是否为加载中状态 */
    // okLoading?: boolean;
    /** 确认按钮的Props */
    okButtonProps?: ButtonProps;
    /** 取消按钮的Props */
    cancelButtonProps?: ButtonProps;
    /** 关闭时是否卸载节点 */
    unmountOnClose?: boolean;
    /** 抽屉的宽度（仅在placement为right,left时可用） */
    width?: number | string;
    /** 抽屉的高度（仅在placement为top,bottom时可用） */
    height?: number | string;
    /** 弹出框的挂载容器 */
    popupContainer?: string | HTMLElement;
    /** 抽屉的样式 */
    drawerStyle?: CSSProperties;
    /** 抽屉内容部分的类名 */
    bodyClass?: string | any[];
    /** 抽屉内容部分的样式 */
    bodyStyle?: StyleValue;
    /** 触发 ok 事件前的回调函数。如果返回 false 则不会触发后续事件，也可使用 done 进行异步关闭。 */
    onBeforeOk?: (done: (closed: boolean) => void) => void | boolean | Promise<void | boolean>;
    /** 触发 cancel 事件前的回调函数。如果返回 false 则不会触发后续事件。 */
    onBeforeCancel?: () => boolean;
    /** 是否支持 ESC 键关闭抽屉 */
    escToClose?: boolean;
    /** 抽屉是否挂载在 body 元素下 */
    renderToBody?: boolean;
    /** 是否展示头部内容 */
    header?: boolean;
    /** 是否展示底部内容 */
    footer?: boolean;
    /** 是否隐藏取消按钮 */
    hideCancel?: boolean;
}

/** arco image-preview-group 组件 Props, 除(srcList, current, default-current, visible, default-visible, popup-container) */
export interface ImagePreviewGroupProps {
    /** 图片列表（设置了本属性之后，将不再收集 a-image 子组件的图片信息） */
    // srcList: string[];
    /** 当前展示的图片的下标 */
    // current: number;
    /** 第一张展示的图片的下标 */
    // defaultCurrent
    /** 是否无限循环 */
    infinite?: boolean;
    /** 是否可见，受控属性 */
    // visible: boolean;
    /** 默认是否可见，非受控 */
    // defaultVisible: boolean;
    /** 点击 mask 是否触发关闭 */
    maskClosable?: boolean;
    /** 是否显示关闭按钮 */
    closable?: boolean;
    /** 控制条的布局 */
    actionsLayout?: string[];
    /** 设置弹出框的挂载点，同 teleport 的 to，缺省值是 document.body */
    // popupContainer?: string | HTMLElement;
}

/** 文件预览配置，只能传入一个 file 或 url */
export interface FileConfig {
    /** file 文件数据，内部通过 FileReader 读取该文件的 ArrayBuffer */
    file?: File;
    /** 文件的网络地址 */
    fileURL?: string;
}

<filePreview> Events：

事件名	说明	参数
cancel	点击取消、关闭按钮时触发	-
ok	点击确定按钮时触发	-
down-load	点击下载按钮时触发	fileItem: File | undefined
close	图片预览 关闭事件	-
rendered	预览文件渲染完成时触发	-
error	预览文件渲染失败时触发	-

<filePreview> Slots：

• model 框：

  插槽名	说明	参数
  title	标题	-
  footer	页脚	-

• drawer 抽屉：

  插槽名	说明	参数
  title	标题	-
  footer	页脚	-

• image-preview 图片：

  插槽名	说明	参数
  actions	自定义额外的操作项	-