Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
r15132706585
uni-app
提交
89d45a4e
U
uni-app
项目概览
r15132706585
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
89d45a4e
编写于
1月 21, 2019
作者:
X
xiaoyucoding
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
perf: H5 优化 input 组件的高度渲染
上级
f8b0d34c
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
26 addition
and
11 deletion
+26
-11
src/core/view/components/input/index.vue
src/core/view/components/input/index.vue
+26
-11
未找到文件。
src/core/view/components/input/index.vue
浏览文件 @
89d45a4e
...
@@ -4,7 +4,7 @@
...
@@ -4,7 +4,7 @@
ref=
"wrapper"
ref=
"wrapper"
:disabled=
"disabled"
>
:disabled=
"disabled"
>
<input
<input
ref=
"input"
ref=
"input"
v-model=
"inputValue"
v-model=
"inputValue"
:disabled=
"disabled"
:disabled=
"disabled"
:type=
"inputType"
:type=
"inputType"
...
@@ -15,16 +15,17 @@
...
@@ -15,16 +15,17 @@
@
input.stop=
"_onInput"
@
input.stop=
"_onInput"
@
compositionstart=
"_onComposition"
@
compositionstart=
"_onComposition"
@
compositionend=
"_onComposition"
@
compositionend=
"_onComposition"
@
keyup.stop=
"_onKeyup"
@
keyup.stop=
"_onKeyup"
>
>
<div
<div
v-show=
"!(composing || inputValue.length)"
v-show=
"!(composing || inputValue.length)"
ref=
"placeholder"
ref=
"placeholder"
:style=
"placeholderStyle"
:style=
"placeholderStyle"
:class=
"placeholderClass"
:class=
"placeholderClass"
class=
"input-placeholder"
class=
"input-placeholder"
>
{{
placeholder
}}
</div>
>
{{
placeholder
}}
</div>
</div>
</div>
<v-uni-resize-sensor
ref=
"sensor"
@
resize=
"_resize"
/>
</uni-input>
</uni-input>
</
template
>
</
template
>
<
script
>
<
script
>
...
@@ -33,6 +34,7 @@ import {
...
@@ -33,6 +34,7 @@ import {
}
from
'
uni-mixins
'
}
from
'
uni-mixins
'
const
INPUT_TYPES
=
[
'
text
'
,
'
number
'
,
'
idcard
'
,
'
digit
'
,
'
password
'
]
const
INPUT_TYPES
=
[
'
text
'
,
'
number
'
,
'
idcard
'
,
'
digit
'
,
'
password
'
]
const
NUMBER_TYPES
=
[
'
number
'
,
'
digit
'
]
const
NUMBER_TYPES
=
[
'
number
'
,
'
digit
'
]
let
isRendered
=
false
export
default
{
export
default
{
name
:
'
Input
'
,
name
:
'
Input
'
,
mixins
:
[
emitter
],
mixins
:
[
emitter
],
...
@@ -141,7 +143,7 @@ export default {
...
@@ -141,7 +143,7 @@ export default {
})
})
},
},
mounted
()
{
mounted
()
{
//
this._initInputStyle()
this
.
_initInputStyle
()
if
(
this
.
confirmType
===
'
search
'
)
{
if
(
this
.
confirmType
===
'
search
'
)
{
var
formElem
=
document
.
createElement
(
'
form
'
)
var
formElem
=
document
.
createElement
(
'
form
'
)
...
@@ -162,6 +164,11 @@ export default {
...
@@ -162,6 +164,11 @@ export default {
})
})
},
},
methods
:
{
methods
:
{
_resize
()
{
if
(
!
isRendered
)
{
this
.
_initInputStyle
()
}
},
_initInputStyle
()
{
_initInputStyle
()
{
const
wrapper
=
this
.
$refs
.
wrapper
const
wrapper
=
this
.
$refs
.
wrapper
const
computedStyle
=
window
.
getComputedStyle
(
wrapper
)
const
computedStyle
=
window
.
getComputedStyle
(
wrapper
)
...
@@ -169,7 +176,15 @@ export default {
...
@@ -169,7 +176,15 @@ export default {
const
inputElem
=
this
.
$refs
.
input
const
inputElem
=
this
.
$refs
.
input
const
placeholderElem
=
this
.
$refs
.
placeholder
const
placeholderElem
=
this
.
$refs
.
placeholder
const
realHeight
=
rectStyle
.
height
-
(
parseFloat
(
computedStyle
.
borderTopWidth
,
10
)
+
parseFloat
(
computedStyle
.
borderBottomWidth
,
10
))
// 获取到的高度为 0 则认为组件未渲染,通常是使用 v-show 时会出现此情况。
if
(
!
rectStyle
.
height
)
{
return
}
else
{
isRendered
=
true
}
// 渲染之后进行计算,设置实际的高度等样式。
const
realHeight
=
rectStyle
.
height
-
(
parseFloat
(
computedStyle
.
borderTopWidth
,
10
)
+
parseFloat
(
computedStyle
.
borderBottomWidth
,
10
))
if
(
realHeight
!==
this
.
wrapperHeight
)
{
if
(
realHeight
!==
this
.
wrapperHeight
)
{
inputElem
.
style
.
height
=
`
${
realHeight
}
px`
inputElem
.
style
.
height
=
`
${
realHeight
}
px`
inputElem
.
style
.
lineHeight
=
`
${
realHeight
}
px`
inputElem
.
style
.
lineHeight
=
`
${
realHeight
}
px`
...
@@ -397,12 +412,12 @@ export default {
...
@@ -397,12 +412,12 @@ export default {
}
}
input
::-webkit-outer-spin-button
,
input
::-webkit-outer-spin-button
,
input
::-webkit-inner-spin-button
{
input
::-webkit-inner-spin-button
{
-webkit-appearance
:
none
;
-webkit-appearance
:
none
;
margin
:
0
;
margin
:
0
;
}
}
input
[
type
=
"number"
]
{
input
[
type
=
"number"
]
{
-moz-appearance
:
textfield
;
-moz-appearance
:
textfield
;
}
}
</
style
>
</
style
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录