RING:素材库预览

public/index.html

@@ -10,7 +10,7 @@
   <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
     <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
     <% } %>
-      <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_2651824_dvnf8rfi7bl.css">
+      <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_2651824_8qs04u9ywnn.css">
       <!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
       <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
         <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>

src/views/material/component/common-table.vue

@@ -82,7 +82,7 @@
         }"
       />
     </a-modal>
-    <a-modal
+    <!-- <a-modal
       v-model:visible="previewVisible"
       width="40%"
       height="200px"
@@ -103,12 +103,19 @@
         :src="currentUrl"
         controls
       ></video>
-    </a-modal>
+    </a-modal> -->
+    <preview-box
+      @close="previewVisible = false"
+      :type="type"
+      :url="currentUrl"
+      v-if="previewVisible"
+    ></preview-box>
   </div>
 </template>
 
 <script lang="ts">
 import usePagination from "@/hooks/usePagination";
+import PreviewBox from "./preview.vue";
 import {
   defineComponent,
   reactive,
@@ -132,7 +139,7 @@ import {
 } from "@/api";
 import { message } from "ant-design-vue";
 const CommonTable = defineComponent({
-  components: {},
+  components: { PreviewBox },
   props: ["materialType", "searchForm"],
   setup(props) {
     let { tablePageOptions } = usePagination();
@@ -236,8 +243,8 @@ const CommonTable = defineComponent({
     },
     // 点击预览
     onOpenPreview(url: string) {
-      this.previewVisible = true;
       this.currentUrl = url;
+      this.previewVisible = true;
     },
   },
   //https://firemanage.oss-cn-hangzhou.aliyuncs.com/material/video/S-20210739163739-E9XA.mp4?x-oss-process=video/snapshot,t_0,f_jpg,m_fast

src/views/material/component/preview.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="cover" @click="$emit('close')">
+    <div class="preview-box" @click.stop>
+      <i class="iconfont icon-guanbi" @click="$emit('close')"></i>
+      <i
+        class="iconfont icon-jia"
+        @click="test('B')"
+        v-show="playType === 'picture'"
+      ></i>
+      <i
+        class="iconfont icon-jian"
+        @click="test('S')"
+        v-show="playType === 'picture'"
+      ></i>
+      <div class="player">
+        <img
+          :src="playUrl"
+          alt=""
+          v-show="playType === 'picture'"
+          :style="{ transform: 'scale(' + multiples + ')' }"
+        />
+        <video
+          v-show="playType === 'video'"
+          style="max-width: 100%; max-height: 100%"
+          :src="playUrl"
+          controls
+        ></video>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, toRefs, ref } from "vue";
+import { message } from "ant-design-vue";
+const PreviewBox = defineComponent({
+  components: {},
+  props: ["url", "type"],
+  setup() {
+    const formRef = ref();
+    const state = reactive({
+      playUrl: "",
+      playType: "",
+      multiples: 1,
+    });
+    return { ...toRefs(state) };
+  },
+  mounted() {
+    console.log(this.$props.url, this.$props.type);
+    this.playUrl = this.$props.url;
+    this.playType = this.$props.type;
+  },
+  methods: {
+    test(val: any) {
+      if (val === "B") {
+        // 放大
+        if (this.multiples >= 3) {
+          return;
+        }
+        this.multiples += 0.25;
+      } else {
+        if (this.multiples <= 0.6) {
+          return;
+        }
+        this.multiples -= 0.25;
+      }
+    },
+  },
+});
+
+export default PreviewBox;
+</script>
+<style lang="scss" scoped>
+.cover {
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  position: fixed;
+  background: rgba(0, 0, 0, 0);
+}
+.preview-box {
+  // width: 100%;
+  // height: 100%;
+  // top: 0;
+  // left: 0;
+  position: fixed;
+  width: 700px;
+  height: 500px;
+  top: 50%;
+  left: 50%;
+  margin: -250px 0 0 -350px;
+  z-index: 1;
+  background: rgba(0, 0, 0, 0.9);
+  transition: 0.5s all;
+  i {
+    position: absolute;
+    font-size: 18px;
+    color: white;
+    font-weight: bold;
+    z-index: 1000;
+    &:hover {
+      color: rgb(253, 119, 235);
+      cursor: pointer;
+    }
+  }
+  .icon-guanbi {
+    right: 6px;
+  }
+  .icon-jia {
+    left: 330px;
+    bottom: 4px;
+  }
+  .icon-jian {
+    left: 370px;
+    bottom: 4px;
+  }
+  .player {
+    z-index: 10;
+    width: 640px;
+    height: 440px;
+    margin: 30px auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    img {
+      max-width: 100%;
+      max-height: 100%;
+      transition: 0.3s all;
+    }
+  }
+}
+</style>