20210728vant中的textarea的autosize的minHeight失效问题

前提的需求：

公司做了一个设计器，我们对一些组件进行二次封装。移动端我采取了vant这个UI框架。在写textarea的时候，发现<van-field type="textarea">的时候，autosize中的minHeight失效的问题。

解决minHeight失效问题，只需要在需要使用自适应的时候，将传递过来的minHeight转成行数，赋值给rows就行。

我们是后端给我们传的自适应的值是行数，最小行和最大行。所以这里需要将行数改为高度。从element参考的文件：

calcTextareaHeight.js（将行数换算成高度，并且返回了minHeight,height,maxHeight。入参是$el,minRows,maxRows）

let hiddenTextarea
const HIDDEN_STYLE = `height:0 !important;visibility:hidden !important;overflow:hidden !important;position:absolute !important;z-index:-1000 !important;top:0 !important;right:0 !important
`const CONTEXT_STYLE = ['letter-spacing','line-height','padding-top','padding-bottom','font-family','font-weight','font-size','text-rendering','text-transform','width','text-indent','padding-left','padding-right','border-width','box-sizing'
]function calculateNodeStyling(targetElement1) {if (targetElement1) {const style = window.getComputedStyle(targetElement1)const boxSizing = style.getPropertyValue('box-sizing')const paddingSize = (parseFloat(style.getPropertyValue('padding-bottom')) +parseFloat(style.getPropertyValue('padding-top')))const borderSize = (parseFloat(style.getPropertyValue('border-bottom-width')) +parseFloat(style.getPropertyValue('border-top-width')))const contextStyle = CONTEXT_STYLE.map(name => `${name}:${style.getPropertyValue(name)}`).join(';')return { contextStyle, paddingSize, borderSize, boxSizing }} else {console.log('it‘s null')}
}export default function calcTextareaHeight(targetElement1,minRows = 1,maxRows = null
) {if (!hiddenTextarea) {hiddenTextarea = document.createElement('textarea')document.body.appendChild(hiddenTextarea)}let {paddingSize,borderSize,boxSizing,contextStyle} = calculateNodeStyling(targetElement1)hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`)hiddenTextarea.value = targetElement1.value || targetElement1.placeholder || ''let height = hiddenTextarea.scrollHeightconst result = {}if (boxSizing === 'border-box') {height = height + borderSize} else if (boxSizing === 'content-box') {height = height - paddingSize}hiddenTextarea.value = ''let singleRowHeight = hiddenTextarea.scrollHeight - paddingSizeif (minRows !== null) {let minHeight = singleRowHeight * minRowsif (boxSizing === 'border-box') {minHeight = minHeight + paddingSize + borderSize}height = Math.max(minHeight, height)result.minHeight = `${minHeight}`}if (maxRows !== null) {let maxHeight = singleRowHeight * maxRowsif (boxSizing === 'border-box') {maxHeight = maxHeight + paddingSize + borderSize}height = Math.min(maxHeight, height)result.maxHeight = `${maxHeight}`}result.height = `${height}`hiddenTextarea.parentNode && hiddenTextarea.parentNode.removeChild(hiddenTextarea)hiddenTextarea = nullreturn result
}

在vue里面使用：

<template><van-fieldv-model="currentValue"ref="textarea":rows="propertyAttr.rows":placeholder="propertyAttr.placeholder":minlength="propertyAttr.minLength":maxlength="propertyAttr.maxLength"type="textarea"show-word-limit:readonly="isDisabled || !isEditable || !propertyAttr.editable":disabled="isDisabled || !isEditable || !propertyAttr.editable"@change="change"@input="change"@blur="blur"@focus="focus":error-message="isError"style="border:1px solid #DCDFE6;padding: 0px 5px":autosize="autosize":class="{'validate-error': validate === 1, 'validate-success': validate === 2, 'readonly': !isEditable || !propertyAttr.editable,'changeRed':changeRed}"/>
</template>

js:

import calcTextareaHeight from './calcTextareaHeight'props: {value: {type: null,require: false},resize: String
},
mounted() {this.resizeTextarea()if (this.getEllipsis() || this.getAdaptiveValue()) { // 设置了自适应// 因为最小的高度不生效，所以这里设置一个rows就可以当做是最小高度了this.propertyAttr.rows = this.getAdaptiveValue().minRows this.textareaCalcStyle = this.merge({}, this.textareaCalcStyle, { resize: this.resize })this.autosize = { maxHeight: this.textareaCalcStyle.maxHeight }console.log(this.autosize)} else {this.autosize = false}
},
methods: {resizeTextarea() {// 获取最小rows和最大rows，通过方法计算高度并返回。const minRows = this.getAdaptiveValue().minRowsconst maxRows = this.getAdaptiveValue().maxRowsthis.textareaCalcStyle = calcTextareaHeight(this.$refs.textarea.$refs.input, minRows, maxRows)
},
merge(target) {for (let i = 1, j = arguments.length; i < j; i++) {let source = arguments[i] || {}for (let prop in source) {if (source.hasOwnProperty(prop)) {let value = source[prop]if (value !== undefined) {target[prop] = value}}}}return target}
}

这样就可以了！

20210728vant中的textarea的autosize的minHeight失效问题相关推荐

html 右侧滚动条,html中去掉textarea右侧滚动条和右下角拖拽
摘要腾兴网为您分享:html中去掉textarea右侧滚动条和右下角拖拽,湘税社保,唯品会,上海交通,钱大掌柜等软件知识,以及玫瑰小镇魔法花园,raw格式转换软件,阳光天天购,live壁纸,废品机械 ...
html中的textarea
html中的textarea html中给textarea赋值比较常见的方式 html中直接书写:2. 通过js动态修改 1. JQuery给textarea取值和赋值取值: $("#id ...
html中的textarea属性,textarea属性设置详解
textarea为什么没有Value属性?该如何去设置textar... document.getElementById("t1").value="hello." ...
unity3d shader编程中GrabPass 在某些android手机上失效的解决方案
unity3d shader编程中GrabPass 在某些android手机上失效的解决方案参考文章: (1)unity3d shader编程中GrabPass 在某些android手机上失效的解决 ...
Spring - 同一个类中的方法互相调用，注解失效问题的分析和解决（转）
Spring - 同一个类中的方法互相调用,注解失效问题的分析和解决(转) 参考文章: (1)Spring - 同一个类中的方法互相调用,注解失效问题的分析和解决(转) (2)https://www. ...
php textarea 默认值,html中的textarea属性大全(设置默认值高度自适应获取内容限制输入字数 placeholder)...
1.textarea设置默认值 HTML: 此段代码设置一个textarea文本框并且设置为隐藏 2.textarea高度自适应今天需要些一个回复评论的页面,设计师给的初始界面就是一个只有一行的框 ...
html css 表格自动高度,html – 表格单元格(IE)中的Textarea CSS {height：100％}
注意:这只是IE中的一个问题. 如何强制textarea垂直填充table-cell div?我已将高度:100%应用于所有父元素,但textarea仍保持其默认高度. 截图: 示例代码: HTML ...
iostextarea获取焦点_jquery – 在iOS上的Safari中针对textarea触发的不一致事件
我遇到了Safari for iPad上的一个令人愤怒的错误,我无法修复. 建筑: >骨干0.9.9 > jquery 1.7.2 > jquery mobile 1.3.1 用户代 ...
显示html标签的textarea字数,JavaScript中统计Textarea字数并提示还能输入的字符
现在流行的Twitter等微博客网站,有一个很好的用户体验,就是在文本框中输入文字的时候,会自动统计输入的字符,并显示用户还能输入的字符,在限制了140个字的微博客中,这样的小提示可以很好的增强用户体 ...

20210728vant中的textarea的autosize的minHeight失效问题

20210728vant中的textarea的autosize的minHeight失效问题相关推荐

最新文章

热门文章