| | |
| | | </el-row> |
| | | <br /> |
| | | <el-row> |
| | | <el-col :lg="2" :md="2"> |
| | | <el-col :lg="2" :sm="3" :xs="3"> |
| | | <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload"> |
| | | <el-button size="small"> |
| | | 选择 |
| | |
| | | </el-button> |
| | | </el-upload> |
| | | </el-col> |
| | | <el-col :lg="{span: 1, offset: 2}" :md="2"> |
| | | <el-col :lg="{span: 1, offset: 2}" :sm="2" :xs="2"> |
| | | <el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button> |
| | | </el-col> |
| | | <el-col :lg="{span: 1, offset: 1}" :md="2"> |
| | | <el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2"> |
| | | <el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button> |
| | | </el-col> |
| | | <el-col :lg="{span: 1, offset: 1}" :md="2"> |
| | | <el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2"> |
| | | <el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button> |
| | | </el-col> |
| | | <el-col :lg="{span: 1, offset: 1}" :md="2"> |
| | | <el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2"> |
| | | <el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button> |
| | | </el-col> |
| | | <el-col :lg="{span: 2, offset: 6}" :md="2"> |
| | | <el-col :lg="{span: 2, offset: 6}" :sm="2" :xs="2"> |
| | | <el-button type="primary" size="small" @click="uploadImg()">提 交</el-button> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | import store from "@/store"; |
| | | import { VueCropper } from "vue-cropper"; |
| | | import { uploadAvatar } from "@/api/system/user"; |
| | | import { debounce } from '@/utils' |
| | | |
| | | export default { |
| | | components: { VueCropper }, |
| | |
| | | fixedBox: true, // 固定截图框大小 不允许改变 |
| | | filename: '' |
| | | }, |
| | | previews: {} |
| | | previews: {}, |
| | | resizeHandler: null |
| | | }; |
| | | }, |
| | | methods: { |
| | |
| | | // 打开弹出层结束时的回调 |
| | | modalOpened() { |
| | | this.visible = true; |
| | | if (!this.resizeHandler) { |
| | | this.resizeHandler = debounce(() => { |
| | | this.refresh() |
| | | }, 100) |
| | | } |
| | | window.addEventListener("resize", this.resizeHandler) |
| | | }, |
| | | // 刷新组件 |
| | | refresh() { |
| | | this.$refs.cropper.refresh(); |
| | | }, |
| | | // 覆盖默认的上传行为 |
| | | requestUpload() { |
| | |
| | | closeDialog() { |
| | | this.options.img = store.getters.avatar |
| | | this.visible = false; |
| | | window.removeEventListener("resize", this.resizeHandler) |
| | | } |
| | | } |
| | | }; |