-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
212 additions
and
10 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| <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="options.info" | ||
| :outputSize="options.outputSize" | ||
| :outputType="options.outputType" | ||
| :canScale="options.canScale" | ||
| :autoCrop="options.autoCrop" | ||
| :autoCropWidth="options.autoCropWidth" | ||
| :autoCropHeight="options.autoCropHeight" | ||
| :fixed="options.fixed" | ||
| :fixedNumber="options.fixedNumber" | ||
| @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> | ||
| import { VueCropper } from 'vue-cropper' | ||
| export default { | ||
| components: { | ||
| VueCropper | ||
| }, | ||
| data () { | ||
| return { | ||
| imgFile: '', | ||
| visible: false, | ||
| confirmLoading: false, | ||
| options: { | ||
| img: '', // 裁剪图片的地址 | ||
| info: true, // 裁剪框的大小信息 | ||
| outputSize: 1, // 裁剪生成图片的质量 | ||
| outputType: 'jpeg', // 裁剪生成图片的格式 | ||
| canScale: false, // 图片是否允许滚轮缩放 | ||
| autoCrop: true, // 是否默认生成截图框 | ||
| autoCropWidth: 200, // 默认生成截图框宽度 | ||
| autoCropHeight: 200, // 默认生成截图框高度 | ||
| fixed: true, // 是否开启截图框宽高固定比例 | ||
| fixedNumber: [1, 1]// 截图框的宽高比例 | ||
| }, | ||
| previews: {} | ||
| } | ||
| }, | ||
| methods: { | ||
| edit (avatar) { | ||
| this.options.img = avatar | ||
| this.visible = true | ||
| }, | ||
| close () { | ||
| 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters