crop.vue
2.33 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<template>
<el-dialog
title="证件照编辑"
:visible.sync="isShow"
:close-on-click-modal="false"
class="manage-dialog crop-dialog"
@close="closeDialog">
<profile-component field="file" :profiles="profiles" @cropedImg="getCropedPic"></profile-component>
<div slot="footer" class="dialog-footer">
<el-button @click="isShow = false" class="dialog-btn">{{$t('dialog.cancel')}}</el-button>
<el-button type="primary" @click="cropSubmit" class="dialog-btn dialog-confirm-btn">{{$t('dialog.confirm')}}</el-button>
</div>
</el-dialog>
</template>
<script>
// import profileUpload from 'vue-image-crop-upload'
import localProfile from './cropimg'
export default {
components: {
// 'profile-upload': profileUpload,
'profile-component': localProfile
},
props: {
},
data() {
return {
isShow: false,
profiles: {},
employeeId: null,
profileFormData: null,
blobProfile: ''
}
},
computed: {
},
created() {
},
mounted() {
//
},
methods: {
cropDialogInit(file, employeeId) {
// console.log('cropDialogInit', file);
this.profiles = file;
this.employeeId = employeeId || null;
this.isShow = true;
},
getCropedPic(isSupport, cropedPath, cropedBlobUrl) {
// console.log('cropedImg', cropedPath, cropedBlobUrl)
if(!isSupport) {
this.$alert('浏览器不支持裁剪功能,请使用IE10以上或其他主流浏览器', '提示', {
confirmButtonText: '确定',
callback: action => {
console.log(`action: ${action}`)
this.isShow = false;
}
});
return
}
this.profileFormData = cropedPath;
this.blobProfile = cropedBlobUrl;
},
cropSubmit() {
this.$emit('profilePath', this.profileFormData, this.blobProfile);
this.isShow = false;
},
closeDialog() {
this.blobProfile = '';
this.profileFormData = this.employeeId = null;
this.profiles = null;
},
}
}
</script>
<style scoped>
</style>