update calcTextareaHeight
This commit is contained in:
梁灏
parent
1902505abf
commit
8df3390e41
2 changed files with 265 additions and 103 deletions
|
|
@ -80,64 +80,67 @@
|
|||
<!--<br>-->
|
||||
<!--</div>-->
|
||||
|
||||
<div>
|
||||
<Input
|
||||
v-model="value"
|
||||
size="small"
|
||||
prefix="ios-contact"
|
||||
suffix="ios-search"
|
||||
placeholder="Enter something..."
|
||||
style="width: 300px"></Input>
|
||||
<br>
|
||||
<Input
|
||||
v-model="value"
|
||||
prefix="ios-contact"
|
||||
suffix="ios-search"
|
||||
placeholder="Enter something..."
|
||||
style="width: 300px"></Input>
|
||||
<br>
|
||||
<Input
|
||||
v-model="value"
|
||||
size="large"
|
||||
prefix="ios-contact"
|
||||
suffix="ios-search"
|
||||
placeholder="Enter something..."
|
||||
style="width: 300px"></Input>
|
||||
<br><br>
|
||||
<Input
|
||||
v-model="value"
|
||||
size="small"
|
||||
icon="ios-search"
|
||||
placeholder="Enter something..."
|
||||
style="width: 300px"></Input>
|
||||
<br>
|
||||
<Input
|
||||
v-model="value"
|
||||
icon="ios-search"
|
||||
placeholder="Enter something..."
|
||||
style="width: 300px"></Input>
|
||||
<br>
|
||||
<Input
|
||||
v-model="value"
|
||||
size="large"
|
||||
icon="ios-search"
|
||||
placeholder="Enter something..."
|
||||
style="width: 300px"></Input>
|
||||
<br><br><br>
|
||||
<Input v-model="value" placeholder="Enter something..." style="width: 300px">
|
||||
<Icon type="ios-alarm-outline" slot="suffix" />
|
||||
<Icon type="ios-aperture" slot="prefix" />
|
||||
</Input>
|
||||
<br><br><br><br>
|
||||
<Input v-model="value" search enter-button style="width: 300px" @on-search="hs" size="small" />
|
||||
<br>
|
||||
<Input v-model="value" search enter-button style="width: 300px" @on-search="hs" />
|
||||
<br>
|
||||
<Input v-model="value" search enter-button style="width: 300px" @on-search="hs" size="large" />
|
||||
<br><br>
|
||||
<Input v-model="value" search style="width: 300px" @on-search="hs" />
|
||||
<br><br>
|
||||
<Input v-model="value" search enter-button="Search" style="width: 300px" @on-search="hs" />
|
||||
<!--<div>-->
|
||||
<!--<Input-->
|
||||
<!--v-model="value"-->
|
||||
<!--size="small"-->
|
||||
<!--prefix="ios-contact"-->
|
||||
<!--suffix="ios-search"-->
|
||||
<!--placeholder="Enter something..."-->
|
||||
<!--style="width: 300px"></Input>-->
|
||||
<!--<br>-->
|
||||
<!--<Input-->
|
||||
<!--v-model="value"-->
|
||||
<!--prefix="ios-contact"-->
|
||||
<!--suffix="ios-search"-->
|
||||
<!--placeholder="Enter something..."-->
|
||||
<!--style="width: 300px"></Input>-->
|
||||
<!--<br>-->
|
||||
<!--<Input-->
|
||||
<!--v-model="value"-->
|
||||
<!--size="large"-->
|
||||
<!--prefix="ios-contact"-->
|
||||
<!--suffix="ios-search"-->
|
||||
<!--placeholder="Enter something..."-->
|
||||
<!--style="width: 300px"></Input>-->
|
||||
<!--<br><br>-->
|
||||
<!--<Input-->
|
||||
<!--v-model="value"-->
|
||||
<!--size="small"-->
|
||||
<!--icon="ios-search"-->
|
||||
<!--placeholder="Enter something..."-->
|
||||
<!--style="width: 300px"></Input>-->
|
||||
<!--<br>-->
|
||||
<!--<Input-->
|
||||
<!--v-model="value"-->
|
||||
<!--icon="ios-search"-->
|
||||
<!--placeholder="Enter something..."-->
|
||||
<!--style="width: 300px"></Input>-->
|
||||
<!--<br>-->
|
||||
<!--<Input-->
|
||||
<!--v-model="value"-->
|
||||
<!--size="large"-->
|
||||
<!--icon="ios-search"-->
|
||||
<!--placeholder="Enter something..."-->
|
||||
<!--style="width: 300px"></Input>-->
|
||||
<!--<br><br><br>-->
|
||||
<!--<Input v-model="value" placeholder="Enter something..." style="width: 300px">-->
|
||||
<!--<Icon type="ios-alarm-outline" slot="suffix" />-->
|
||||
<!--<Icon type="ios-aperture" slot="prefix" />-->
|
||||
<!--</Input>-->
|
||||
<!--<br><br><br><br>-->
|
||||
<!--<Input v-model="value" search enter-button style="width: 300px" @on-search="hs" size="small" />-->
|
||||
<!--<br>-->
|
||||
<!--<Input v-model="value" search enter-button style="width: 300px" @on-search="hs" />-->
|
||||
<!--<br>-->
|
||||
<!--<Input v-model="value" search enter-button style="width: 300px" @on-search="hs" size="large" />-->
|
||||
<!--<br><br>-->
|
||||
<!--<Input v-model="value" search style="width: 300px" @on-search="hs" />-->
|
||||
<!--<br><br>-->
|
||||
<!--<Input v-model="value" search enter-button="Search" style="width: 300px" @on-search="hs" />-->
|
||||
<!--</div>-->
|
||||
<div style="width: 200px">
|
||||
<Input v-model="value7" type="textarea" :autosize="true" placeholder="Enter something..."></Input>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -150,7 +153,8 @@
|
|||
value13: '',
|
||||
select1: 'http',
|
||||
select2: 'com',
|
||||
select3: 'day'
|
||||
select3: 'day',
|
||||
value7: ``
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -1,22 +1,131 @@
|
|||
// Thanks to
|
||||
// https://github.com/andreypopp/react-textarea-autosize/
|
||||
// https://github.com/ElemeFE/element/blob/master/packages/input/src/calcTextareaHeight.js
|
||||
|
||||
let hiddenTextarea;
|
||||
// let hiddenTextarea;
|
||||
//
|
||||
// const HIDDEN_STYLE = `
|
||||
// height:0 !important;
|
||||
// min-height:0 !important;
|
||||
// max-height:none !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(node) {
|
||||
// const style = window.getComputedStyle(node);
|
||||
//
|
||||
// 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};
|
||||
// }
|
||||
//
|
||||
// export default function calcTextareaHeight(targetNode, minRows = null, maxRows = null) {
|
||||
// if (!hiddenTextarea) {
|
||||
// hiddenTextarea = document.createElement('textarea');
|
||||
// document.body.appendChild(hiddenTextarea);
|
||||
// }
|
||||
//
|
||||
// let {
|
||||
// paddingSize,
|
||||
// borderSize,
|
||||
// boxSizing,
|
||||
// contextStyle
|
||||
// } = calculateNodeStyling(targetNode);
|
||||
//
|
||||
// hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`);
|
||||
// hiddenTextarea.value = targetNode.value || targetNode.placeholder || '';
|
||||
//
|
||||
// let height = hiddenTextarea.scrollHeight;
|
||||
// let minHeight = -Infinity;
|
||||
// let maxHeight = Infinity;
|
||||
// let overflowY;
|
||||
//
|
||||
// if (boxSizing === 'border-box') {
|
||||
// height = height + borderSize;
|
||||
// } else if (boxSizing === 'content-box') {
|
||||
// height = height - paddingSize;
|
||||
// }
|
||||
//
|
||||
// hiddenTextarea.value = '';
|
||||
// let singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
|
||||
//
|
||||
// if (minRows !== null) {
|
||||
// minHeight = singleRowHeight * minRows;
|
||||
// if (boxSizing === 'border-box') {
|
||||
// minHeight = minHeight + paddingSize + borderSize;
|
||||
// }
|
||||
// height = Math.max(minHeight, height);
|
||||
// }
|
||||
// if (maxRows !== null) {
|
||||
// maxHeight = singleRowHeight * maxRows;
|
||||
// if (boxSizing === 'border-box') {
|
||||
// maxHeight = maxHeight + paddingSize + borderSize;
|
||||
// }
|
||||
// overflowY = height > maxHeight ? '' : 'hidden';
|
||||
// height = Math.min(maxHeight, height);
|
||||
// }
|
||||
//
|
||||
// if (!maxRows) {
|
||||
// overflowY = 'hidden';
|
||||
// }
|
||||
//
|
||||
// return {
|
||||
// height: `${height}px`,
|
||||
// minHeight: `${minHeight}px`,
|
||||
// maxHeight: `${maxHeight}px`,
|
||||
// overflowY
|
||||
// };
|
||||
// }
|
||||
|
||||
const HIDDEN_STYLE = `
|
||||
height:0 !important;
|
||||
min-height:0 !important;
|
||||
max-height:none !important;
|
||||
visibility:hidden !important;
|
||||
overflow:hidden !important;
|
||||
position:absolute !important;
|
||||
z-index:-1000 !important;
|
||||
top:0 !important;
|
||||
right:0 !important
|
||||
const HIDDEN_TEXTAREA_STYLE = `
|
||||
min-height:0 !important;
|
||||
max-height:none !important;
|
||||
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 = [
|
||||
const SIZING_STYLE = [
|
||||
'letter-spacing',
|
||||
'line-height',
|
||||
'padding-top',
|
||||
|
|
@ -31,13 +140,29 @@ const CONTEXT_STYLE = [
|
|||
'padding-left',
|
||||
'padding-right',
|
||||
'border-width',
|
||||
'box-sizing'
|
||||
'box-sizing',
|
||||
];
|
||||
|
||||
function calculateNodeStyling(node) {
|
||||
let computedStyleCache = {};
|
||||
let hiddenTextarea;
|
||||
|
||||
function calculateNodeStyling(node, useCache = false) {
|
||||
const nodeRef = (
|
||||
node.getAttribute('id') ||
|
||||
node.getAttribute('data-reactid') ||
|
||||
node.getAttribute('name'));
|
||||
|
||||
if (useCache && computedStyleCache[nodeRef]) {
|
||||
return computedStyleCache[nodeRef];
|
||||
}
|
||||
|
||||
const style = window.getComputedStyle(node);
|
||||
|
||||
const boxSizing = style.getPropertyValue('box-sizing');
|
||||
const boxSizing = (
|
||||
style.getPropertyValue('box-sizing') ||
|
||||
style.getPropertyValue('-moz-box-sizing') ||
|
||||
style.getPropertyValue('-webkit-box-sizing')
|
||||
);
|
||||
|
||||
const paddingSize = (
|
||||
parseFloat(style.getPropertyValue('padding-bottom')) +
|
||||
|
|
@ -49,60 +174,93 @@ function calculateNodeStyling(node) {
|
|||
parseFloat(style.getPropertyValue('border-top-width'))
|
||||
);
|
||||
|
||||
const contextStyle = CONTEXT_STYLE
|
||||
const sizingStyle = SIZING_STYLE
|
||||
.map(name => `${name}:${style.getPropertyValue(name)}`)
|
||||
.join(';');
|
||||
|
||||
return {contextStyle, paddingSize, borderSize, boxSizing};
|
||||
const nodeInfo = {
|
||||
sizingStyle,
|
||||
paddingSize,
|
||||
borderSize,
|
||||
boxSizing,
|
||||
};
|
||||
|
||||
if (useCache && nodeRef) {
|
||||
computedStyleCache[nodeRef] = nodeInfo;
|
||||
}
|
||||
|
||||
return nodeInfo;
|
||||
}
|
||||
|
||||
export default function calcTextareaHeight(targetNode, minRows = null, maxRows = null) {
|
||||
export default function calcTextareaHeight(uiTextNode, minRows = null, maxRows = null, useCache = false) {
|
||||
if (!hiddenTextarea) {
|
||||
hiddenTextarea = document.createElement('textarea');
|
||||
document.body.appendChild(hiddenTextarea);
|
||||
}
|
||||
|
||||
// Fix wrap="off" issue
|
||||
// https://github.com/ant-design/ant-design/issues/6577
|
||||
if (uiTextNode.getAttribute('wrap')) {
|
||||
hiddenTextarea.setAttribute('wrap', uiTextNode.getAttribute('wrap'));
|
||||
} else {
|
||||
hiddenTextarea.removeAttribute('wrap');
|
||||
}
|
||||
|
||||
// Copy all CSS properties that have an impact on the height of the content in
|
||||
// the textbox
|
||||
let {
|
||||
paddingSize,
|
||||
borderSize,
|
||||
boxSizing,
|
||||
contextStyle
|
||||
} = calculateNodeStyling(targetNode);
|
||||
paddingSize, borderSize,
|
||||
boxSizing, sizingStyle,
|
||||
} = calculateNodeStyling(uiTextNode, useCache);
|
||||
|
||||
hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`);
|
||||
hiddenTextarea.value = targetNode.value || targetNode.placeholder || '';
|
||||
// Need to have the overflow attribute to hide the scrollbar otherwise
|
||||
// text-lines will not calculated properly as the shadow will technically be
|
||||
// narrower for content
|
||||
hiddenTextarea.setAttribute('style', `${sizingStyle};${HIDDEN_TEXTAREA_STYLE}`);
|
||||
hiddenTextarea.value = uiTextNode.value || uiTextNode.placeholder || '';
|
||||
|
||||
let minHeight = Number.MIN_SAFE_INTEGER;
|
||||
let maxHeight = Number.MAX_SAFE_INTEGER;
|
||||
let height = hiddenTextarea.scrollHeight;
|
||||
let minHeight = -Infinity;
|
||||
let maxHeight = Infinity;
|
||||
let overflowY;
|
||||
|
||||
if (boxSizing === 'border-box') {
|
||||
// border-box: add border, since height = content + padding + border
|
||||
height = height + borderSize;
|
||||
} else if (boxSizing === 'content-box') {
|
||||
// remove padding, since height = content
|
||||
height = height - paddingSize;
|
||||
}
|
||||
|
||||
hiddenTextarea.value = '';
|
||||
let singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
|
||||
|
||||
if (minRows !== null) {
|
||||
minHeight = singleRowHeight * minRows;
|
||||
if (boxSizing === 'border-box') {
|
||||
minHeight = minHeight + paddingSize + borderSize;
|
||||
if (minRows !== null || maxRows !== null) {
|
||||
// measure height of a textarea with a single row
|
||||
hiddenTextarea.value = ' ';
|
||||
let singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
|
||||
if (minRows !== null) {
|
||||
minHeight = singleRowHeight * minRows;
|
||||
if (boxSizing === 'border-box') {
|
||||
minHeight = minHeight + paddingSize + borderSize;
|
||||
}
|
||||
height = Math.max(minHeight, height);
|
||||
}
|
||||
if (maxRows !== null) {
|
||||
maxHeight = singleRowHeight * maxRows;
|
||||
if (boxSizing === 'border-box') {
|
||||
maxHeight = maxHeight + paddingSize + borderSize;
|
||||
}
|
||||
overflowY = height > maxHeight ? '' : 'hidden';
|
||||
height = Math.min(maxHeight, height);
|
||||
}
|
||||
height = Math.max(minHeight, height);
|
||||
}
|
||||
if (maxRows !== null) {
|
||||
maxHeight = singleRowHeight * maxRows;
|
||||
if (boxSizing === 'border-box') {
|
||||
maxHeight = maxHeight + paddingSize + borderSize;
|
||||
}
|
||||
height = Math.min(maxHeight, height);
|
||||
// Remove scroll bar flash when autosize without maxRows
|
||||
if (!maxRows) {
|
||||
overflowY = 'hidden';
|
||||
}
|
||||
|
||||
return {
|
||||
height: `${height}px`,
|
||||
minHeight: `${minHeight}px`,
|
||||
maxHeight: `${maxHeight}px`
|
||||
maxHeight: `${maxHeight}px`,
|
||||
overflowY
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue