Skip to content

P
pptist
Commit 2de0ad61 authored by zhengke's avatar zhengke
Browse files
Options

系统资料 替换图

parent 021693b3
Hide whitespace changes
Inline Side-by-side
Showing with 52 additions and 20 deletions
src/views/components/source/ImageOpera.vue
View file @ 2de0ad61
...@@ -21,7 +21,6 @@ ...@@ -21,7 +21,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { useMainStore } from "@/store"; import { useMainStore } from "@/store";
import { copyText, replaceText } from "@/utils/clipboard";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
import { ref } from "vue"; import { ref } from "vue";
...@@ -62,7 +61,7 @@ const handleInsert=()=>{ ...@@ -62,7 +61,7 @@ const handleInsert=()=>{
color: black; color: black;
} }
.imageOperaBox{ .imageOperaBox{
padding:4px 10px; padding:4px;
position: relative; position: relative;
position: fixed; position: fixed;
top: -50px; top: -50px;
...@@ -78,11 +77,11 @@ const handleInsert=()=>{ ...@@ -78,11 +77,11 @@ const handleInsert=()=>{
width: 0; width: 0;
height: 0; height: 0;
position: absolute; position: absolute;
left: 15px; left: 13px;
bottom: -10px; bottom: -5px;
border-left: 10px solid transparent; border-left: 6px solid transparent;
border-right: 10px solid transparent; border-right: 6px solid transparent;
border-top: 10px solid rgba(23,23,23,.5); border-top: 5px solid rgba(23,23,23,.5);
} }
.imageOperaI{ .imageOperaI{
left: 160px; left: 160px;
...@@ -93,9 +92,9 @@ const handleInsert=()=>{ ...@@ -93,9 +92,9 @@ const handleInsert=()=>{
height: 0; height: 0;
position: absolute; position: absolute;
left: 28px; left: 28px;
bottom: -10px; bottom: -5px;
border-left: 10px solid transparent; border-left: 6px solid transparent;
border-right: 10px solid transparent; border-right: 6px solid transparent;
border-top: 10px solid rgba(23,23,23,.5); border-top: 5px solid rgba(23,23,23,.5);
} }
</style> </style>
\ No newline at end of file
src/views/components/source/SourceDetail.vue
View file @ 2de0ad61
...@@ -13,20 +13,52 @@ ...@@ -13,20 +13,52 @@
<el-scrollbar max-height="50vh"> <el-scrollbar max-height="50vh">
<div class="item-poi-img q-mt-md" v-if="data.ImgArray && data.ImgArray.length > 0"> <div class="item-poi-img q-mt-md" v-if="data.ImgArray && data.ImgArray.length > 0">
<div class="container row"> <div class="container row">
<el-image class="col full-height" :preview-teleported="true" :src="data.ImgArray[0]" fit="cover" @click="setImages(0)" /> <div class="col full-height">
<image-opera-hover
@handleInsert="currentImg=0,handleInsert()"
@handleReplace="currentImg=0,handleReplace()">
<el-image class="full-height" :preview-teleported="true" :src="data.ImgArray[0]" fit="cover" @click="setImages(0)" />
</image-opera-hover>
</div>
<div style="width: 60%;" class="q-ml-sm row" v-if="data.ImgArray.length > 1"> <div style="width: 60%;" class="q-ml-sm row" v-if="data.ImgArray.length > 1">
<div class="col column"> <div class="col column">
<el-image class="col full-width" :preview-teleported="true" :src="data.ImgArray[1]" fit="cover" @click="setImages(1)" /> <div class="col full-height">
<el-image v-if="data.ImgArray.length > 2" :preview-teleported="true" <image-opera-hover
class="col full-width q-mt-sm" :src="data.ImgArray[2]" fit="cover" @click="setImages(2)" /> @handleInsert="currentImg=1,handleInsert()"
@handleReplace="currentImg=1,handleReplace()">
<el-image class="full-height" :preview-teleported="true" :src="data.ImgArray[1]" fit="cover" @click="setImages(1)" />
</image-opera-hover>
</div>
<div v-if="data.ImgArray.length > 2" class="col full-height q-mt-sm">
<image-opera-hover
@handleInsert="currentImg=2,handleInsert()"
@handleReplace="currentImg=2,handleReplace()">
<el-image :preview-teleported="true"
class="full-height" :src="data.ImgArray[2]" fit="cover" @click="setImages(2)" />
</image-opera-hover>
</div>
</div> </div>
<div class="col column q-ml-sm" v-if="data.ImgArray.length > 3"> <div class="col column q-ml-sm" v-if="data.ImgArray.length > 3">
<el-image class="col full-width" :preview-teleported="true" :src="data.ImgArray[3]" fit="cover" @click="setImages(3)" /> <div class="col full-width">
<image-opera-hover
@handleInsert="currentImg=3,handleInsert()"
@handleReplace="currentImg=3,handleReplace()">
<el-image class="full-width full-height" :preview-teleported="true" :src="data.ImgArray[3]" fit="cover" @click="setImages(3)" />
</image-opera-hover>
</div>
<div class="col full-width q-mt-sm last-img" v-if="data.ImgArray.length > 4"> <div class="col full-width q-mt-sm last-img" v-if="data.ImgArray.length > 4">
<el-image class="col full-height" v-if="data.ImgArray.length > 4" <div class="col full-height">
:preview-teleported="true" :src="data.ImgArray[4]" fit="cover" @click="setImages(4)" /> <image-opera-hover
@handleInsert="currentImg=4,handleInsert()"
@handleReplace="currentImg=4,handleReplace()">
<el-image class="full-height"
:preview-teleported="true" :src="data.ImgArray[4]" fit="cover" @click="setImages(4)" />
</image-opera-hover>
</div>
<div class="content column items-center flex-center text-white" <div class="content column items-center flex-center text-white"
style="text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);" style="text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);"
...@@ -81,8 +113,7 @@ ...@@ -81,8 +113,7 @@
</div> </div>
<template v-if="isViewerShow"> <template v-if="isViewerShow">
<image-opera <image-opera
@handleCopyImage="handleCopyImage"
@handleInsert="handleInsert" @handleInsert="handleInsert"
@handleReplace="handleReplace"/> @handleReplace="handleReplace"/>
<el-image-viewer <el-image-viewer
...@@ -106,6 +137,8 @@ import type { PPTImageElement } from '@/types/slides' ...@@ -106,6 +137,8 @@ import type { PPTImageElement } from '@/types/slides'
import { copyImage, replaceText } from "@/utils/clipboard"; import { copyImage, replaceText } from "@/utils/clipboard";
import TextOpera from './TextOpera.vue' import TextOpera from './TextOpera.vue'
import ImageOpera from './ImageOpera.vue' import ImageOpera from './ImageOpera.vue'
import ImageOperaHover from './ImageOperaHover.vue'
const { createImageElement } = useCreateElement() const { createImageElement } = useCreateElement()
const mainStore = useMainStore() const mainStore = useMainStore()
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment