vue中textarea自适应高度
转载于https://www.cnblogs.com/lin-kn/p/10570758.html<textarea class="myCircle_input" v-model="inputText" ref="elememt" @input="autoTextarea" :placeholder="pltxt"></textarea>data () {r...
·
转载于https://www.cnblogs.com/lin-kn/p/10570758.html <textarea class="myCircle_input" v-model="inputText" ref="elememt" @input="autoTextarea" :placeholder="pltxt"></textarea>
data () { return { pltxt: "评论", inputText: '', isHeight:true, minHeight:0, } },
methods: { autoTextarea() { var extra = 0, //设置光标与输入框保持的距离(默认0) maxHeight = 60; //设置最大高度(可选) var _that = this; var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window, isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera');
var paddingTop,paddingBottom var style,_length,valueLength,stylHeight,scrollHeight,currHeight; this.$nextTick(function () { if(this.isHeight){ this.isHeight = false this.minHeight = parseFloat(window.getComputedStyle(this.$refs.elememt).height) } paddingTop = parseInt(window.getComputedStyle(this.$refs.elememt).paddingTop) paddingBottom = parseInt(window.getComputedStyle(this.$refs.elememt).paddingBottom) style = this.$refs.elememt.style _length = this.$refs.elememt._length valueLength = this.$refs.elememt.value.length stylHeight = this.$refs.elememt.style.height scrollHeight = this.$refs.elememt.scrollHeight currHeight = this.$refs.elememt.currHeight change() }) function change(){ var height, padding = 0; if (_length === valueLength) return; _length = valueLength; if (!isFirefox && !isOpera) { padding = paddingTop + paddingBottom; }; stylHeight = _that.minHeight + 'px'; //30px console.log(scrollHeight,_that.minHeight,maxHeight,padding) if (scrollHeight > _that.minHeight) { if (maxHeight && scrollHeight > maxHeight) { height = maxHeight - padding; // style.overflowY = 'auto'; style.overflowY = 'hidden'; } else { height = scrollHeight - padding; //undefined 30 9 style.overflowY = 'hidden'; }; style.height = height + extra + 'px'; currHeight = parseInt(style.height); }; } },
}
CSS:
.myCircle_input{ background: #ffffff; border: none; outline: none; width: 100PX; border-radius: 4px; padding: 12px 15px 7px; overflow: hidden; resize: none; //调整属性指定一个元素是否是由用户调整大小的 both/horizontal 宽度/vertical 高度 font-size: 30px; color:#333; line-height: 1.2; height: 60px; word-break: break-all; box-sizing: border-box; }
更多推荐
已为社区贡献11条内容
所有评论(0)