通过按钮动态改变 el-dialog 的宽度

1、按钮

              <el-form-item>
                <input type="checkbox" id="agree" v-model="registerData.check">
                <a href="javascript:;" @click="setDialogWidth">《用户协议》</a>
              </el-form-item>
  
            </el-form>
          </div>
        </div>
      </div>
    </div>
 
    <el-dialog
      :width='dialogWidth'
      title="标题"
      :visible.sync="dialogVisible">
		弹框内容部分 
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
 
      </div>
    </el-dialog>

  </div>
</template>
<script>

export default {
  data() {
    return {
      dialogWidth: "0", // 动态控制弹出大小
  },

  methods: {
  
    // 动态改变 dialog 的宽度
    setDialogWidth() {
      this.dialogVisible = true
      const val = document.body.clientWidth;
      const def = "800" // 默认宽度
      if (val < def) {
        this.dialogWidth = '90%'
      } else {
        this.dialogWidth = def + 'px'
      }
    },