Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
U
uview-ui
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
李晖
uview-ui
Commits
240accf9
Commit
240accf9
authored
Apr 23, 2020
by
PC-20180318CEYD\Administrator
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
解决冲突
parent
f21fbd7c
Changes
14
Show whitespace changes
Inline
Side-by-side
Showing
14 changed files
with
463 additions
and
251 deletions
+463
-251
.gitignore
.gitignore
+1
-1
u-badge.vue
uview/components/u-badge/u-badge.vue
+17
-0
u-count-down.vue
uview/components/u-count-down/u-count-down.vue
+22
-0
u-count-to.vue
uview/components/u-count-to/u-count-to.vue
+16
-0
u-divider.vue
uview/components/u-divider/u-divider.vue
+14
-0
u-gap.vue
uview/components/u-gap/u-gap.vue
+35
-34
u-grid.vue
uview/components/u-grid/u-grid.vue
+10
-0
u-lazy-load.vue
uview/components/u-lazy-load/u-lazy-load.vue
+20
-0
u-loadmore.vue
uview/components/u-loadmore/u-loadmore.vue
+16
-0
u-message-input.vue
uview/components/u-message-input/u-message-input.vue
+18
-0
u-navbar.vue
uview/components/u-navbar/u-navbar.vue
+22
-0
u-notice-bar.vue
uview/components/u-notice-bar/u-notice-bar.vue
+27
-0
u-search.vue
uview/components/u-search/u-search.vue
+232
-216
u-section.vue
uview/components/u-section/u-section.vue
+13
-0
No files found.
.gitignore
View file @
240accf9
/unpackage/dist/*
/unpackage/dist/*
/node_modules/*
/node_modules/*
/.idea/*
uview/components/u-badge/u-badge.vue
View file @
240accf9
...
@@ -12,6 +12,23 @@
...
@@ -12,6 +12,23 @@
</
template
>
</
template
>
<
script
>
<
script
>
/**
* alertTips 提示
* @description 该组件一般用于图标右上角显示未读的消息数量,提示用户点击,有圆点和圆包含文字两种形式。
* @tutorial https://www.uviewui.com/components/badge.html
* @property {String Number} count 展示的数字,大于 overflowCount 时显示为 ${overflowCount}+,为0且show-zero为false时隐藏
* @property {Boolean} is-dot 不展示数字,只有一个小点(默认false)
* @property {Boolean} absolute 组件是否绝对定位,为true时,offset参数才有效(默认true)
* @property {String Number} overflow-count 展示封顶的数字值(默认99)
* @property {String} type 使用预设的背景颜色(默认error)
* @property {Boolean} show-zero 当数值为 0 时,是否展示 Badge(默认false)
* @property {String} size Badge的尺寸,设为mini会得到小一号的Badge(默认default)
* @property {Array} offset 设置badge的位置偏移,格式为 [x, y],也即设置的为top和right的值,单位rpx。absolute为true时有效(默认[20, 20])
* @property {String} color 字体颜色(默认#ffffff)
* @property {String} bgColor 背景颜色,优先级比type高,如设置,type参数会失效
* @property {Boolean} is-center 组件中心点是否和父组件右上角重合,优先级比offset高,如设置,offset参数会失效(默认false)
* @example <u-badge type="error" count="7"></u-badge>
*/
export
default
{
export
default
{
props
:
{
props
:
{
// primary,warning,success,error,info
// primary,warning,success,error,info
...
...
uview/components/u-count-down/u-count-down.vue
View file @
240accf9
...
@@ -52,6 +52,28 @@
...
@@ -52,6 +52,28 @@
</
template
>
</
template
>
<
script
>
<
script
>
/**
* alertTips 提示
* @description 该组件一般使用于某个活动的截止时间上,通过数字的变化,给用户明确的时间感受,提示用户进行某一个行为操作。
* @tutorial https://www.uviewui.com/components/countDown.html
* @property {String Number} timestamp 倒计时,单位为秒
* @property {Boolean} autopaly 是否自动开始倒计时,如果为false,需手动调用开始方法。见官网说明(默认true)
* @property {String} separator 分隔符,colon为英文冒号,zh为中文(默认colon)
* @property {String Number} separator-size 分隔符的字体大小,单位rpx(默认30)
* @property {String} separator-color 分隔符的颜色(默认#303133)
* @property {String Number} font-size 倒计时字体大小,单位rpx(默认30)
* @property {Boolean} show-border 是否显示倒计时数字的边框(默认false)
* @property {String} border-color 数字边框的颜色(默认#303133)
* @property {String} bg-color 倒计时数字的背景颜色(默认#ffffff)
* @property {String} color 倒计时数字的颜色(默认#303133)
* @property {String} height 数字高度值(宽度等同此值),设置边框时看情况是否需要设置此值,单位rpx(默认auto)
* @property {Boolean} show-days 是否显示倒计时的"天"部分(默认true)
* @property {Boolean} show-hours 是否显示倒计时的"时"部分(默认true)
* @property {Boolean} show-minutes 是否显示倒计时的"分"部分(默认true)
* @property {Boolean} show-seconds 是否显示倒计时的"秒"部分(默认true)
* @event {Function} end 倒计时结束
* @example <u-count-down ref="uCountDown" :timestamp="86400" :autoplay="false"></u-count-down>
*/
export
default
{
export
default
{
props
:
{
props
:
{
// 倒计时的时间,秒为单位
// 倒计时的时间,秒为单位
...
...
uview/components/u-count-to/u-count-to.vue
View file @
240accf9
...
@@ -12,6 +12,22 @@
...
@@ -12,6 +12,22 @@
</
template
>
</
template
>
<
script
>
<
script
>
/**
* alertTips 提示
* @description 该组件一般用于需要滚动数字到某一个值的场景,目标要求是一个递增的值。
* @tutorial https://www.uviewui.com/components/countTo.html
* @property {String Number} start-val 开始值
* @property {String Number} end-val 结束值
* @property {String Number} duration 滚动过程所需的时间,单位ms(默认2000)
* @property {Boolean} autoplay 是否自动开始滚动(默认true)
* @property {String Number} decimals 要显示的小数位数,见官网说明(默认0)
* @property {Boolean} use-easing 滚动结束时,是否缓动结尾,见官网说明(默认true)
* @property {String} separator 千位分隔符,见官网说明
* @property {String} color 字体颜色(默认#303133)
* @property {String Number} font-size 字体大小,单位rpx(默认50)
* @event {Function} end 数值滚动到目标值时触发
* @example <u-count-to ref="uCountTo" :end-val="endVal" :autoplay="autoplay"></u-count-to>
*/
export
default
{
export
default
{
props
:
{
props
:
{
// 开始的数值,默认从0增长到某一个数
// 开始的数值,默认从0增长到某一个数
...
...
uview/components/u-divider/u-divider.vue
View file @
240accf9
...
@@ -15,6 +15,20 @@
...
@@ -15,6 +15,20 @@
</
template
>
</
template
>
<
script
>
<
script
>
/**
* alertTips 提示
* @description 区隔内容的分割线,一般用于页面底部"没有更多"的提示。
* @tutorial https://www.uviewui.com/components/divider.html
* @property {String Number} half-width 文字左或右边线条宽度,数值或百分比,数值时单位为rpx
* @property {String} border-color 线条颜色,优先级高于type(默认#dcdfe6)
* @property {String} color 文字颜色(默认#909399)
* @property {String Number} fontSize 字体大小,单位rpx(默认26)
* @property {String} bg-color 整个divider的背景颜色(默认呢#ffffff)
* @property {String Number} height 整个divider的高度,单位rpx(默认40)
* @property {String} type 将线条设置主题色(默认primary)
* @event {Function} click divider组件被点击时触发
* @example <u-divider color="#fa3534">长河落日圆</u-divider>
*/
export
default
{
export
default
{
props
:
{
props
:
{
// 单一边divider横线的宽度(数值),单位rpx。或者百分比
// 单一边divider横线的宽度(数值),单位rpx。或者百分比
...
...
uview/components/u-gap/u-gap.vue
View file @
240accf9
<!--
* @Desc: --- ----
* @Date: 2020-04-22 12:29:22
* @LastEditors: 王
* @LastEditTime: 2020-04-22 18:31:36
-->
<
template
>
<
template
>
<view
class=
"u-gap"
:style=
"[gapStyle]"
></view>
<view
class=
"u-gap"
:style=
"[gapStyle]"
></view>
</
template
>
</
template
>
<
script
>
<
script
>
/**
* alertTips 提示
* @description 该组件一般用于内容块之间的用一个灰色块隔开的场景,方便用户风格统一,减少工作量
* @tutorial https://www.uviewui.com/components/gap.html
* @property {String} bg-color 背景颜色(默认#f3f4f6)
* @property {String Number} height 分割槽高度,单位rpx(默认30)
* @example <u-gap height="80" bg-color="#bbb"></u-gap>
*/
export
default
{
export
default
{
props
:
{
props
:
{
bgColor
:
{
bgColor
:
{
type
:
String
,
type
:
String
,
default
:
"
#f3f4f6
"
// 也即:rgb(243, 244, 246)
default
:
'
#f3f4f6
'
// 也即:rgb(243, 244, 246)
},
},
// 高度
// 高度
height
:
{
height
:
{
...
@@ -29,14 +31,13 @@ export default {
...
@@ -29,14 +31,13 @@ export default {
gapStyle
()
{
gapStyle
()
{
return
{
return
{
backgroundColor
:
this
.
bgColor
,
backgroundColor
:
this
.
bgColor
,
height
:
this
.
height
+
"
rpx
"
,
height
:
this
.
height
+
'
rpx
'
,
marginTop
:
this
.
margin
+
"
rpx
"
,
marginTop
:
this
.
margin
+
'
rpx
'
,
marginBttom
:
this
.
margin
+
"
rpx
"
marginBttom
:
this
.
margin
+
'
rpx
'
};
};
}
}
}
}
};
};
</
script
>
</
script
>
<
style
>
<
style
></
style
>
</
style
>
uview/components/u-grid/u-grid.vue
View file @
240accf9
...
@@ -3,6 +3,16 @@
...
@@ -3,6 +3,16 @@
</
template
>
</
template
>
<
script
>
<
script
>
/**
* alertTips 提示
* @description 宫格组件一般用于同时展示多个同类项目的场景,可以给宫格的项目设置徽标组件(badge),或者图标等,也可以扩展为左右滑动的轮播形式。
* @tutorial https://www.uviewui.com/components/grid.html
* @property {String Number} col 宫格的列数(默认3)
* @property {Boolean} border 是否显示宫格的边框(默认true)
* @property {Boolean} hover-class 点击宫格的时候,是否显示按下的灰色背景(默认false)
* @event {Function} click 点击宫格触发
* @example <u-grid :col="3" @click="click"></u-grid>
*/
export
default
{
export
default
{
props
:
{
props
:
{
// 分成几列
// 分成几列
...
...
uview/components/u-lazy-load/u-lazy-load.vue
View file @
240accf9
...
@@ -16,6 +16,26 @@
...
@@ -16,6 +16,26 @@
</
template
>
</
template
>
<
script
>
<
script
>
/**
* alertTips 提示
* @description 懒加载使用的场景为:页面有很多图片时,APP会同时加载所有的图片,导致页面卡顿,各个位置的图片出现前后不一致等.
* @tutorial https://www.uviewui.com/components/lazyLoad.html
* @property {String Number} index 用户自定义值,在事件触发时回调,用以区分是哪个图片
* @property {String} image 图片路径
* @property {String} loading-img 预加载时的占位图
* @property {String} error-img 图片加载出错时的占位图
* @property {String} threshold 触发加载时的位置,见上方说明,单位 rpx(默认300)
* @property {String Number} duration 图片加载成功时,淡入淡出时间,单位ms(默认)
* @property {String} effect 图片加载成功时,淡入淡出的css动画效果(默认ease-in-out)
* @property {Boolean} is-effect 图片加载成功时,是否启用淡入淡出效果(默认true)
* @property {String Number} border-radius 图片圆角值,单位rpx(默认0)
* @property {String Number} height 图片高度,注意:实际高度可能受img-mode参数影响(默认450)
* @property {String Number} mg-mode 图片的裁剪模式,详见image组件裁剪模式(默认widthFix)
* @event {Function} click 点击图片时触发
* @event {Function} load 图片加载成功时触发
* @event {Function} error 图片加载失败时触发
* @example <u-lazy-load :image="image" :loading-img="loadingImg" :error-img="errorImg"></u-lazy-load>
*/
// observer最终赋值的是个对象,不能放到data中,vue会报错(浏览器),也不能在用到的地方let定义,某些安卓也报错……
// observer最终赋值的是个对象,不能放到data中,vue会报错(浏览器),也不能在用到的地方let定义,某些安卓也报错……
let
observer
=
{};
let
observer
=
{};
export
default
{
export
default
{
...
...
uview/components/u-loadmore/u-loadmore.vue
View file @
240accf9
...
@@ -16,6 +16,22 @@
...
@@ -16,6 +16,22 @@
</
template
>
</
template
>
<
script
>
<
script
>
/**
* alertTips 提示
* @description 此组件一般用于标识页面底部加载数据时的状态。
* @tutorial https://www.uviewui.com/components/loadMore.html
* @property {String} status 组件状态(默认loadmore)
* @property {String} bg-color 组件背景颜色,在页面是非白色时会用到(默认#ffffff)
* @property {Boolean} icon 加载中时是否显示图标(默认true)
* @property {String} icon-type 加载中时的图标类型(默认circle)
* @property {String} icon-color icon-type为circle时有效,加载中的动画图标的颜色(默认#b7b7b7)
* @property {Boolean} is-dot status为nomore时,内容显示为一个"●"(默认false)
* @property {String} color 字体颜色(默认#606266)
* @property {String Number} font-size 字体大小,单位rpx(默认28)
* @property {Object} load-text 自定义显示的文字,见上方说明示例
* @event {Function} loadmore status为loadmore时,点击组件会发出此事件
* @example <u-loadmore :status="status" icon-type="iconType" load-text="loadText" />
*/
export
default
{
export
default
{
name
:
"
loadMore
"
,
name
:
"
loadMore
"
,
props
:
{
props
:
{
...
...
uview/components/u-message-input/u-message-input.vue
View file @
240accf9
...
@@ -33,6 +33,24 @@
...
@@ -33,6 +33,24 @@
</
template
>
</
template
>
<
script
>
<
script
>
/**
* alertTips 提示
* @description 该组件一般用于验证用户短信验证码的场景,也可以结合uView的键盘组件使用
* @tutorial https://www.uviewui.com/components/messageInput.html
* @property {String Number} maxlength 输入字符个数(默认4)
* @property {Boolean} dot-fill 是否用圆点填充(默认false)
* @property {String} mode 模式选择,见上方"基本使用"说明(默认box)
* @property {String Number} value 预置值
* @property {Boolean} breathe 是否开启呼吸效果,见上方说明(默认true)
* @property {Boolean} focus 是否自动获取焦点(默认false)
* @property {Boolean} bold 字体和输入横线是否加粗(默认true)
* @property {String Number} font-size 字体大小,单位rpx(默认60)
* @property {String} active-color 当前激活输入框的样式(默认#2979ff)
* @property {String} focus 非激活输入框的样式,文字颜色同此值(默认#606266)
* @event {Function} change 输入内容发生改变时触发,具体见官网说明
* @event {Function} finish 输入字符个数达maxlength值时触发,见官网说明
* @example <u-message-input mode="bottomLine"></u-message-input>
*/
export
default
{
export
default
{
props
:
{
props
:
{
// 最大输入长度
// 最大输入长度
...
...
uview/components/u-navbar/u-navbar.vue
View file @
240accf9
...
@@ -27,6 +27,28 @@
...
@@ -27,6 +27,28 @@
</
template
>
</
template
>
<
script
>
<
script
>
/**
* alertTips 提示
* @description 此组件一般用于在特殊情况下,需要自定义导航栏的时候用到,一般建议使用uniapp自带的导航栏。
* @tutorial https://www.uviewui.com/components/navbar.html
* @property {String Number} height 导航栏高度(不包括状态栏高度在内,内部自动加上),注意这里的单位是px(默认44)
* @property {String} back-icon-color 左边返回图标的颜色(默认#606266)
* @property {String} back-icon-name 左边返回图标的名称,只能为uView自带的图标(默认arrow-left)
* @property {String Number} back-icon-size 左边返回图标的大小,单位rpx(默认30)
* @property {String} back-text 返回图标右边的辅助提示文字
* @property {Object} back-text-style 返回图标右边的辅助提示文字的样式,对象形式(默认{ color: '#606266' })
* @property {String} title 导航栏标题,如设置为空字符,将会隐藏标题占位区域
* @property {String Number} title-width 导航栏标题的最大宽度,内容超出会以省略号隐藏,单位rpx(默认250)
* @property {String} title-color 标题的颜色(默认#606266)
* @property {String Number} title-size 导航栏标题字体大小,单位rpx(默认32)
* @property {String Number} z-index 固定在顶部时的z-index值(默认980)
* @property {Boolean} is-back 是否显示导航栏左边返回图标和辅助文字(默认true)
* @property {Object} background 导航栏背景设置,见官网说明(默认{ background: '#ffffff' })
* @property {Boolean} is-fixed 导航栏是否固定在顶部(默认true)
* @property {Boolean} border-bottom 导航栏底部是否显示下边框,如定义了较深的背景颜色,可取消此值(默认true)
* @example <u-navbar back-text="返回" title="剑未配妥,出门已是江湖"></u-navbar>
*/
// 获取系统状态栏的高度
// 获取系统状态栏的高度
let
systemInfo
=
uni
.
getSystemInfoSync
();
let
systemInfo
=
uni
.
getSystemInfoSync
();
let
menuButtonInfo
=
{};
let
menuButtonInfo
=
{};
...
...
uview/components/u-notice-bar/u-notice-bar.vue
View file @
240accf9
...
@@ -45,6 +45,33 @@
...
@@ -45,6 +45,33 @@
</view>
</view>
</
template
>
</
template
>
<
script
>
<
script
>
/**
* alertTips 提示
* @description 该组件用于滚动通告场景,有多种模式可供选择
* @tutorial https://www.uviewui.com/components/noticeBar.html
* @property {Array} list 滚动内容,数组形式,见上方说明
* @property {String} type 显示的主题(默认warning)
* @property {Boolean} volume-icon 是否显示小喇叭图标(默认true)
* @property {Boolean} more-icon 是否显示右边的向右箭头(默认false)
* @property {Boolean} close-icon 是否显示关闭图标(默认false)
* @property {Boolean} autoplay 是否自动播放(默认true)
* @property {String} color 文字颜色
* @property {String Number} bg-color 背景颜色
* @property {String} mode 滚动模式(默认horizontal)
* @property {Boolean} show 是否显示(默认true)
* @property {String Number} font-size 字体大小,单位rpx(默认28)
* @property {String Number} duration 滚动周期时长,只对步进模式有效,横向衔接模式无效,单位ms(默认2000)
* @property {String Number} speed 水平滚动时的滚动速度,即每秒移动多少距离,只对水平衔接方式有效,单位rpx(默认160)
* @property {String Number} font-size 字体大小,单位rpx(默认28)
* @property {Boolean} is-circular mode为horizontal时,指明是否水平衔接滚动(默认true)
* @property {String} play-state 播放状态,paly - 播放,paused - 暂停(默认paly)
* @property {Boolean} disable-touch 是否禁止通过手动滑动切换通知,只有mode = vertical,或者mode = horizontal且is-circular = false时有效(默认true)
* @event {Function} click 点击通告文字触发,只有mode = vertical,或者mode = horizontal且is-circular = false时有效
* @event {Function} close 点击右侧关闭图标触发
* @event {Function} getMore 点击右侧向右图标触发
* @event {Function} end 列表的消息每次被播放一个周期时触发,只有mode = vertical,或者mode = horizontal且is-circular = false时有效
* @example <u-notice-bar :more-icon="true" :list="list"></u-notice-bar>
*/
export
default
{
export
default
{
props
:
{
props
:
{
// 显示的内容,数组
// 显示的内容,数组
...
...
uview/components/u-search/u-search.vue
View file @
240accf9
...
@@ -9,9 +9,7 @@
...
@@ -9,9 +9,7 @@
height: height + 'rpx'
height: height + 'rpx'
}"
}"
>
>
<view
class=
"u-icon-wrap"
>
<view
class=
"u-icon-wrap"
><u-icon
class=
"u-clear-icon"
:size=
"30"
name=
"search"
color=
"#909399"
></u-icon></view>
<u-icon
class=
"u-clear-icon"
:size=
"30"
name=
"search"
color=
"#909399"
></u-icon>
</view>
<input
<input
confirm-type=
"search"
confirm-type=
"search"
@
blur=
"blur"
@
blur=
"blur"
...
@@ -33,32 +31,50 @@
...
@@ -33,32 +31,50 @@
<u-icon
class=
"u-clear-icon"
name=
"close"
:size=
"16"
color=
"#fff"
@
touchstart=
"clear"
></u-icon>
<u-icon
class=
"u-clear-icon"
name=
"close"
:size=
"16"
color=
"#fff"
@
touchstart=
"clear"
></u-icon>
</view>
</view>
</view>
</view>
<view
<view
:style=
"[actionStyle]"
class=
"u-action"
:class=
"[showActionBtn || show ? 'u-action-active' : '']"
@
tap=
"custom"
>
{{
actionText
}}
</view>
:style=
"[actionStyle]"
class=
"u-action"
:class=
"[showActionBtn || show ? 'u-action-active' : '']"
@
tap=
"custom"
>
{{
actionText
}}
</view>
</view>
</view>
</
template
>
</
template
>
<
script
>
<
script
>
/**
* alertTips 提示
* @description 搜索组件,集成了常见搜索框所需功能,用户可以一键引入,开箱即用。
* @tutorial https://www.uviewui.com/components/search.html
* @property {String} shape 搜索框形状,round-圆形,square-方形(默认round)
* @property {String} bg-color 搜索框背景颜色(默认#f2f2f2)
* @property {String} border-color 边框颜色,配置了颜色,才会有边框
* @property {String} placeholder 占位文字内容(默认“请输入关键字”)
* @property {Boolean} clearabled 是否启用清除控件(默认true)
* @property {Boolean} focus 是否自动获得焦点(默认false)
* @property {Boolean} show-action 是否显示右侧控件(默认true)
* @property {String} action-text 右侧控件文字(默认“搜索”)
* @property {Object} action-style 右侧控件的样式,对象形式
* @property {String} input-align 输入框内容水平对齐方式(默认left)
* @property {Boolean} disabled 是否启用输入框(默认false)
* @property {Boolean} animation 是否开启动画,见上方说明(默认false)
* @property {String} value 输入框初始值
* @property {String Number} height 输入框高度,单位rpx(默认64)
* @event {Function} change 输入框内容发生变化时触发
* @event {Function} search 用户确定搜索时触发,用户按回车键,或者手机键盘右下角的"搜索"键时触发
* @event {Function} custom 用户点击右侧控件时触发
* @example <u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
*/
export
default
{
export
default
{
props
:
{
props
:
{
// 搜索框形状,round-圆形,square-方形
// 搜索框形状,round-圆形,square-方形
shape
:
{
shape
:
{
type
:
String
,
type
:
String
,
default
:
"
round
"
default
:
'
round
'
},
},
// 搜索框背景色,默认值#f2f2f2
// 搜索框背景色,默认值#f2f2f2
bgColor
:
{
bgColor
:
{
type
:
String
,
type
:
String
,
default
:
"
#f2f2f2
"
default
:
'
#f2f2f2
'
},
},
// 占位提示文字
// 占位提示文字
placeholder
:
{
placeholder
:
{
type
:
String
,
type
:
String
,
default
:
"
请输入关键字
"
default
:
'
请输入关键字
'
},
},
// 是否启用清除控件
// 是否启用清除控件
clearabled
:
{
clearabled
:
{
...
@@ -85,12 +101,12 @@ export default {
...
@@ -85,12 +101,12 @@ export default {
// 取消按钮文字
// 取消按钮文字
actionText
:
{
actionText
:
{
type
:
String
,
type
:
String
,
default
:
"
搜索
"
default
:
'
搜索
'
},
},
// 输入框内容对齐方式,可选值为 left|center|right
// 输入框内容对齐方式,可选值为 left|center|right
inputAlign
:
{
inputAlign
:
{
type
:
String
,
type
:
String
,
default
:
"
left
"
default
:
'
left
'
},
},
// 是否启用输入框
// 是否启用输入框
disabled
:
{
disabled
:
{
...
@@ -105,12 +121,12 @@ export default {
...
@@ -105,12 +121,12 @@ export default {
// 边框颜色,只要配置了颜色,才会有边框
// 边框颜色,只要配置了颜色,才会有边框
borderColor
:
{
borderColor
:
{
type
:
String
,
type
:
String
,
default
:
"
none
"
default
:
'
none
'
},
},
// 输入框的初始化内容
// 输入框的初始化内容
value
:
{
value
:
{
type
:
String
,
type
:
String
,
default
:
""
default
:
''
},
},
// 搜索框高度,单位rpx
// 搜索框高度,单位rpx
height
:
{
height
:
{
...
@@ -120,7 +136,7 @@ export default {
...
@@ -120,7 +136,7 @@ export default {
},
},
data
()
{
data
()
{
return
{
return
{
keyword
:
""
,
keyword
:
''
,
showClear
:
false
,
// 是否显示右边的清除图标
showClear
:
false
,
// 是否显示右边的清除图标
show
:
false
,
show
:
false
,
// 标记input当前状态是否处于聚焦中,如果是,才会显示右侧的清除控件
// 标记input当前状态是否处于聚焦中,如果是,才会显示右侧的清除控件
...
@@ -132,9 +148,9 @@ export default {
...
@@ -132,9 +148,9 @@ export default {
watch
:
{
watch
:
{
keyword
(
nVal
)
{
keyword
(
nVal
)
{
// 双向绑定值,让v-model绑定的值双向变化
// 双向绑定值,让v-model绑定的值双向变化
this
.
$emit
(
"
input
"
,
nVal
);
this
.
$emit
(
'
input
'
,
nVal
);
// 触发change事件,事件效果和v-model双向绑定的效果一样,让用户多一个选择
// 触发change事件,事件效果和v-model双向绑定的效果一样,让用户多一个选择
this
.
$emit
(
"
change
"
,
nVal
);
this
.
$emit
(
'
change
'
,
nVal
);
},
},
value
:
{
value
:
{
immediate
:
true
,
immediate
:
true
,
...
@@ -151,7 +167,7 @@ export default {
...
@@ -151,7 +167,7 @@ export default {
// 样式,根据用户传入的颜色值生成,如果不传入,默认为none
// 样式,根据用户传入的颜色值生成,如果不传入,默认为none
borderStyle
()
{
borderStyle
()
{
if
(
this
.
borderColor
)
return
`1px solid
${
this
.
borderColor
}
`
;
if
(
this
.
borderColor
)
return
`1px solid
${
this
.
borderColor
}
`
;
else
return
"
none
"
;
else
return
'
none
'
;
}
}
},
},
methods
:
{
methods
:
{
...
@@ -162,17 +178,17 @@ export default {
...
@@ -162,17 +178,17 @@ export default {
// 清空输入
// 清空输入
// 也可以作为用户通过this.$refs形式调用清空输入框内容
// 也可以作为用户通过this.$refs形式调用清空输入框内容
clear
()
{
clear
()
{
this
.
keyword
=
""
;
this
.
keyword
=
''
;
},
},
// 确定搜索
// 确定搜索
search
()
{
search
()
{
this
.
$emit
(
"
search
"
,
this
.
keyword
);
this
.
$emit
(
'
search
'
,
this
.
keyword
);
// 收起键盘
// 收起键盘
uni
.
hideKeyboard
();
uni
.
hideKeyboard
();
},
},
// 点击右边自定义按钮的事件
// 点击右边自定义按钮的事件
custom
()
{
custom
()
{
this
.
$emit
(
"
custom
"
,
this
.
keyword
);
this
.
$emit
(
'
custom
'
,
this
.
keyword
);
// 收起键盘
// 收起键盘
uni
.
hideKeyboard
();
uni
.
hideKeyboard
();
},
},
...
...
uview/components/u-section/u-section.vue
View file @
240accf9
...
@@ -19,6 +19,19 @@
...
@@ -19,6 +19,19 @@
</
template
>
</
template
>
<
script
>
<
script
>
/**
* alertTips 提示
* @description 该组件一般用于分类信息有很多,但是限于篇幅只能列出一部分,让用户通过"查看更多"获得更多信息的场景,实际效果见演示。
* @tutorial https://www.uviewui.com/components/section.html
* @property {String} title 左边主标题
* @property {String} sub-title 右边副标题(默认更多)
* @property {Boolean} right 是否显示右边的内容(默认true)
* @property {String Number} font-size 主标题的字体大小(默认28)
* @property {Boolean} bold 主标题是否加粗(默认true)
* @property {String} color 主标题颜色(默认#303133)
* @event {Function} click 组件右侧的内容被点击时触发,用于跳转"更多"
* @example <u-section title="今日热门" :right="false"></u-section>
*/
export
default
{
export
default
{
props
:
{
props
:
{
// 标题信息
// 标题信息
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment