FilePreview 文件预览

WARNING

注意： 建议全部使用新版本的 WFilePreview 预览组件。

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'

使用 URL 预览

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

使用 File 预览

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

Drawer 抽屉预览

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

全屏预览

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

图片预览

WARNING

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

<filePreview> Props：

属性名	说明	类型	默认值
modal-props	arco Modal 组件 Props	ModalProps	-
drawer-props	arco Drawer 组件 Props	DrawerProps	-
image-preview-props	arco imagePreview 组件 Props	ImagePreviewProps	-
file-config（必填）	文件预览配置，只能传入一个 file 或 url	FileConfig	-
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 Drawer 组件 Props */
    drawerProps?: DrawerProps;
    /** arco imagePreview 组件 Props */
    imagePreviewProps?: ImagePreviewProps;
    /** 文件预览配置，只能传入一个 file 或 url */
    fileConfig: FileConfig;
    /** 是否使用 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;
    /** 触发 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 组件 Props, 除(src, visible, default-visible)*/
export interface ImagePreviewProps {
    /** 图片获取地址 */
    // src: string;
    /** 是否可见 */
    // visible: boolean;
    /** 默认是否可见，非受控 */
    // defaultVisible: boolean;
    /** 点击 mask 是否触发关闭 */
    maskClosable?: boolean;
    /** 是否显示关闭按钮 */
    closable?: boolean;
    /** 操作项的布局 */
    actionsLayout?: string[];
    /** 设置弹出框的挂载点，同 teleport 的 to，缺省值是 document.body */
    popupContainer?: HTMLElement | string;
    /** 是否支持 ESC 键关闭预览 */
    escToClose?: boolean;
    /** 是否开启滚轮缩放 */
    wheelZoom?: boolean;
    /** 是否开启键盘控制 */
    keyboard?: boolean;
    /** 默认缩放比 */
    defaultScale?: number;
    /** 缩放速率，仅对滚动缩放生效 */
    zoomRate?: number;
}

/** 文件预览配置，只能传入一个 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	自定义额外的操作项	-