添加图片预览控件的example。

examples/App.vue

@@ -19,6 +19,13 @@
                     <li>
                         <router-link :to="{ path: '/desktop/date-time-v2-example'}">日期时间V2控件</router-link>
                     </li>
+                    <li>
+                        <router-link :to="{ path: '/desktop/image-preview-example'}">图片预览</router-link>
+                    </li>
+
+                    
+
+
                     <li>
                         <router-link :to="{ path: '/desktop/modal-example'}">模态框</router-link>
                     </li>

examples/image-preview/src/ImagePreviewExample.vue

@@ -0,0 +1,40 @@
+<template>
+    <h1>图片预览</h1>
+    <button class="btn btn-default" @click="preview">预览</button>
+    <ImagePreview ref="imagePreview"></ImagePreview>
+
+    <h1>图片预览-自定义标题</h1>
+    <button class="btn btn-default" @click="preview1">预览</button>
+    <ImagePreview ref="imagePreview1">
+        <template #default>
+            美女，Hello
+        </template>
+    </ImagePreview>
+
+</template>
+
+<script>
+
+import ImagePreview from "@/image-preview/index.js";
+
+export default {
+    data: function () {
+        return {
+            src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fent%2Ftransform%2F20161205%2FY3Kh-fxyipxf7613936.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1649490096&t=fcae8a8f3a2b9b036708d353e3c5d073',
+        }
+    },
+
+    components: {
+        ImagePreview,
+    },
+
+    methods: {
+        preview: function(){
+            this.$refs.imagePreview.previewImage(this.src);
+        },
+        preview1: function(){
+            this.$refs.imagePreview1.previewImage(this.src);
+        }
+    }
+}
+</script>

examples/main.js

@@ -5,11 +5,17 @@ import {VTooltip} from 'v-tooltip';
 import mRouter from './route/index.js';
 import App from './App.vue'
 
+import zh from '@/i18n/zh-CN.js'
+import en from '@/i18n/en-US.js'
+
+// 默认语言
+const default_lang = "zh";
+
 const i18n = createI18n({
-	locale: 'zh-CN',
+	locale: default_lang,
 	messages: {
-		'zh-CN': require('../packages/i18n/zh-CN.js'),
-		'en-US': require('../packages/i18n/en-US.js'),
+		'zh': zh,
+		'en': en,
 	}
 })
 

examples/route/index.js

@@ -4,6 +4,7 @@ const DateExample = () => import(/* webpackChunkName: "date-example" */ '../date
 const DateTimeExample = () => import(/* webpackChunkName: "date-time-example" */ '../datetime/src/DateTimeExample.vue')
 const DateTimeV2Example = () => import(/* webpackChunkName: "date-time-v2-example" */ '../datetime-v2/src/DateTimeV2Example.vue')
 const ModalExample = () => import(/* webpackChunkName: "modal-example" */ '../modal/src/ModalExample.vue')
+const ImagePreviewExample = () => import(/* webpackChunkName: "image-preview-example" */ '../image-preview/src/ImagePreviewExample.vue')
 const ProcessReport = () => import(/* webpackChunkName: "process-report" */ '../../packages/process/src/ProcessReport.vue')
 const InfoWindow = () => import(/* webpackChunkName: "info-window" */ '../../packages/info/src/InfoWindow.vue')
 const DocGeneratorSelected = () => import(/* webpackChunkName: "doc-generator-selected" */ '../../packages/info/src/DocGeneratorSelected.vue')
@@ -30,6 +31,9 @@ export default {
 				/** 模态框控件 */
 				{ path: 'modal-example', component: ModalExample },
 
+				/** 图片预览控件 */
+				{ path: 'image-preview-example', component: ImagePreviewExample },
+
 				/** 流程报表 */
 				{ path: 'process-report/:no', component: ProcessReport },
 

packages/i18n/en-US.js

@@ -54,6 +54,10 @@ const lang = {
         lastPage: "last",
         previous: "«",
         next: "»",
+    },
+
+    imagePreview: {
+        imagePreview: 'Image preview'
     }
 }
 

packages/i18n/zh-CN.js

@@ -55,6 +55,10 @@ const lang = {
         lastPage: "尾页",
         previous: "«",
         next: "»",
+    },
+
+    imagePreview: {
+        imagePreview: '图片预览'
     }
 }
 

packages/image-preview/src/ImagePreview.vue

@@ -7,9 +7,11 @@
             <img :src="src"
                  class="m-img" />
         </div>
-        <div slot="header">
-            {{$t('lang.imagePreview.imagePreview')}}
-        </div>
+        <template #header>
+            <slot>
+                {{$t('lang.imagePreview.imagePreview')}}
+            </slot>
+        </template>
     </Modal>
 </template>
 
@@ -51,7 +53,6 @@ module.exports = {
             this.$refs.modal.show = true;
             this.src = imageName;
         }
-
     }
 }
 </script>