Image 图片
简介
相对 ElIamge，添加蒙层，添加预览、下载按钮及功能。ElImage 原来预览功能不再支持。
基础用法
基础用法与 ElImage 没有区别
<template>
<CxzImage :src="src" style="width: 150px" />
</template>
<script setup lang="ts">
import { CxzImage } from 'cxz-ui'
const src =
'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
</script>预览
使用 with-preview 开启预览。不传 preview-src-list 默认预览当前图片，传了可以预览多张图片。initialIndex 不传默认预览当前图片，传了可以预览其他图片。
<template>
<el-space wrap>
<div v-for="item in srcList" :key="item" style="width: 120px">
<CxzImage :src="item" with-preview :preview-src-list="srcList" />
</div>
</el-space>
</template>
<script setup lang="ts">
import { CxzImage } from 'cxz-ui'
const srcList = [
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
]
</script>下载
使用 with-download 开启下载。使用 file-name 可以修改下载文件名
默认下载
修改下载文件名称
<template>
<el-row :gutter="20">
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
<div>默认下载</div>
<CxzImage style="width: 200px" :src="src" with-download />
</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
<div>修改下载文件名称</div>
<CxzImage
style="width: 200px"
:src="src"
with-download
file-name="我的图片"
/>
</el-col>
</el-row>
</template>
<script setup lang="ts">
import { CxzImage } from 'cxz-ui'
const src =
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
</script>更多操作
使用 operation 插槽添加更多操作
<template>
<CxzImage
style="width: 200px"
:src="src"
with-preview
with-download
file-name="我的图片"
>
<template #operation>
<el-icon>
<component :is="Delete" />
</el-icon>
</template>
</CxzImage>
</template>
<script setup lang="ts">
import { CxzImage } from 'cxz-ui'
import { Delete } from '@element-plus/icons-vue'
const src =
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
</script>Image 新增或修改的属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| previewTeleported | image-viewer 是否插入至 body 元素 | boolean | true |
| initialIndex | 初始预览图像索引 | number | undefined |
| withPreview | 是否开启预览 | boolean | false |
| previewIcon | 预览图标 | iconPropType | ZoomIn |
| withDownload | 是否开启下载 | boolean | false |
| downloadIcon | 下载图标 | iconPropType | Download |
| fileName | 下载文件名称 | string | undefined |