vue vueCropper 动态设置裁剪比例

需求：固定图片宽度，选择不同的裁剪比例，剪裁成对应的图片。

<template>
  <div class="cropper-container">
    <el-dialog title="图片剪裁" :visible.sync="show" @open="openHandle" @close="closeHandle" append-to-body width="950px" center>
      <div class="top-btn">
        图片剪裁宽高比例：<el-radio-group v-model="imgStyle" @change="styleChange">
          <el-radio :label="1">4:3</el-radio>
          <el-radio :label="2">3:4</el-radio>
          <el-radio :label="3">1:1</el-radio>
        </el-radio-group>
        <span style="margin-left:30px">当前图片尺寸：{
   {
   option.autoCropWidth}} x {
   {
   option.autoCropHeight}}px</span>
      </div>
      <div class="cropper-content">
        <vue-cropper ref="cropper" :img="option.img" :autoCrop="option.autoCrop" :autoCropWidth="option.autoCropWidth" :autoCropHeight="option.autoCropHeight" :outputSize="option.outputSize" :outputType="option.outputType" :info="option.info" :canScale="option.canScale" :fixed="option.fixed" :fixedNumber="option.fixedNumber" :full="option.full" :fixedBox="option.fixedBox" :canMove="option.canMove" :canMoveBox="option.canMoveBox" :original="option.original" :centerBox="option.centerBox" :height="option.height" :infoTrue="option.infoTrue" :maxImgSize="option.maxImgSize" :enlarge="option.enlarge" :mode="option.mode" @realTime="realTime" @imgLoad="imgLoad">
        <