Merge pull request 'fix: 修改预览图片的功能；' (#40) from yangws into main

Reviewed-on: #40

package.json

@@ -21,6 +21,7 @@
     "@electron-toolkit/preload": "^3.0.1",
     "@electron-toolkit/utils": "^3.0.0",
     "@element-plus/icons-vue": "^2.3.1",
+    "@vueuse/core": "^10.11.0",
     "crypto-js": "^4.2.0",
     "electron-dl-manager": "^3.0.0",
     "electron-updater": "^6.1.7",

src/renderer/src/views/profile/index.vue

@@ -136,4 +136,8 @@ getUser()
   width: 1em;
   height: 1em;
 }
+.app-container{
+  padding-top: 20px;
+  height: 100%;
+}
 </style>

src/renderer/src/views/profile/userAvatar.vue

@@ -26,7 +26,7 @@
         </el-col>
         <el-col :xs="24" :md="12" :style="{ height: '350px' }">
           <div class="avatar-upload-preview">
-            <el-image style="width: 100px; height: 100px" :src="options.previews.url" :style="options.previews.img"/>
+            <div v-show="show" class="large" :style="[{backgroundImage:`url(${options.img})`},largePosition]"></div>
           </div>
         </el-col>
       </el-row>
@@ -67,12 +67,13 @@
 
   <script setup>
 import { Upload, Plus, Minus, RefreshLeft, RefreshRight } from '@element-plus/icons-vue'
-import { ref, reactive, getCurrentInstance } from 'vue'
+import {ref, reactive, getCurrentInstance, watch} from 'vue'
 import 'vue-cropper/dist/index.css'
 import { VueCropper } from 'vue-cropper'
 import { uploadAvatar } from '@/api/system/user'
 import useUserStore from '@/store/modules/user'
 import { ElMessage } from 'element-plus'
+import { useMouseInElement } from '@vueuse/core'
 
 const userStore = useUserStore()
 const { proxy } = getCurrentInstance()
@@ -91,6 +92,22 @@ const options = reactive({
   outputType: 'png', // 默认生成截图为PNG格式
   previews: {} //预览数据
 })
+// 是否显示遮罩和大图
+const show = ref(false)
+//监听是否拖动
+const random = ref('')
+// 遮罩的坐标(样式)
+const layerPosition = reactive({
+  left: 0,
+  top: 0
+})
+// 大图背景定位(样式)
+const largePosition = reactive({
+  backgroundPositionX: 0,
+  backgroundPositionY: 0
+})
+const cropper = ref(null)
+const { elementX, elementY } = useMouseInElement(cropper)
 
 /** 编辑头像 */
 function editCropper() {
@@ -147,15 +164,41 @@ function uploadImg() {
     })
   })
 }
+
 /** 实时预览 */
 function realTime(data) {
   options.previews = data
+  random.value = getRandomValue()
+}
+// 生成一个随机数的函数监听滑动的改变
+const getRandomValue = () => {
+  return Math.random()
 }
 /** 关闭窗口 */
 function closeDialog() {
   options.img = userStore.avatar
+  console.log(userStore.avatar,'userStore.avatar')
   options.visible = false
 }
+watch(random, () => {
+  // 根据得到数据设置样式数据和是否显示数据
+  show.value = true
+  // 计算坐标
+  const position = { x: 0, y: 0 }
+
+  if (elementX.value < 100) position.x = 0
+  else if (elementX.value > 300) position.x = 200
+  else position.x = elementX.value - 100
+
+  if (elementY.value < 100) position.y = 0
+  else if (elementY.value > 300) position.y = 200
+  else position.y = elementY.value - 100
+  // 给样式赋值
+  layerPosition.left = position.x + 'px'
+  layerPosition.top = position.y + 'px'
+  largePosition.backgroundPositionX = -2 * position.x + 'px'
+  largePosition.backgroundPositionY = -2 * position.y + 'px'
+},{deep:true})
 </script>
 
   <style lang='scss' scoped>
@@ -186,4 +229,26 @@ function closeDialog() {
   height: 120px;
   width: auto;
 }
+.avatar-upload-preview {
+  position:relative;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative; /* 设置相对定位 */
+  left: 10px; /* 向右偏移10像素 */
+}
+.large {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 500px;
+  height: 450px;
+  box-shadow: 0 0 10px rgba(0,0,0,0.1);
+  background-repeat: no-repeat;
+  background-size: 800px 800px;
+  background-color: #f8f8f8;
+}
 </style>