feat(ui/image-preview): add extra slot (#19)

* test(ui/space): add test case and snapshots * test(ui/row): add test case and snapshots * feat(ui/image-preview): add extra slot
varletjs · Mar 14, 2022 · 31fc76d · 31fc76d
1 parent 3d0848e
commit 31fc76d
Show file tree

Hide file tree

Showing 7 changed files with 130 additions and 22 deletions.
diff --git 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"
       />
     </slot>
+
+    <div class="var-image-preview__extra">
+      <slot name="extra" />
+    </div>
   </var-popup>
 </template>
 

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
@@ -101,21 +101,50 @@ ImagePreview({
   :show.sync="closeEventShow"
   @close="handleCloseEvent" 
 />
+
+<var-button
+  type="warning"
+  block
+  @click="extraSlotsShow = true"
+>
+  Show extra slots
+</var-button>
+<var-image-preview :images="images" :show.sync="extraSlotsShow">
+  <template #extra>
+    <var-icon
+      name="menu"
+      :size="22"
+      color="#fff"
+      @click="menuShow = true"
+    />
+    <var-action-sheet :actions="actions" :show.sync="menuShow" />
+  </template>
+</var-image-preview>
 ```
 
 ```javascript
 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 <br> `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
@@ -101,21 +101,50 @@ ImagePreview({
   v-model:show="closeEventShow"
   @close="handleCloseEvent"
 />
+
+<var-button
+  type="warning"
+  block
+  @click="extraSlotsShow = true"
+>
+  显示额外插槽
+</var-button>
+<var-image-preview :images="images" :show.sync="extraSlotsShow">
+  <template #extra>
+    <var-icon 
+      name="menu"
+      :size="22"
+      color="#fff"
+      @click="menuShow = true"
+    />
+    <var-action-sheet :actions="actions" :show.sync="menuShow" />
+  </template>
+</var-image-preview>
 ```
 
 ```javascript
 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` 图片索引 <br> `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
@@ -23,6 +23,14 @@
 
       <var-button type="warning" block @click="closeEventShow = true">{{ pack.listenCloseEvents }} </var-button>
       <var-image-preview :images="images" :show.sync="closeEventShow" @close="handleCloseEvent" />
+
+      <var-button type="warning" block @click="extraSlotsShow = true">{{ pack.showExtraSlots }}</var-button>
+      <var-image-preview :images="images" :show.sync="extraSlotsShow">
+        <template #extra>
+          <var-icon name="menu" :size="22" color="#fff" @click="menuShow = true" />
+          <var-action-sheet :actions="actions" :show.sync="menuShow" />
+        </template>
+      </var-image-preview>
     </div>
   </div>
 </template>
@@ -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
@@ -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
@@ -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
@@ -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;