!604 修复小屏幕上修改头像界面布局错位的问题 Merge pull request !604 from 也曾为你、像超人/master

若依

2022-10-21 b67f6a0fec924e4212894dde7d57376878612093

!604 修复小屏幕上修改头像界面布局错位的问题
Merge pull request !604 from 也曾为你、像超人/master

 ruoyi-ui/src/assets/styles/ruoyi.scss

@@ -250,9 +250,10 @@
}



.avatar-upload-preview {

    position: absolute;

    position: relative;
    top: 50%;

    transform: translate(50%, -50%);

    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;

    height: 200px;

    border-radius: 50%;


 ruoyi-ui/src/views/system/user/profile/userAvatar.vue

@@ -24,7 +24,7 @@
      </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">

              选择

@@ -32,19 +32,19 @@
            </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>

@@ -56,6 +56,7 @@
import store from "@/store";

import { VueCropper } from "vue-cropper";

import { uploadAvatar } from "@/api/system/user";

import { debounce } from '@/utils'


export default {

  components: { VueCropper },

@@ -79,7 +80,8 @@
        autoCropHeight: 200, // 默认生成截图框高度

        fixedBox: true // 固定截图框大小 不允许改变

      },

      previews: {}

      previews: {},
      resizeHandler: null
    };

  },

  methods: {

@@ -90,6 +92,16 @@
    // 打开弹出层结束时的回调

    modalOpened() {

      this.visible = true;

      if (!this.resizeHandler) {
        this.resizeHandler = debounce(() => {
          this.refresh()
        }, 100)
      }
      window.addEventListener("resize", this.resizeHandler)
    },
    // 刷新组件
    refresh() {
      this.$refs.cropper.refresh();
    },

    // 覆盖默认的上传行为

    requestUpload() {

@@ -141,6 +153,7 @@
    closeDialog() {

      this.options.img = store.getters.avatar

      this.visible = false;

      window.removeEventListener("resize", this.resizeHandler)
    }

  }

};