refactor

xingyu
1 parent 0e6c1870
Showing 2 changed files with 70 additions and 51 deletions
yudao-ui-admin-vue3/src/views/Profile/components/UserAvatar.vue
yudao-ui-admin-vue3/src/views/Profile/components/UserSocial.vue
 <template>
   <div class="user-info-head" @click="editCropper()">
-    <img :src="options.options.img" title="点击上传头像" class="img-circle img-lg" alt="" />
+    <img :src="props.img" title="点击上传头像" class="img-circle img-lg" alt="" />
   </div>
   <el-dialog
     v-model="dialogVisible"
     title="编辑头像"
+    :mask-closable="false"
     width="800px"
     append-to-body
-    style="padding: 30px 20px"
-    @opened="modalOpened"
+    @opened="cropperVisible = true"
   >
     <el-row>
-      <el-col :xs="24" :md="12" style="height: 350px">
+      <el-col :xs="24" :md="12" :style="{ height: '350px' }">
         <VueCropper
           ref="cropper"
           v-if="cropperVisible"
-          :img="options.options.img"
+          :img="options.img"
           :info="true"
-          :autoCrop="options.options.autoCrop"
-          :autoCropWidth="options.options.autoCropWidth"
-          :autoCropHeight="options.options.autoCropHeight"
-          :fixedBox="options.options.fixedBox"
-          @real-time="realTime"
+          :infoTrue="options.infoTrue"
+          :autoCrop="options.autoCrop"
+          :autoCropWidth="options.autoCropWidth"
+          :autoCropHeight="options.autoCropHeight"
+          :fixedNumber="options.fixedNumber"
+          :fixedBox="options.fixedBox"
+          :centerBox="options.centerBox"
+          @realTime="realTime"
         />
       </el-col>
-      <el-col :xs="24" :md="12" style="height: 350px">
+      <el-col :xs="24" :md="12" :style="{ height: '350px' }">
         <div
           class="avatar-upload-preview"
           :style="{
-            width: options.previews.w + 'px',
-            height: options.previews.h + 'px',
+            width: previews.w + 'px',
+            height: previews.h + 'px',
             overflow: 'hidden',
             margin: '5px'
           }"
         >
-          <div :style="options.previews.div">
-            <img
-              :src="options.previews.url"
-              :style="options.previews.img"
-              style="!max-width: 100%"
-              alt=""
-            />
+          <div :style="previews.div">
+            <img :src="previews.url" :style="previews.img" style="!max-width: 100%" alt="" />
           </div>
         </div>
       </el-col>
@@ -88,9 +86,9 @@
   </el-dialog>
 </template>
 <script setup lang="ts">
-import { ref, reactive, watch } from 'vue'
+import { ref, reactive, watch, Ref, UnwrapNestedRefs } from 'vue'
 import 'vue-cropper/dist/index.css'
-import { VueCropper } from 'vue-cropper'
+import VueCropper from 'vue-cropper/lib/vue-cropper.vue'
 import { ElRow, ElCol, ElUpload, ElMessage, ElDialog } from 'element-plus'
 import { propTypes } from '@/utils/propTypes'
 import { uploadAvatarApi } from '@/api/system/user/profile'
@@ -101,30 +99,47 @@ const cropperVisible = ref(false)
 const props = defineProps({
   img: propTypes.string.def('')
 })
