问题:使用饿了么框架中的文本域组件,配置autoSize,使其自适应高度。在输入的过程中,可以正常达到自适应的效果。但预览时,即value有默认值时,autoSize失效
配置:
<el-input type="textarea" :maxlength="250" autosize show-word-limit :value="value" />
效果:
value设置默认值,出现了滚动条且字数角标存在遮挡情况
通过搜索,大多解决方案如下: 为 input type=textarea 增加ref。比如ref=‘inputTest’
在业务代码内,赋值时执行this.$nextTick(function () { this.$refs.inputTest.resizeTextarea(); })
但是无论我在该组件里面如何添加resizeTextarea(created,mounted,watchvalue的变化中)都没有生效。且测试过程中,发现在输入框还没有展示出来的时候,变量已经被赋值,即变量被提前处理了。那么在ref方式没有生效的情况下,我在想是不是隐藏的元素 elementUI 就不 autosize
了,换一种控制显示隐藏的方法v-if试了一下,果然成功了。
一般来说, v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show较好;如果在运行时条件不太可能改变,则使用 v-if 较好。