首页
归档
笔记
树洞
搜索
友言

文章详情

Interesting People Record Interesting.

/ JavaScript / 文章详情

vueCropper弹窗基础用法

Sonder
2022-10-27
2760字
7分钟
浏览 (1.5k)

image.png
复制代码
<div class="meetnotices_middle_canvas_container" v-if="curbase64" @click="closeWin(true)">
      <div class="meetnotices_middle_canvas_main"  @click.stop="">
        <div class="meetnotices_middle_canvas_group">
          <el-button
            type="primary"
            size="small"
            @click.stop="scaleImg(1)"
          >放大</el-button
          >
          <el-button
            type="primary"
            size="small"
            @click.stop="scaleImg(0)"
          >缩小</el-button
          >
          <el-button
            type="primary"
            size="small"
            @click.stop="rotateImg"
          >旋转</el-button
          >
          <el-button type="primary" size="small" @click.stop="cutImg"
          >确认</el-button
          >
          <el-button type="primary" size="small" @click.stop="closeWin(true)"
          >取消</el-button
          >
          <!-- </div> -->
          <vueCropper
            style=" width: 428px;height: 270px;"
            ref="cropper"
            :img="curbase64"
            :autoCrop="true"
            :fixedBox="true"
            :autoCropWidth="428"
            :autoCropHeight="270"
            :canMoveBox="false"
            :canMove="true"
            :full="true"
            :canScale="true"
            :flex="[2, 1]"
            mode="auto 100%"
          ></vueCropper>
        </div>
      </div>
    </div>
复制代码
     closeWin() {
       this.curbase64 = "";
     },

     rotateImg() {
       console.log("旋转");
       this.$refs.cropper.rotateRight();
     },

     scaleImg(status) {
       console.log("缩小放大");
       let scale = status === 0 ? -1 : 1;
       this.$refs.cropper.changeScale(scale);
     },
     cutImg() {
       this.$refs.cropper.getCropData(async (data) => {
         let url = this.$tools.getURL(this.$urls.upload.uploadBase64)
         this.auditIdCardImg[this.curbase64ImgType] = await this.$uploads.uploadBase64(data,url,{upload_type:this.$config.types.upload_type.card,company_id:this.dataInfo.company_id });
         setTimeout(() => {
           this.closeWin();
         }, 100);
       });
     },
复制代码
.meetnotices_middle_canvas_container{
 width: 100%;
 height: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 position: absolute;
 top: 0;
 left: 0;
 z-index:999999;
 background:rgba(0,0,0,.5)
}
.meetnotices_middle_canvas_main{
 position: absolute;
 top:50%;
 left: 50%;
 transform: translate(-50%,-50%);
}
.meetnotices_middle_canvas_group .vue-cropper{
 margin-top:20px;
}
下一篇 / vue element-ui elementUi 邮箱自动补全 邮箱自动填充

🎯 相关文章

💡 推荐文章

🕵️‍♂️ 评论 (0)