Question

我试图用VueJS实现一个简单的自动调整大小的textarea组件，但我面临着IE的问题。

仅在此浏览器上，我们可以感受到身高的计算。 textarea的大小改变两次，我们可以很容易地看到以下内容移动。

以下是我的表现：

每次更改值时，我都会调用以下resizeTextarea方法：

resizeTextarea: function() {
  // Set the height to auto to have a correct scrollHeight
  this.textareaStyle.height = 'auto';
  // Wait for the next tick to be sure that the heigh is set to 'auto'
  this.$nextTick(this.setHeight);
},

使用引用的setHeight方法：

setHeight: function() {
  //IE COMPATIBILITY this.textareaStyle.height = `${this.$refs.input.scrollHeight}px`;
  this.textareaStyle.height = ''.concat(this.$refs.input.scrollHeight, 'px');
},

如您所见，这个过程非常简单：

将textarea的高度设置为auto;
更新值后，将高度设置为组件scrollHeight。

但是，我必须等下一个刻度来设置高度，我猜这会导致剪辑与IE。

在我的HTML模板中，我将textareaStyle数据绑定到textarea组件，我通过ref引用它：

<textarea 
  v-model="message" 
  ref="input"    
  :style="textareaStyle"
  ></textarea>

您可以找到一个工作示例here，请在IE浏览器和其他浏览器上运行以查看差异。

注意：

我没有使用ES＆＃39;语法以确保IE兼容性;
我已经尝试使用autosize package，但结果是一样的。

这个问题可能是由于（并且肯定是）我的自动调整大小的textarea的实现，所以如果当前系统得到修复或者另一个解决方案（在每个现代浏览器中工作+），我会认为这个问题已经关闭IE 11）被发现。

与IE的Autosized textarea剪辑问题

0 个答案: