Vue · textarea高度自适应

scrollHeight 是内容的滚动高度,包含没实现出来的
offsetHeight 当前控件显示的高度，如果文字增多了，不做自适应，这个高度不变，scrolHeight变大，所以可以比较这两个值，修改textarea的高度后，offsetHeight也就变了。

<template><div><div class="address-container"><label>当前地址</label><textarea ref="test" class="textarea-mine" v-model="currentValue"></textarea></div></div>
</template>
<script type="text/javascript">export default {data () {return {currentValue: ''}},watch: {currentValue (nv, ov) {if (nv === ov) {return}this.currentValue = nvconsole.log('value changed')this.changeHeight()}},methods: {changeHeight () {let _this = thisthis.$nextTick(() => {var textArea = _this.$refs.testvar scrollHeight = textArea.scrollHeight // 控件所有的高度，包含滚动的那部分(不可见也会有高度)var height = textArea.offsetHeight // 屏幕上显示的高度if (height <= scrollHeight) {textArea.style.height = 'auto' // 恢复默认值，这个作用就是根据内容自适应textarea高度textArea.style.height = textArea.scrollHeight + 'px' // 拿到最新的高度改变textarea的高度}})}}}
</script><style scoped>.address-container {position: relative;display: flex;align-items: center;font-size: 15px;}.address-container label {min-width: 4rem;margin: 0px 5px;}.textarea-mine {min-height: 20px;padding: 5px;width: 100%;display: block;flex: 1;margin: 10px 5px;font-size: 15px;color: #0c0c0c;outline: none;border: none;overflow-y: auto;appearance: none;text-align: inherit;font-family: -apple-system-font, "Helvetica Neue", sans-serif, "Microsoft YaHei";}
</style>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！