Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
r15132706585
uni-app
提交
e48fcada
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,发现更多精彩内容 >>
提交
e48fcada
编写于
7月 16, 2021
作者:
D
DCloud_LXH
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(H5): H5导航栏搜索框增加清除按钮
上级
b7e19952
变更
2
展开全部
隐藏空白更改
内联
并排
Showing
2 changed file
with
86 addition
and
68 deletion
+86
-68
packages/uni-h5/dist/index.css
packages/uni-h5/dist/index.css
+1
-1
src/platforms/h5/components/page/pageHead.vue
src/platforms/h5/components/page/pageHead.vue
+85
-67
未找到文件。
packages/uni-h5/dist/index.css
浏览文件 @
e48fcada
此差异已折叠。
点击以展开。
src/platforms/h5/components/page/pageHead.vue
浏览文件 @
e48fcada
<
template
>
<
template
>
<uni-page-head
:uni-page-head-type=
"type"
>
<uni-page-head
:uni-page-head-type=
"type"
>
<div
<div
:style=
"
{transitionDuration:duration,transitionTimingFunction:timingFunc,backgroundColor:bgColor,color:textColor}"
:style=
"
{transitionDuration:duration,transitionTimingFunction:timingFunc,backgroundColor:bgColor,color:textColor}"
:class="headClass"
:class="headClass"
class="uni-page-head"
class="uni-page-head"
>
>
<div
class=
"uni-page-head-hd"
>
<div
class=
"uni-page-head-hd"
>
<div
<div
v-show=
"backButton"
v-show=
"backButton"
class=
"uni-page-head-btn"
class=
"uni-page-head-btn"
@
click=
"_back"
@
click=
"_back"
>
>
<i
<i
:style=
"
{color:color,fontSize:'27px'}"
:style=
"
{color:color,fontSize:'27px'}"
class="uni-btn-icon"
class="uni-btn-icon"
>

</i>
>

