drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update calcTextareaHeight

Browse source
This commit is contained in:
梁灏 2018-07-18 12:06:47 +08:00
parent 1902505abf
commit 8df3390e41
2 changed files with 265 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

122
examples/routers/input.vue
View file

@ -80,64 +80,67 @@
<!--<br>--> <!--<br>-->
<!--</div>--> <!--</div>-->
<div> <!--<div>-->
<Input <!--<Input-->
v-model="value" <!--v-model="value"-->
size="small" <!--size="small"-->
prefix="ios-contact" <!--prefix="ios-contact"-->
suffix="ios-search" <!--suffix="ios-search"-->
placeholder="Enter something..." <!--placeholder="Enter something..."-->
style="width: 300px"></Input> <!--style="width: 300px"></Input>-->
<br> <!--<br>-->
<Input <!--<Input-->
v-model="value" <!--v-model="value"-->
prefix="ios-contact" <!--prefix="ios-contact"-->
suffix="ios-search" <!--suffix="ios-search"-->
placeholder="Enter something..." <!--placeholder="Enter something..."-->
style="width: 300px"></Input> <!--style="width: 300px"></Input>-->
<br> <!--<br>-->
<Input <!--<Input-->
v-model="value" <!--v-model="value"-->
size="large" <!--size="large"-->
prefix="ios-contact" <!--prefix="ios-contact"-->
suffix="ios-search" <!--suffix="ios-search"-->
placeholder="Enter something..." <!--placeholder="Enter something..."-->
style="width: 300px"></Input> <!--style="width: 300px"></Input>-->
<br><br> <!--<br><br>-->
<Input <!--<Input-->
v-model="value" <!--v-model="value"-->
size="small" <!--size="small"-->
icon="ios-search" <!--icon="ios-search"-->
placeholder="Enter something..." <!--placeholder="Enter something..."-->
style="width: 300px"></Input> <!--style="width: 300px"></Input>-->
<br> <!--<br>-->
<Input <!--<Input-->
v-model="value" <!--v-model="value"-->
icon="ios-search" <!--icon="ios-search"-->
placeholder="Enter something..." <!--placeholder="Enter something..."-->
style="width: 300px"></Input> <!--style="width: 300px"></Input>-->
<br> <!--<br>-->
<Input <!--<Input-->
v-model="value" <!--v-model="value"-->
size="large" <!--size="large"-->
icon="ios-search" <!--icon="ios-search"-->
placeholder="Enter something..." <!--placeholder="Enter something..."-->
style="width: 300px"></Input> <!--style="width: 300px"></Input>-->
<br><br><br> <!--<br><br><br>-->
<Input v-model="value" placeholder="Enter something..." style="width: 300px"> <!--<Input v-model="value" placeholder="Enter something..." style="width: 300px">-->
<Icon type="ios-alarm-outline" slot="suffix" /> <!--<Icon type="ios-alarm-outline" slot="suffix" />-->
<Icon type="ios-aperture" slot="prefix" /> <!--<Icon type="ios-aperture" slot="prefix" />-->
</Input> <!--</Input>-->
<br><br><br><br> <!--<br><br><br><br>-->
<Input v-model="value" search enter-button style="width: 300px" @on-search="hs" size="small" /> <!--<Input v-model="value" search enter-button style="width: 300px" @on-search="hs" size="small" />-->
<br> <!--<br>-->
<Input v-model="value" search enter-button style="width: 300px" @on-search="hs" /> <!--<Input v-model="value" search enter-button style="width: 300px" @on-search="hs" />-->
<br> <!--<br>-->
<Input v-model="value" search enter-button style="width: 300px" @on-search="hs" size="large" /> <!--<Input v-model="value" search enter-button style="width: 300px" @on-search="hs" size="large" />-->
<br><br> <!--<br><br>-->
<Input v-model="value" search style="width: 300px" @on-search="hs" /> <!--<Input v-model="value" search style="width: 300px" @on-search="hs" />-->
<br><br> <!--<br><br>-->
<Input v-model="value" search enter-button="Search" style="width: 300px" @on-search="hs" /> <!--<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> </div>
</template> </template>
<script> <script>
@ -150,7 +153,8 @@
value13: '', value13: '',
select1: 'http', select1: 'http',
select2: 'com', select2: 'com',
select3: 'day' select3: 'day',
value7: ``
} }
}, },
methods: { methods: {

246
src/utils/calcTextareaHeight.js
View file

@ -1,22 +1,131 @@
// Thanks to // Thanks to
// https://github.com/andreypopp/react-textarea-autosize/ // 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 = ` const HIDDEN_TEXTAREA_STYLE = `
height:0 !important; min-height:0 !important;
min-height:0 !important; max-height:none !important;
max-height:none !important; height:0 !important;
visibility:hidden !important; visibility:hidden !important;
overflow:hidden !important; overflow:hidden !important;
position:absolute !important; position:absolute !important;
z-index:-1000 !important; z-index:-1000 !important;
top:0 !important; top:0 !important;
right:0 !important right:0 !important
`; `;
const CONTEXT_STYLE = [ const SIZING_STYLE = [
'letter-spacing', 'letter-spacing',
'line-height', 'line-height',
'padding-top', 'padding-top',
@ -31,13 +140,29 @@ const CONTEXT_STYLE = [
'padding-left', 'padding-left',
'padding-right', 'padding-right',
'border-width', '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 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 = ( const paddingSize = (
parseFloat(style.getPropertyValue('padding-bottom')) + parseFloat(style.getPropertyValue('padding-bottom')) +
@ -49,60 +174,93 @@ function calculateNodeStyling(node) {
parseFloat(style.getPropertyValue('border-top-width')) parseFloat(style.getPropertyValue('border-top-width'))
); );
const contextStyle = CONTEXT_STYLE const sizingStyle = SIZING_STYLE
.map(name => `${name}:${style.getPropertyValue(name)}`) .map(name => `${name}:${style.getPropertyValue(name)}`)
.join(';'); .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) { if (!hiddenTextarea) {
hiddenTextarea = document.createElement('textarea'); hiddenTextarea = document.createElement('textarea');
document.body.appendChild(hiddenTextarea); 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 { let {
paddingSize, paddingSize, borderSize,
borderSize, boxSizing, sizingStyle,
boxSizing, } = calculateNodeStyling(uiTextNode, useCache);
contextStyle
} = calculateNodeStyling(targetNode);
hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`); // Need to have the overflow attribute to hide the scrollbar otherwise
hiddenTextarea.value = targetNode.value || targetNode.placeholder || ''; // 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 height = hiddenTextarea.scrollHeight;
let minHeight = -Infinity; let overflowY;
let maxHeight = Infinity;
if (boxSizing === 'border-box') { if (boxSizing === 'border-box') {
// border-box: add border, since height = content + padding + border
height = height + borderSize; height = height + borderSize;
} else if (boxSizing === 'content-box') { } else if (boxSizing === 'content-box') {
// remove padding, since height = content
height = height - paddingSize; height = height - paddingSize;
} }
hiddenTextarea.value = ''; if (minRows !== null || maxRows !== null) {
let singleRowHeight = hiddenTextarea.scrollHeight - paddingSize; // measure height of a textarea with a single row
hiddenTextarea.value = ' ';
if (minRows !== null) { let singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
minHeight = singleRowHeight * minRows; if (minRows !== null) {
if (boxSizing === 'border-box') { minHeight = singleRowHeight * minRows;
minHeight = minHeight + paddingSize + borderSize; 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) { // Remove scroll bar flash when autosize without maxRows
maxHeight = singleRowHeight * maxRows; if (!maxRows) {
if (boxSizing === 'border-box') { overflowY = 'hidden';
maxHeight = maxHeight + paddingSize + borderSize;
}
height = Math.min(maxHeight, height);
} }
return { return {
height: `${height}px`, height: `${height}px`,
minHeight: `${minHeight}px`, minHeight: `${minHeight}px`,
maxHeight: `${maxHeight}px` maxHeight: `${maxHeight}px`,
overflowY
}; };
} }