mirror of
https://gitee.com/huangge1199_admin/vue-pro.git
synced 2024-11-22 23:31:52 +08:00
refactor
This commit is contained in:
xingyu
parent
0e6c187008
commit
974361041a
@ -1,46 +1,44 @@
|
||||
<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) => {
|
||||
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 = () => {
|
||||
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 = () => {
|
||||
}
|
||||
/** 实时预览 */
|
||||
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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user