textarea元素resize开启后， 恢复原样

【CSS3】textarea元素resize开启后恢复原样

问题：

在开发一些表单时发现文本域中存在这样一个问题：

因为表单整个是一直复用的弹窗，提交后只是隐藏了，所以如果textarea在这次编辑中进行了拖拽，再次进入表单时它还是上次拖拽后的高度，有一种数据残留似的感觉。

注：技术栈 —— Vue

解决：

resize的机制是计算后实时更新元素style中的height属性值实现的，

这里选择监听元素的显示状态，在textarea不可见的时候偷偷将height改回去：

 <textarea
      v-show="formShow"
      placeholder="请输入"
      :style="`${formShow ? '' : 'height: 60px;'}`"
 />
 <el-button @click="formShow = !formShow">Show</el-button>

  data() {
    return {
      formShow: true
    };
  },

width是同样的道理。
因为resize直接对style下手，所以现在只想到这种办法来解决这个问题，如有其它想法、欢迎在评论区讨论~