diff --git a/src/image-preview/ImagePreview.js b/src/image-preview/ImagePreview.js
index bc9cabfe1..a9aa9fd5d 100644
--- a/src/image-preview/ImagePreview.js
+++ b/src/image-preview/ImagePreview.js
@@ -249,12 +249,20 @@ export default createComponent({
if (this.showIndex) {
return (
- {this.slots('index') || `${this.active + 1}/${this.images.length}`}
+ {this.slots('index') || `${this.active + 1} / ${this.images.length}`}
);
}
},
+ genCover() {
+ const cover = this.slots('cover');
+
+ if (cover) {
+ return {cover}
;
+ }
+ },
+
genImages() {
const imageSlots = {
loading: () =>
@@ -306,6 +314,7 @@ export default createComponent({
{this.genImages()}
{this.genIndex()}
+ {this.genCover()}
);
diff --git a/src/image-preview/README.md b/src/image-preview/README.md
index 63f34a987..ca29f9631 100644
--- a/src/image-preview/README.md
+++ b/src/image-preview/README.md
@@ -134,6 +134,7 @@ export default {
| Name | Description |
|------|------|
| index | Custom index |
+| cover | Custom content that covers the image preview |
### onClose Parematers
diff --git a/src/image-preview/README.zh-CN.md b/src/image-preview/README.zh-CN.md
index b7645f24c..ad43ed903 100644
--- a/src/image-preview/README.zh-CN.md
+++ b/src/image-preview/README.zh-CN.md
@@ -152,6 +152,7 @@ export default {
| 名称 | 说明 |
|------|------|
| index | 自定义页码内容 |
+| cover | 自定义覆盖在图片预览上方的内容 |
### onClose 回调参数
diff --git a/src/image-preview/index.less b/src/image-preview/index.less
index 022fd41ba..cbf4e907b 100644
--- a/src/image-preview/index.less
+++ b/src/image-preview/index.less
@@ -11,6 +11,12 @@
height: 100%;
}
+ &__cover {
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+
&__image {
position: absolute;
top: 0;
@@ -30,7 +36,6 @@
left: 50%;
color: @image-preview-index-text-color;
font-size: @image-preview-index-font-size;
- letter-spacing: 2px;
transform: translate(-50%, 0);
}
diff --git a/src/image-preview/test/__snapshots__/index.spec.js.snap b/src/image-preview/test/__snapshots__/index.spec.js.snap
index 103ab48fc..33286063b 100644
--- a/src/image-preview/test/__snapshots__/index.spec.js.snap
+++ b/src/image-preview/test/__snapshots__/index.spec.js.snap
@@ -1,5 +1,15 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`cover slot 1`] = `
+
+
+
1 / 0
+
Custom Cover Content
+
+`;
+
exports[`index slot 1`] = `
@@ -36,7 +46,7 @@ exports[`lazy-load prop 1`] = `
- 1/3
+ 1 / 3
`;
@@ -67,7 +77,7 @@ exports[`render image 1`] = `
- 1/3
+ 1 / 3
`;
@@ -106,6 +116,6 @@ exports[`zoom 1`] = `
- 1/3
+ 1 / 3
`;
diff --git a/src/image-preview/test/index.spec.js b/src/image-preview/test/index.spec.js
index 2282f815c..48518429c 100644
--- a/src/image-preview/test/index.spec.js
+++ b/src/image-preview/test/index.spec.js
@@ -151,7 +151,19 @@ test('index slot', () => {
const wrapper = mount({
template: `
- Custom Index
+ Custom Index
+
+ `
+ });
+
+ expect(wrapper).toMatchSnapshot();
+});
+
+test('cover slot', () => {
+ const wrapper = mount({
+ template: `
+
+ Custom Cover Content
`
});