Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
fengmian1233
unidocs-zh
提交
31958e68
unidocs-zh
项目概览
fengmian1233
/
unidocs-zh
与 Fork 源项目一致
Fork自
DCloud / unidocs-zh
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
31958e68
编写于
2月 21, 2024
作者:
H
HRK
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
新增 searchBar设置输入时字体颜色:textColor
上级
2bdf26f2
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
94 addition
and
93 deletion
+94
-93
docs/component/uniui/uni-search-bar.md
docs/component/uniui/uni-search-bar.md
+94
-93
未找到文件。
docs/component/uniui/uni-search-bar.md
浏览文件 @
31958e68
...
...
@@ -35,6 +35,7 @@
|cancelButton|String|auto |是否显示取消按钮,可选值
`always`
-一直显示、
`auto`
-输入框不为空时显示、
`none`
-一直不显示 |
|cancelText|String |取消|取消按钮的文字|
|bgColor|String |#F8F8F8|输入框背景颜色|
|textColor|String |#F8F8F8|输入时文字颜色|
|maxlength|Number|100|输入最大长度|
|focus|Boolean |false ||
...
...
@@ -84,12 +85,12 @@
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/search-bar/search-bar
> Template
```
html
<template>
<view>
<template>
<view>
<uni-card
:is-shadow=
"false"
is-full
>
<text
class=
"uni-h6"
>
搜索栏组件,通常用于搜索商品、文章等。
</text>
</uni-card>
</uni-card>
<uni-section
title=
"基本用法"
type=
"line"
>
<uni-search-bar
@
confirm=
"search"
:focus=
"true"
v-model=
"searchValue"
@
blur=
"blur"
@
focus=
"focus"
@
input=
"input"
@
cancel=
"cancel"
@
clear=
"clear"
>
...
...
@@ -97,105 +98,105 @@
<view
class=
"search-result"
>
<text
class=
"search-result-text"
>
当前输入为:{{ searchValue }}
</text>
</view>
</uni-section>
<uni-section
title=
"自定义样式"
subTitle=
"使用 bgColor 属性自定义背景色"
type=
"line"
>
<uni-search-bar
placeholder=
"自定义背景色"
bgColor=
"#EEEEEE"
@
confirm=
"search"
/>
</uni-section>
<uni-section
title=
"自定义icon"
type=
"line"
>
<uni-search-bar
placeholder=
"自定义searchIcon"
@
confirm=
"search"
@
cancel=
"cancel"
cancel-text=
"cancel"
>
<uni-icons
slot=
"searchIcon"
color=
"#999999"
size=
"18"
type=
"home"
/>
</uni-search-bar>
</uni-section>
<uni-section
title=
"控制清除/取消按钮"
subTitle=
"使用 clearButton 属性设置清除按钮"
type=
"line"
>
<uni-search-bar
radius=
"5"
placeholder=
"一直显示"
clearButton=
"always"
cancelButton=
"always"
@
confirm=
"search"
@
cancel=
"cancel"
/>
<uni-search-bar
class=
"uni-mt-10"
radius=
"5"
placeholder=
"自动显示隐藏"
clearButton=
"auto"
cancelButton=
"none"
@
confirm=
"search"
/>
<uni-search-bar
class=
"uni-mt-10"
radius=
"100"
placeholder=
"一直不显示"
clearButton=
"none"
cancelButton=
"none"
@
confirm=
"search"
/>
</uni-section>
</view>
</template>
</uni-section>
<uni-section
title=
"自定义样式"
subTitle=
"使用 bgColor 属性自定义背景色"
type=
"line"
>
<uni-search-bar
placeholder=
"自定义背景色"
bgColor=
"#EEEEEE"
@
confirm=
"search"
/>
</uni-section>
<uni-section
title=
"自定义icon"
type=
"line"
>
<uni-search-bar
placeholder=
"自定义searchIcon"
@
confirm=
"search"
@
cancel=
"cancel"
cancel-text=
"cancel"
>
<uni-icons
slot=
"searchIcon"
color=
"#999999"
size=
"18"
type=
"home"
/>
</uni-search-bar>
</uni-section>
<uni-section
title=
"控制清除/取消按钮"
subTitle=
"使用 clearButton 属性设置清除按钮"
type=
"line"
>
<uni-search-bar
radius=
"5"
placeholder=
"一直显示"
clearButton=
"always"
cancelButton=
"always"
@
confirm=
"search"
@
cancel=
"cancel"
/>
<uni-search-bar
class=
"uni-mt-10"
radius=
"5"
placeholder=
"自动显示隐藏"
clearButton=
"auto"
cancelButton=
"none"
@
confirm=
"search"
/>
<uni-search-bar
class=
"uni-mt-10"
radius=
"100"
placeholder=
"一直不显示"
clearButton=
"none"
cancelButton=
"none"
@
confirm=
"search"
/>
</uni-section>
</view>
</template>
```
> Script
```
html
<script>
export
default
{
data
()
{
return
{
searchValue
:
'
123123
'
}
},
methods
:
{
search
(
res
)
{
uni
.
showToast
({
title
:
'
搜索:
'
+
res
.
value
,
icon
:
'
none
'
})
},
input
(
res
)
{
console
.
log
(
'
----input:
'
,
res
)
},
clear
(
res
)
{
uni
.
showToast
({
title
:
'
clear事件,清除值为:
'
+
res
.
value
,
icon
:
'
none
'
})
},
blur
(
res
)
{
uni
.
showToast
({
title
:
'
blur事件,输入值为:
'
+
res
.
value
,
icon
:
'
none
'
})
},
focus
(
e
)
{
uni
.
showToast
({
title
:
'
focus事件,输出值为:
'
+
e
.
value
,
icon
:
'
none
'
})
},
cancel
(
res
)
{
uni
.
showToast
({
title
:
'
点击取消,输入值为:
'
+
res
.
value
,
icon
:
'
none
'
})
}
},
onBackPress
()
{
// #ifdef APP-PLUS
plus
.
key
.
hideSoftKeybord
();
// #endif
}
}
</script>
```
html
<script>
export
default
{
data
()
{
return
{
searchValue
:
'
123123
'
}
},
methods
:
{
search
(
res
)
{
uni
.
showToast
({
title
:
'
搜索:
'
+
res
.
value
,
icon
:
'
none
'
})
},
input
(
res
)
{
console
.
log
(
'
----input:
'
,
res
)
},
clear
(
res
)
{
uni
.
showToast
({
title
:
'
clear事件,清除值为:
'
+
res
.
value
,
icon
:
'
none
'
})
},
blur
(
res
)
{
uni
.
showToast
({
title
:
'
blur事件,输入值为:
'
+
res
.
value
,
icon
:
'
none
'
})
},
focus
(
e
)
{
uni
.
showToast
({
title
:
'
focus事件,输出值为:
'
+
e
.
value
,
icon
:
'
none
'
})
},
cancel
(
res
)
{
uni
.
showToast
({
title
:
'
点击取消,输入值为:
'
+
res
.
value
,
icon
:
'
none
'
})
}
},
onBackPress
()
{
// #ifdef APP-PLUS
plus
.
key
.
hideSoftKeybord
();
// #endif
}
}
</script>
```
> Style
```
html
<style
lang=
"scss"
>
.search-result
{
padding-top
:
10px
;
padding-bottom
:
20px
;
text-align
:
center
;
}
.search-result-text
{
text-align
:
center
;
```
html
<style
lang=
"scss"
>
.search-result
{
padding-top
:
10px
;
padding-bottom
:
20px
;
text-align
:
center
;
}
.search-result-text
{
text-align
:
center
;
font-size
:
14px
;
color
:
#666
;
}
.example-body
{
/* #ifndef APP-NVUE */
display
:
block
;
/* #endif */
padding
:
0px
;
color
:
#666
;
}
.example-body
{
/* #ifndef APP-NVUE */
display
:
block
;
/* #endif */
padding
:
0px
;
}
.uni-mt-10
{
margin-top
:
10px
;
}
}
</style>
```
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录