diff --git a/packages/varlet-vue2-ui/src/image-preview/ImagePreview.vue b/packages/varlet-vue2-ui/src/image-preview/ImagePreview.vue index 6fbbb27..6dcad3a 100644 --- a/packages/varlet-vue2-ui/src/image-preview/ImagePreview.vue +++ b/packages/varlet-vue2-ui/src/image-preview/ImagePreview.vue @@ -65,6 +65,10 @@ @click="close" /> + +
+ +
diff --git a/packages/varlet-vue2-ui/src/image-preview/docs/en-US.md b/packages/varlet-vue2-ui/src/image-preview/docs/en-US.md index 233dd61..6ada7c1 100644 --- a/packages/varlet-vue2-ui/src/image-preview/docs/en-US.md +++ b/packages/varlet-vue2-ui/src/image-preview/docs/en-US.md @@ -101,6 +101,25 @@ ImagePreview({ :show.sync="closeEventShow" @close="handleCloseEvent" /> + + + Show extra slots + + + + ``` ```javascript @@ -108,14 +127,24 @@ import { Snackbar } from '@varlet-vue2/ui' export default { data: () => ({ + images: ['https://varlet.gitee.io/varlet-ui/cat.jpg', 'https://varlet.gitee.io/varlet-ui/cat2.jpg'], + image: ['https://varlet.gitee.io/varlet-ui/cat.jpg'], show: false, + menuShow:false, currentShow: false, closeShow: false, closeEventShow: false, - images: [ - 'https://varlet.gitee.io/varlet-ui/cat.jpg', - 'https://varlet.gitee.io/varlet-ui/cat2.jpg', - ], + extraSlotsShow:false, + actions: [ + { + name: 'operate', + icon: 'wrench' + }, + { + name: 'operate', + icon: 'wrench' + } + ] }), methods: { handleCloseEvent() { @@ -158,6 +187,7 @@ export default { | --- | --- | --- | | `indicator` | Paging indicator | `index: number` Image indexing
`length: number` Total number of image | | `close-icon` | Close button | `-` | +| `extra` | Extra slots | `-` | ### ImagePreview Options @@ -181,10 +211,12 @@ Here are the CSS variables used by the component, Styles can be customized using | Variable | Default | | ------ | -------- | -| `--image-preview-swipe-indicators-text-color` | ` #ddd` | -| `--image-preview-swipe-indicators-padding` | `16px 0` | -| `--image-preview-zoom-container-background`| ` #000` | -| `--image-preview-close-icon-top` | `13px` | -| `--image-preview-close-icon-right` | ` 14px` | -| `--image-preview-close-icon-size` | `22px` | -| `--image-preview-close-icon-color` | `#fff` | +| `--image-preview-swipe-indicators-text-color` | `#ddd` | +| `--image-preview-swipe-indicators-padding` | `16px 0` | +| `--image-preview-zoom-container-background` | `#000` | +| `--image-preview-close-icon-top` | `14px` | +| `--image-preview-close-icon-right` | `14px` | +| `--image-preview-close-icon-size` | `22px` | +| `--image-preview-close-icon-color` | `#fff` | +| `--image-preview-extra-top` | `14px` | +| `--image-preview-extra-left` | `14px` | diff --git a/packages/varlet-vue2-ui/src/image-preview/docs/zh-CN.md b/packages/varlet-vue2-ui/src/image-preview/docs/zh-CN.md index 1c85501..d982117 100644 --- a/packages/varlet-vue2-ui/src/image-preview/docs/zh-CN.md +++ b/packages/varlet-vue2-ui/src/image-preview/docs/zh-CN.md @@ -101,6 +101,25 @@ ImagePreview({ v-model:show="closeEventShow" @close="handleCloseEvent" /> + + + 显示额外插槽 + + + + ``` ```javascript @@ -108,14 +127,24 @@ import { Snackbar } from '@varlet-vue2/ui' export default { data: () => ({ + images: ['https://varlet.gitee.io/varlet-ui/cat.jpg', 'https://varlet.gitee.io/varlet-ui/cat2.jpg'], + image: ['https://varlet.gitee.io/varlet-ui/cat.jpg'], show: false, + menuShow:false, currentShow: false, closeShow: false, closeEventShow: false, - images: [ - 'https://varlet.gitee.io/varlet-ui/cat.jpg', - 'https://varlet.gitee.io/varlet-ui/cat2.jpg', - ], + extraSlotsShow:false, + actions: [ + { + name: '操作', + icon: 'wrench' + }, + { + name: '操作', + icon: 'wrench' + } + ] }), methods: { handleCloseEvent() { @@ -158,6 +187,7 @@ export default { | --- | --- | --- | | `indicator` | 分页指示器 | `index: number` 图片索引
`length: number` 图片总数 | | `close-icon` | 关闭按钮 | `-` | +| `extra` | 额外插槽 | `-` | ### ImagePreview Options @@ -181,10 +211,12 @@ export default { | 变量名 | 默认值 | | ------ | -------- | -| `--image-preview-swipe-indicators-text-color` | ` #ddd` | -| `--image-preview-swipe-indicators-padding` | `16px 0` | -| `--image-preview-zoom-container-background`| ` #000` | -| `--image-preview-close-icon-top` | `13px` | -| `--image-preview-close-icon-right` | ` 14px` | -| `--image-preview-close-icon-size` | `22px` | -| `--image-preview-close-icon-color` | `#fff` | +| `--image-preview-swipe-indicators-text-color` | `#ddd` | +| `--image-preview-swipe-indicators-padding` | `16px 0` | +| `--image-preview-zoom-container-background` | `#000` | +| `--image-preview-close-icon-top` | `14px` | +| `--image-preview-close-icon-right` | `14px` | +| `--image-preview-close-icon-size` | `22px` | +| `--image-preview-close-icon-color` | `#fff` | +| `--image-preview-extra-top` | `14px` | +| `--image-preview-extra-left` | `14px` | diff --git a/packages/varlet-vue2-ui/src/image-preview/example/index.vue b/packages/varlet-vue2-ui/src/image-preview/example/index.vue index 43fdc5d..f484b78 100644 --- a/packages/varlet-vue2-ui/src/image-preview/example/index.vue +++ b/packages/varlet-vue2-ui/src/image-preview/example/index.vue @@ -23,6 +23,14 @@ {{ pack.listenCloseEvents }} + + {{ pack.showExtraSlots }} + + + @@ -36,6 +44,8 @@ import { defineComponent } from '../../utils/create' import { pack, use } from './locale' import { watchLang, watchPlatform } from '@varlet-vue2/cli/site/utils' import context from '../../context' +import ActionSheet from '../../action-sheet' +import VarIcon from '../../icon' export default defineComponent({ name: 'ImagePreviewExample', @@ -44,21 +54,37 @@ export default defineComponent({ VarImagePreview: ImagePreview.Component, VarButton, AppType, + VarIcon, + VarActionSheet: ActionSheet.Component, }, data: () => ({ images: ['https://varlet.gitee.io/varlet-ui/cat.jpg', 'https://varlet.gitee.io/varlet-ui/cat2.jpg'], image: ['https://varlet.gitee.io/varlet-ui/cat.jpg'], show: false, + menuShow: false, currentShow: false, closeShow: false, closeEventShow: false, + extraSlotsShow: false, }), computed: { pack() { return pack.value }, + actions() { + return [ + { + name: pack.value.operate, + icon: 'wrench', + }, + { + name: pack.value.operate, + icon: 'wrench', + }, + ] + }, }, created() { diff --git a/packages/varlet-vue2-ui/src/image-preview/example/locale/en-US.ts b/packages/varlet-vue2-ui/src/image-preview/example/locale/en-US.ts index a406cf3..b517e0d 100644 --- a/packages/varlet-vue2-ui/src/image-preview/example/locale/en-US.ts +++ b/packages/varlet-vue2-ui/src/image-preview/example/locale/en-US.ts @@ -8,4 +8,6 @@ export default { displayCloseButton: 'Display the close button', listenCloseEvents: 'Listen for close event', shutdownEvent: 'The shutdown event was triggered.', + showExtraSlots: 'Show extra slots', + operate: '操作', } diff --git a/packages/varlet-vue2-ui/src/image-preview/example/locale/zh-CN.ts b/packages/varlet-vue2-ui/src/image-preview/example/locale/zh-CN.ts index 7f24ecc..179f434 100644 --- a/packages/varlet-vue2-ui/src/image-preview/example/locale/zh-CN.ts +++ b/packages/varlet-vue2-ui/src/image-preview/example/locale/zh-CN.ts @@ -8,4 +8,6 @@ export default { displayCloseButton: '展示关闭按钮', listenCloseEvents: '监听关闭事件', shutdownEvent: '触发了关闭事件。', + showExtraSlots: '展示额外插槽', + operate: '操作', } diff --git a/packages/varlet-vue2-ui/src/image-preview/imagePreview.less b/packages/varlet-vue2-ui/src/image-preview/imagePreview.less index 7980aa5..43cac6a 100644 --- a/packages/varlet-vue2-ui/src/image-preview/imagePreview.less +++ b/packages/varlet-vue2-ui/src/image-preview/imagePreview.less @@ -3,6 +3,8 @@ @image-preview-zoom-container-background: #000; @image-preview-close-icon-top: 13px; @image-preview-close-icon-right: 14px; +@image-preview-extra-top: 14px; +@image-preview-extra-left: 14px; @image-preview-close-icon-size: 22px; @image-preview-close-icon-color: #fff; @@ -12,6 +14,8 @@ --image-preview-zoom-container-background: @image-preview-zoom-container-background; --image-preview-close-icon-top: @image-preview-close-icon-top; --image-preview-close-icon-right: @image-preview-close-icon-right; + --image-preview-extra-top: @image-preview-extra-top; + --image-preview-extra-left: @image-preview-extra-left; --image-preview-close-icon-size: @image-preview-close-icon-size; --image-preview-close-icon-color: @image-preview-close-icon-color; } @@ -38,6 +42,12 @@ font-size: var(--image-preview-close-icon-size); } + &__extra { + position: absolute; + top: var(--image-preview-extra-top); + left: var(--image-preview-extra-left); + } + &__indicators { position: absolute; top: 0;