Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui
提交
45557f03
N
nutui
项目概览
京东前端
/
nutui
通知
37
Star
4
Fork
1
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
nutui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
45557f03
编写于
7月 10, 2019
作者:
F
Frans
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
upd(SearchBar): 增加props控制内部Icon尺寸和颜色
上级
726d4bf6
变更
6
隐藏空白更改
内联
并排
Showing
6 changed file
with
50 addition
and
19 deletion
+50
-19
CHANGELOG.md
CHANGELOG.md
+10
-0
package.json
package.json
+1
-1
src/locales/lang/en-US.js
src/locales/lang/en-US.js
+2
-3
src/packages/searchbar/doc.md
src/packages/searchbar/doc.md
+7
-1
src/packages/searchbar/searchbar.scss
src/packages/searchbar/searchbar.scss
+3
-10
src/packages/searchbar/searchbar.vue
src/packages/searchbar/searchbar.vue
+27
-4
未找到文件。
CHANGELOG.md
浏览文件 @
45557f03
## 2.1.4
`2019-7-10`
*
:sparkles: upd(SearchBar): 增加props控制内部Icon尺寸和颜色
*
:bug: fix(Skeleton): 修复文档无法查看的问题
*
:bug: fix: 修复国际化语言包一处错误
*
:zap: chore: 优化服务端渲染
*
:zap: doc: 新增加入我们页面
## 2.1.3
`2019-6-26`
...
...
package.json
浏览文件 @
45557f03
{
"name"
:
"@nutui/nutui"
,
"version"
:
"2.1.
3
"
,
"version"
:
"2.1.
4
"
,
"description"
:
"一套轻量级移动端Vue组件库"
,
"typings"
:
"dist/types/index.d.ts"
,
"main"
:
"dist/nutui.js"
,
...
...
src/locales/lang/en-US.js
浏览文件 @
45557f03
...
...
@@ -2,8 +2,6 @@ import Vue from 'vue'
const
lang
=
{
lang
:
{
okBtnTxt
:
'
Ok
'
,
cancelBtnTxt
:
'
Cancel
'
,
calendar
:
{
loadPrevMonth
:
'
Load the last month
'
,
noMoreMonth
:
'
No earlier month~
'
,
...
...
@@ -34,7 +32,8 @@ const lang = {
limitError
:
'
File size exceeded the limit
'
}
okBtnTxt
:
'
Ok
'
,
cancelText
:
'
Cancel
'
cancelText
:
'
Cancel
'
,
cancelBtnTxt
:
'
Cancel
'
,
}
}
...
...
src/packages/searchbar/doc.md
浏览文件 @
45557f03
...
...
@@ -80,7 +80,13 @@ export default {
| hasTextButton | 右侧搜索按钮是否为文字按钮 | Boolean | false
| textInfo | 右侧文字搜索按钮文案 | String | '搜索'
| animation | 是否需要默认的搜索框显示动画 | Boolean | true
| customClass | 自定义 class | String | ' '
| customClass | 自定义 class | String | ''
| searchIconSize | Search 图标的尺寸 | String | '20px'
| searchIconColor | Search 图标的颜色 | String | '#2e2d2d'
| searchBtnIconSize | 搜索按钮图标的尺寸 | String | '20px'
| searchBtnIconColor | 搜索按钮图标的颜色 | String | '#2e2d2d'
| clearIconSize | 清空按钮图标的尺寸 | String | '15px'
| clearIconColor | 清空按钮图标的颜色 | String | '#2e2d2d'
## Event
...
...
src/packages/searchbar/searchbar.scss
浏览文件 @
45557f03
...
...
@@ -9,23 +9,16 @@
background-color
:
$light-color
;
border-radius
:
20px
;
form
{
display
:flex
;
align-items
:center
;
position
:
relative
;
margin-right
:
10px
;
.nut-icon
{
float
:
left
;
margin
:
8px
0
0
10px
;
}
.close-icon
{
display
:
none
;
&
.show
{
display
:
inline-
block
;
display
:
inline-
flex
;
}
}
.nut-icon-circle-cross
{
position
:
absolute
;
right
:
5px
;
top
:
0
;
}
}
i
{
display
:
inline-block
;
...
...
src/packages/searchbar/searchbar.vue
浏览文件 @
45557f03
...
...
@@ -2,7 +2,7 @@
<div
:class=
"['nut-searchbar',customClass ? customClass : '']"
>
<div
class=
"search-input"
:class=
"[animation ? 'nut-search-ani':'',inputFocusAnimation?'focus':'']"
>
<form
action=
""
id=
"input-form"
@
submit=
"submitFun"
>
<nut-icon
type=
"search"
v-if=
"hasIcon"
width=
"20"
height=
"20
"
></nut-icon>
<nut-icon
type=
"search"
v-if=
"hasIcon"
:size=
"searchIconSize"
:color=
"searchIconColor
"
></nut-icon>
<input
type=
"text"
v-model=
"value"
:placeholder=
"placeText || nutTranslate('lang.searchbar.placeText')"
...
...
@@ -12,18 +12,17 @@
>
<span
class=
"close-icon"
:class=
"hasCloseIcon ? 'show':''"
@
click=
"clearInput"
>
<nut-icon
type=
"circle-cross"
width=
"15"
height=
"15
"
></nut-icon>
<nut-icon
type=
"circle-cross"
:size=
"clearIconSize"
:color=
"clearIconColor
"
></nut-icon>
</span>
</form>
</div>
<a
href=
"javascript:;"
class=
"btn-search"
v-if=
"hasSearchButton"
@
click=
"submitFun"
>
<span
v-if=
"hasTextButton"
>
{{
textInfo
||
nutTranslate
(
'
lang.searchbar.textInfo
'
)
}}
</span>
<nut-icon
type=
"search"
v-else
width=
"20"
height=
"20
"
></nut-icon>
<nut-icon
type=
"search"
v-else
:size=
"searchBtnIconSize"
:color=
"searchBtnIconColor
"
></nut-icon>
</a>
</div>
</
template
>
<
script
>
import
nuticon
from
"
../icon/icon.vue
"
;
import
locale
from
"
../../mixins/locale
"
;
export
default
{
...
...
@@ -34,6 +33,30 @@ export default {
type
:
Boolean
,
default
:
false
},
searchIconSize
:
{
type
:
String
,
default
:
'
20px
'
},
searchIconColor
:
{
type
:
String
,
default
:
'
#2e2d2d
'
},
searchBtnIconSize
:
{
type
:
String
,
default
:
'
20px
'
},
searchBtnIconColor
:
{
type
:
String
,
default
:
'
#2e2d2d
'
},
clearIconSize
:{
type
:
String
,
default
:
'
15px
'
},
clearIconColor
:
{
type
:
String
,
default
:
'
#2e2d2d
'
},
placeText
:
{
type
:
String
},
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录