vue 实现元素右下角调整元素的宽高，并实时保存

要实现元素右下角调整元素的宽高，并实时保存，可以使用Vue的事件处理和计算属性来实现。

首先，您可以在元素上绑定`input`事件，以便在用户调整元素大小时触发一个方法。在该方法中，您可以获取元素的新宽度和高度，并将它们保存到Vue的数据对象中。

<template>
  <div class="resize-element"
       :style="elementStyle"
       @input="onResize"></div>
</template>

data() {
  return {
    elementWidth: 200,
    elementHeight: 100
  }
},
methods: {
  onResize(event) {
    this.elementWidth = event.target.offsetWidth;
    this.elementHeight = event.target.offsetHeight;
  }
},
computed: {
  elementStyle() {
    return {
      width: this.elementWidth + 'px',
      height: this.elementHeight + 'px',
      resize: 'both'
    }
  }
}

在上面的代码中，`onResize`方法会获取元素的新宽度和高度，并将它们保存到Vue的`data`对象中。然后，通过计算属性`elementStyle`，将新的宽度和高度应用到元素的样式中，从而实现实时保存的效果。

最后，在CSS中设置元素的位置和其他样式，例如在右下角放置元素：

.resize-element {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 200px;
  height: 100px;
  resize: both;
}

这样，您就可以在Vue应用程序中创建一个可调整大小的元素，并且可以实时保存用户对元素大小的更改。