</i>
</div>
</div>
<template
v-for=
"(btn,index) in btns"
>
<template
v-for=
"(btn,index) in btns"
>
<div
<div
v-if=
"btn.float === 'left'"
v-if=
"btn.float === 'left'"
:key=
"index"
:key=
"index"
:style=
"
{backgroundColor: type==='transparent'?btn.background:'transparent',width:btn.width}"
:style=
"
{backgroundColor: type==='transparent'?btn.background:'transparent',width:btn.width}"
:badge-text="btn.badgeText"
:badge-text="btn.badgeText"
:class="{'uni-page-head-btn-red-dot':btn.redDot||btn.badgeText,'uni-page-head-btn-select':btn.select}"
:class="{'uni-page-head-btn-red-dot':btn.redDot||btn.badgeText,'uni-page-head-btn-select':btn.select}"
class="uni-page-head-btn"
class="uni-page-head-btn"
>
>
<i
<i
:style=
"_formatBtnStyle(btn)"
:style=
"_formatBtnStyle(btn)"
class=
"uni-btn-icon"
class=
"uni-btn-icon"
@
click=
"_onBtnClick(index)"
@
click=
"_onBtnClick(index)"
v-html=
"_formatBtnFontText(btn)"
v-html=
"_formatBtnFontText(btn)"
/>
/>
</div>
</div>
</
template
>
</
template
>
</div>
</div>
<div
<div
v-if=
"!searchInput"
v-if=
"!searchInput"
class=
"uni-page-head-bd"
class=
"uni-page-head-bd"
>
>
<div
<div
:style=
"{fontSize:titleSize,opacity:type==='transparent'?0:1}"
:style=
"{fontSize:titleSize,opacity:type==='transparent'?0:1}"
class=
"uni-page-head__title"
class=
"uni-page-head__title"
>
>
<i
<i
v-if=
"loading"
v-if=
"loading"
class=
"uni-loading"
class=
"uni-loading"
/>
/>
<img
<img
v-if=
"titleImage!==''"
v-if=
"titleImage!==''"
:src=
"titleImage"
:src=
"titleImage"
class=
"uni-page-head__title_image"
class=
"uni-page-head__title_image"
>
>
<
template
v-else
>
<
template
v-else
>
{{
titleText
}}
{{
titleText
}}
</
template
>
</
template
>
</div>
</div>
</div>
</div>
<div
<div
v-if=
"searchInput"
v-if=
"searchInput"
:style=
"{'border-radius':searchInput.borderRadius,'background-color':searchInput.backgroundColor}"
:style=
"{'border-radius':searchInput.borderRadius,'background-color':searchInput.backgroundColor}"
class=
"uni-page-head-search"
class=
"uni-page-head-search"
>
>
<div
<div
:style=
"{color:searchInput.placeholderColor}"
:style=
"{color:searchInput.placeholderColor}"
:class=
"[`uni-page-head-search-placeholder-${focus ||
text
? 'left' : searchInput.align}`]"
:class=
"[`uni-page-head-search-placeholder-${focus ||
showPlaceholder
? 'left' : searchInput.align}`]"
class=
"uni-page-head-search-placeholder"
class=
"uni-page-head-search-placeholder"
v-text=
"
text || composing ? '' : searchInput.placeholder"
v-text=
"
showPlaceholder || composing ? '' : searchInput.placeholder"
/>
/>
<v-uni-input
<v-uni-input
ref=
"input"
ref=
"input"
v-model=
"text"
v-model=
"text"
:focus=
"searchInput.autoFocus"
:focus=
"searchInput.autoFocus"
:disabled=
"searchInput.disabled"
:disabled=
"searchInput.disabled"
:style=
"{color:searchInput.color}"
:style=
"{color:searchInput.color}"
:placeholder-style=
"`color:${searchInput.placeholderColor}`"
:placeholder-style=
"`color:${searchInput.placeholderColor}`"
class=
"uni-page-head-search-input"
class=
"uni-page-head-search-input"
confirm-type=
"search"
confirm-type=
"search"
@
focus=
"_focus"
@
focus=
"_focus"
@
blur=
"_blur"
@
blur=
"_blur"
@
update:value=
"_input"
@
update:value=
"_input"
/>
/>
<i
v-if=
"text"
class=
"uni-icon-clear"
@
click=
"_clearInput"
>

</i>
</div>
</div>
<div
class=
"uni-page-head-ft"
>
<div
class=
"uni-page-head-ft"
>
<
template
v-for=
"(btn,index) in btns"
>
<
template
v-for=
"(btn,index) in btns"
>
<div
<div
v-if=
"btn.float !== 'left'"
v-if=
"btn.float !== 'left'"
:key=
"index"
:key=
"index"
:style=
"
{backgroundColor: type==='transparent'?btn.background:'transparent',width:btn.width}"
:style=
"
{backgroundColor: type==='transparent'?btn.background:'transparent',width:btn.width}"
:badge-text="btn.badgeText"
:badge-text="btn.badgeText"
:class="{'uni-page-head-btn-red-dot':btn.redDot||btn.badgeText,'uni-page-head-btn-select':btn.select}"
:class="{'uni-page-head-btn-red-dot':btn.redDot||btn.badgeText,'uni-page-head-btn-select':btn.select}"
class="uni-page-head-btn"
class="uni-page-head-btn"
>
>
<i
<i
:style=
"_formatBtnStyle(btn)"
:style=
"_formatBtnStyle(btn)"
class=
"uni-btn-icon"
class=
"uni-btn-icon"
@
click=
"_onBtnClick(index)"
@
click=
"_onBtnClick(index)"
v-html=
"_formatBtnFontText(btn)"
v-html=
"_formatBtnFontText(btn)"
/>
/>
</div>
</div>
</
template
>
</
template
>
</div>
</div>
</div>
</div>
<div
<div
v-if=
"type!=='transparent'&&type!=='float'"
v-if=
"type!=='transparent'&&type!=='float'"
:class=
"{'uni-placeholder-titlePenetrate': titlePenetrate}"
:class=
"{'uni-placeholder-titlePenetrate': titlePenetrate}"
class=
"uni-placeholder"
class=
"uni-placeholder"
/>
/>
</uni-page-head>
</uni-page-head>
</template>
</template>
...
@@ -346,6 +351,11 @@
...
@@ -346,6 +351,11 @@
uni-page-head
.uni-page-head-shadow-yellow
::after
{
uni-page-head
.uni-page-head-shadow-yellow
::after
{
background-image
:
url("https://cdn.dcloud.net.cn/img/shadow-yellow.png")
;
background-image
:
url("https://cdn.dcloud.net.cn/img/shadow-yellow.png")
;
}
}
uni-page-head
.uni-icon-clear
{
align-self
:
center
;
padding-right
:
5px
;
}
</
style
>
</
style
>
<
script
>
<
script
>
import
appendCss
from
'
uni-platform/helpers/append-css
'
import
appendCss
from
'
uni-platform/helpers/append-css
'
...
@@ -441,7 +451,8 @@ export default {
...
@@ -441,7 +451,8 @@ export default {
return
{
return
{
focus
:
false
,
focus
:
false
,
text
:
''
,
text
:
''
,
composing
:
false
composing
:
false
,
showPlaceholder
:
false
}
}
},
},
computed
:
{
computed
:
{
...
@@ -496,6 +507,9 @@ export default {
...
@@ -496,6 +507,9 @@ export default {
input
.
$watch
(
'
composing
'
,
val
=>
{
input
.
$watch
(
'
composing
'
,
val
=>
{
this
.
composing
=
val
this
.
composing
=
val
})
})
input
.
$watch
(
'
valueSync
'
,
val
=>
{
this
.
showPlaceholder
=
!!
val
})
if
(
this
.
searchInput
.
disabled
)
{
if
(
this
.
searchInput
.
disabled
)
{
input
.
$el
.
addEventListener
(
'
click
'
,
()
=>
{
input
.
$el
.
addEventListener
(
'
click
'
,
()
=>
{
UniServiceJSBridge
.
emit
(
'
onNavigationBarSearchInputClicked
'
,
''
)
UniServiceJSBridge
.
emit
(
'
onNavigationBarSearchInputClicked
'
,
''
)
...
@@ -567,7 +581,11 @@ export default {
...
@@ -567,7 +581,11 @@ export default {
UniServiceJSBridge
.
emit
(
'
onNavigationBarSearchInputChanged
'
,
{
UniServiceJSBridge
.
emit
(
'
onNavigationBarSearchInputChanged
'
,
{
text
text
})
})
},
_clearInput
()
{
this
.
text
=
''
this
.
_input
(
this
.
text
)
}
}
}
}
}
}
</
script
>
</
script
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录