Blame view

ant-design-vue-jeecg/src/views/account/settings/AvatarModal.vue 2.18 KB
肖超群 authored
1
<template>
肖超群 authored
2
3
  <a-modal :visible="visible" title="修改头像" :maskClosable="false" :confirmLoading="confirmLoading" :width="800"
           @cancel="cancelHandel">
肖超群 authored
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
    <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">取消</a-button>
      <a-button key="submit" type="primary" :loading="confirmLoading" @click="okHandel">保存</a-button>
    </template>
  </a-modal>
</template>
<script>
肖超群 authored
32
import {VueCropper} from 'vue-cropper'
肖超群 authored
33
肖超群 authored
34
35
36
37
38
39
40
41
42
export default {
  components: {
    VueCropper
  },
  data() {
    return {
      visible: false,
      id: null,
      confirmLoading: false,
肖超群 authored
43
肖超群 authored
44
45
46
47
48
49
      options: {
        img: '/avatar2.jpg',
        autoCrop: true,
        autoCropWidth: 200,
        autoCropHeight: 200,
        fixedBox: true
肖超群 authored
50
      },
肖超群 authored
51
52
53
54
55
56
57
58
      previews: {},
    };
  },
  methods: {
    edit(id) {
      this.visible = true;
      this.id = id;
      /* 获取原始头像 */
肖超群 authored
59
肖超群 authored
60
61
62
63
64
65
66
67
68
69
    },
    close() {
      this.id = null;
      this.visible = false;
    },
    cancelHandel() {
      this.close();
    },
    okHandel() {
      const vm = this
肖超群 authored
70
肖超群 authored
71
72
73
74
75
76
77
78
      vm.confirmLoading = true
      setTimeout(() => {
        vm.confirmLoading = false
        vm.close()
        vm.$message.success('上传头像成功');
      }, 2000)

    },
肖超群 authored
79
肖超群 authored
80
81
    realTime(data) {
      this.previews = data
肖超群 authored
82
    }
肖超群 authored
83
84
  }
};
肖超群 authored
85
86
87
88
</script>

<style lang="less" scoped>
肖超群 authored
89
90
91
92
93
94
95
96
97
.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;
肖超群 authored
98
肖超群 authored
99
100
101
  img {
    width: 100%;
    height: 100%;
肖超群 authored
102
  }
肖超群 authored
103
}
肖超群 authored
104
</style>