mirror of https://github.com/veops/cmdb.git
110 lines
2.3 KiB
Python
110 lines
2.3 KiB
Python
<template>
|
|
<a-modal
|
|
title="修改头像"
|
|
:visible="visible"
|
|
:maskClosable="false"
|
|
:confirmLoading="confirmLoading"
|
|
:width="800"
|
|
@cancel="cancelHandel">
|
|
<a-row>
|
|
<a-col :xs="24" :md="12" :style="{height: '350px'}">
|
|
<vue-cropper
|
|
ref="cropper"
|
|
:img="options.img"
|
|
:info="true"
|
|
:autoCrop="options.autoCrop"
|
|
:autoCropWidth="options.autoCropWidth"
|
|
:autoCropHeight="options.autoCropHeight"
|
|
:fixedBox="options.fixedBox"
|
|
@realTime="realTime"
|
|
>
|
|
</vue-cropper>
|
|
</a-col>
|
|
<a-col :xs="24" :md="12" :style="{height: '350px'}">
|
|
<div class="avatar-upload-preview">
|
|
<img :src="previews.url" :style="previews.img"/>
|
|
</div>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<template slot="footer">
|
|
<a-button key="back" @click="cancelHandel">{{ $t('button.cancel') }}</a-button>
|
|
<a-button key="submit" type="primary" :loading="confirmLoading" @click="okHandel">保存</a-button>
|
|
</template>
|
|
</a-modal>
|
|
</template>
|
|
<script>
|
|
// import { VueCropper } from 'vue-cropper'
|
|
|
|
export default {
|
|
/*
|
|
components: {
|
|
VueCropper
|
|
},
|
|
*/
|
|
data () {
|
|
return {
|
|
visible: false,
|
|
id: null,
|
|
confirmLoading: false,
|
|
|
|
options: {
|
|
img: '/avatar2.jpg',
|
|
autoCrop: true,
|
|
autoCropWidth: 200,
|
|
autoCropHeight: 200,
|
|
fixedBox: true
|
|
},
|
|
previews: {}
|
|
}
|
|
},
|
|
methods: {
|
|
edit (id) {
|
|
this.visible = true
|
|
this.id = id
|
|
/* 获取原始头像 */
|
|
},
|
|
close () {
|
|
this.id = null
|
|
this.visible = false
|
|
},
|
|
cancelHandel () {
|
|
this.close()
|
|
},
|
|
okHandel () {
|
|
const vm = this
|
|
|
|
vm.confirmLoading = true
|
|
setTimeout(() => {
|
|
vm.confirmLoading = false
|
|
vm.close()
|
|
vm.$message.success('上传头像成功')
|
|
}, 2000)
|
|
},
|
|
|
|
realTime (data) {
|
|
this.previews = data
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
|
|
.avatar-upload-preview {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translate(50%, -50%);
|
|
width: 180px;
|
|
height: 180px;
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 4px #ccc;
|
|
overflow: hidden;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
</style>
|