-const options = reactive({
-  options: {
-    img: props.img, //裁剪图片的地址
-    autoCrop: true, // 是否默认生成截图框
-    autoCropWidth: 200, // 默认生成截图框宽度
-    autoCropHeight: 200, // 默认生成截图框高度
-    fixedBox: true // 固定截图框大小 不允许改变
-  },
-  previews: {
-    img: '',
-    url: '',
-    w: 0,
-    h: 0,
-    div: ''
-  }
+interface Options {
+  img: string | ArrayBuffer | null // 裁剪图片的地址
+  info: true // 裁剪框的大小信息
+  outputSize: number // 裁剪生成图片的质量 [1至0.1]
+  outputType: 'jpeg' // 裁剪生成图片的格式
+  canScale: boolean // 图片是否允许滚轮缩放
+  autoCrop: boolean // 是否默认生成截图框
+  autoCropWidth: number // 默认生成截图框宽度
+  autoCropHeight: number // 默认生成截图框高度
+  fixedBox: boolean // 固定截图框大小 不允许改变
+  fixed: boolean // 是否开启截图框宽高固定比例
+  fixedNumber: Array<number> // 截图框的宽高比例  需要配合centerBox一起使用才能生效
+  full: boolean // 是否输出原图比例的截图
+  canMoveBox: boolean // 截图框能否拖动
+  original: boolean // 上传图片按照原始比例渲染
+  centerBox: boolean // 截图框是否被限制在图片里面
+  infoTrue: boolean // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
+}
+const options: UnwrapNestedRefs<Options> = reactive({
+  img: '', // 需要剪裁的图片
+  autoCrop: true, // 是否默认生成截图框
+  autoCropWidth: 200, // 默认生成截图框的宽度
+  autoCropHeight: 200, // 默认生成截图框的长度
+  fixedBox: false, // 是否固定截图框的大小 不允许改变
+  info: true, // 裁剪框的大小信息
+  outputSize: 1, // 裁剪生成图片的质量 [1至0.1]
+  outputType: 'jpeg', // 裁剪生成图片的格式
+  canScale: false, // 图片是否允许滚轮缩放
+  fixed: true, // 是否开启截图框宽高固定比例
+  fixedNumber: [1, 1], // 截图框的宽高比例 需要配合centerBox一起使用才能生效
+  full: true, // 是否输出原图比例的截图
+  canMoveBox: false, // 截图框能否拖动
+  original: false, // 上传图片按照原始比例渲染
+  centerBox: true, // 截图框是否被限制在图片里面
+  infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
 })
+const previews: Ref<any> = ref({})
 /** 编辑头像 */
 const editCropper = () => {
   dialogVisible.value = true
 }
-// 打开弹出层结束时的回调
-const modalOpened = () => {
-  cropperVisible.value = true
-}
 /** 向左旋转 */
 const rotateLeft = () => {
   cropper.value.rotateLeft()
@@ -146,11 +161,14 @@ const beforeUpload = (file: Blob) =&gt; {
     ElMessage('文件格式错误，请上传图片类型,如:JPG,PNG后缀的文件。')
   } else {
     const reader = new FileReader()
+    // 转化为base64
     reader.readAsDataURL(file)
     reader.onload = () => {
       if (reader.result) {
-        options.options.img = reader.result as string
+        // 获取到需要剪裁的图片 展示到剪裁框中
+        options.img = reader.result as string
       }
+      return false
     }
   }
 }
@@ -160,7 +178,8 @@ const uploadImg = () =&gt; {
     let formData = new FormData()
     formData.append('avatarFile', data)
     uploadAvatarApi(formData).then((res) => {
-      options.options.img = res
+      options.img = res
+      window.location.reload()
     })
     dialogVisible.value = false
     cropperVisible.value = false
@@ -168,15 +187,15 @@ const uploadImg = () =&gt; {
 }
 /** 实时预览 */
 const realTime = (data: any) => {
-  options.previews = data
+  previews.value = data
 }
 watch(
   () => props.img,
   () => {
     if (props.img) {
-      options.options.img = props.img
-      options.previews.img = props.img
-      options.previews.url = props.img
+      options.img = props.img
+      previews.value.img = props.img
+      previews.value.url = props.img
     }
   }
 )
@@ -3,19 +3,19 @@
     <el-table-column type="seq" title="序号" width="60" fixed="left" />
     <el-table-column label="社交平台" align="left" width="120">
       <template #default="{ row }">
-        <img style="height: 20px; vertical-align: middle" :src="row.img" alt="" />
-        {{ row.title }}
+        <img class="h-5 align-middle" :src="row.img" alt="" />
+        <p class="mr-5">{{ row.title }}</p>
       </template>
     </el-table-column>
     <el-table-column label="操作" align="center">
       <template #default="{ row }">
         <template v-if="row.openid">
           已绑定
-          <XTextButton type="primary" @click="unbind(row)" title="(解绑)" />
+          <XTextButton type="primary" class="mr-5" @click="unbind(row)" title="(解绑)" />
         </template>
         <template v-else>
           未绑定
-          <XTextButton type="primary" @click="bind(row)" title="(绑定)" />
+          <XTextButton type="primary" class="mr-5" @click="bind(row)" title="(绑定)" />
         </template>
       </template>
     </el-table-column>