perf: 优化图片预览，优化与弹窗esc按键冲突的问题

chinaguojian · Mar 17, 2022 · 868b8e7 · 868b8e7
1 parent 6115828
commit 868b8e7
Show file tree

Hide file tree

Showing 6 changed files with 451 additions and 19 deletions.
diff --git a/resources/assets/js/App.vue b/resources/assets/js/App.vue
@@ -7,16 +7,18 @@
         </transition>
         <Spinner/>
         <RightBottom/>
+        <PreviewImage/>
     </div>
 </template>
 
 <script>
 import Spinner from "./components/Spinner";
 import RightBottom from "./components/RightBottom";
+import PreviewImage from "./components/PreviewImage";
 import {mapState} from "vuex";
 
 export default {
-    components: {RightBottom, Spinner},
+    components: {PreviewImage, RightBottom, Spinner},
 
     data() {
         return {

diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
@@ -45,15 +45,13 @@ import {
     DropdownMenu,
     DropdownItem,
 } from 'element-ui';
-import ImageViewer from 'element-ui/packages/image/src/image-viewer';
 
 Vue.component('EAvatar', Avatar);
 Vue.component('ETooltip', Tooltip);
 Vue.component('EPopover', Popover);
 Vue.component('EDropdown', Dropdown);
 Vue.component('EDropdownMenu', DropdownMenu);
 Vue.component('EDropdownItem', DropdownItem);
-Vue.component('EImageViewer', ImageViewer);
 
 const originalPush = VueRouter.prototype.push
 VueRouter.prototype.push = function push(location) {

diff --git a/resources/assets/js/components/PreviewImage/index.vue b/resources/assets/js/components/PreviewImage/index.vue
@@ -0,0 +1,85 @@
+<template>
+    <Modal
+        :value="previewImageList.length > 0"
+        :mask-closable="false"
+        :footer-hide="true"
+        :transition-names="['fade', 'fade']"
+        fullscreen
+        @on-visible-change="visibleChange"
+        class-name="common-preview-image">
+        <PreviewImageView v-if="previewImageList.length > 0" :initial-index="previewImageIndex" :url-list="previewImageList" infinite/>
+    </Modal>
+</template>
+
+<style lang="scss">
+body {
+    .ivu-modal-wrap {
+        &.common-preview-image {
+            .ivu-modal {
+                margin: 0;
+                padding: 0;
+                .ivu-modal-content {
+                    background: transparent;
+                    .ivu-modal-close {
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        border-radius: 50%;
+                        background-color: #606266;
+                        font-size: 24px;
+                        height: 40px;
+                        right: 40px;
+                        top: 40px;
+                        width: 40px;
+                        .ivu-icon-ios-close {
+                            top: 0;
+                            right: 0;
+                            font-size: 40px;
+                            color: #fff;
+                        }
+                    }
+                    .ivu-modal-body {
+                        padding: 0;
+                    }
+                }
+            }
+        }
+    }
+}
+</style>
+
+<script>
+import PreviewImageView from "./view";
+import {mapState} from "vuex";
+
+export default {
+    name: 'PreviewImage',
+    components: {PreviewImageView},
+
+    data() {
+        return {
+
+        }
+    },
+    mounted() {
+
+    },
+    computed: {
+        ...mapState([
+            'previewImageIndex',
+            'previewImageList',
+        ]),
+    },
+    methods: {
+        visibleChange(val) {
+            if (!val) {
+                this.close()
+            }
+        },
+        close() {
+            this.$store.state.previewImageIndex = 0;
+            this.$store.state.previewImageList = [];
+        },
+    }
+};
+</script>