feat: 加上图片预览函数调用

.eslintignore

@@ -1,5 +1,4 @@
 template
 src/components/meKeepAlive
 dist
-vite.config.ts.*
-src/components/meVxeTable/vxe-table-plugin-element
+vite.config.ts.*

src/components/service/meImageViewer.ts

@@ -0,0 +1,24 @@
+import { ElImageViewer } from 'element-plus';
+import { createVNode, render } from 'vue';
+//函数组件只能以服务的方式调用
+export function createImageViewer(props: ComponentProps<typeof ElImageViewer>) {
+  const container = document.createElement('div');
+  const vnode = createVNode(
+    ElImageViewer,
+    Object.assign(
+      {
+        onClose: function () {
+          render(null, container);
+          if (typeof props.onClose === 'function') {
+            props.onClose.call(this);
+          }
+        },
+      },
+      props,
+    ),
+  );
+  render(vnode, container);
+  // instances will remove this item when close function gets called. So we do not need to worry about it.
+  document.body.appendChild(container.firstElementChild!);
+  return vnode;
+}

src/locales/lang/en/menu.json

@@ -16,5 +16,6 @@
   "表格": "Table",
   "自定义表单": "Custom Form",
   "数字动画": "Digital Animation",
-  "角色权限": "Role Permission"
+  "角色权限": "Role Permission",
+  "图片预览": "Image Viewer"
 }

src/router/routes/components/4-imageViewer.ts

@@ -0,0 +1,8 @@
+import { RouteRecordRaw } from 'vue-router';
+export const routes: RouteRecordRaw[] = [
+  {
+    path: 'imageViewer',
+    component: () => import('@/views/components/imageViewer.vue'),
+    meta: { title: '图片预览' },
+  },
+];

src/views/components/imageViewer.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="image-viewer">
+    <el-button @click="show()"> 预览 </el-button>
+  </div>
+</template>
+<script setup lang="ts" name="ImageViewer">
+import { createImageViewer } from '@/components/service/meImageViewer';
+const show = () =>
+  createImageViewer({
+    urlList: [
+      'https://scpic.chinaz.net/Files/pic/pic6/pic1281.jpg',
+      'https://scpic.chinaz.net/files/pic/pic9/202009/apic27858.jpg',
+      'https://tse3-mm.cn.bing.net/th/id/OIP-C.n0_p3rYRuofABd3XudbZnAHaEo?pid=ImgDet&rs=1',
+    ],
+  });
+</script>