SuperAdminx

Appearance

预览组件

预览组件主要用在详情页面、或表格列里面

1、content 预览长文本（非富文本）-弹窗或者Popover气泡方式预览 ​

使用方法
jsx
// 先引入
const PreviewContent = lazy(() => import('@/component/preview/content/index'));

// 在使用
<PreviewContent content="要查看的文本内容"/>

2、images 多图预览-弹窗方式 ​

使用方法
jsx
// 先引入
const PreviewImages = lazy(() => import('@/component/form/images/index'));

// 在使用
<PreviewImages imgs={['/storage/xxx/xxx.jpg', '/storage/xxx/xxx.jpg']}/>

3、imagesVideos 多图或视频预览-弹窗方式 ​

可以预览图片或视频，实际上就可以不用上面个多图预览组件了

使用方法
jsx
// 先引入
const PreviewImagesVideos = lazy(() => import('@/component/form/imagesVideos/index'));

// 在使用
<PreviewImagesVideos imgs={['/storage/xxx/xxx.jpg', '/storage/xxx/xxx.mp4']}/>

4、pdf 预览-弹窗方式 ​

使用方法
jsx
// 先引入
const PreviewPdf = lazy(() => import('@/component/form/pdf/index'));

// 在使用
<PreviewPdf url="/storage/xxx/xxx.pdf"/>

5、word 预览-弹窗方式 ​

使用方法
jsx
// 先引入
const PreviewWord = lazy(() => import('@/component/form/word/index'));

// 在使用
<PreviewWord url="/storage/xxx/xxx.docx"/>

6、teditor 预览富文本-弹窗或者Popover气泡方式预览 ​

使用方法
jsx
// 先引入
const PreviewTeditor = lazy(() => import('@/component/form/teditor/index'));

// 在使用
<PreviewTeditor content="<p>富文本的内容</p>"/>

7、video Popover方式预览视频 ​

使用方法
jsx
// 先引入
const PreviewVideo = lazy(() => import('@/component/form/video/index'));

// 在使用
<PreviewVideo url="/storage/xx/xxx.mp4"/>