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
2bfded3d
Commit
2bfded3d
authored
Apr 22, 2020
by
PC-20180318CEYD\Administrator
Browse files
Options
Browse Files
Download
Plain Diff
Merge branch 'xiaokonglong' into yiruiwen
parents
6c95f5b1
c61a470d
Changes
9
Show whitespace changes
Inline
Side-by-side
Showing
9 changed files
with
810 additions
and
711 deletions
+810
-711
main.js
main.js
+15
-8
index.vue
pages/componentsC/countTo/index.vue
+131
-107
index.vue
pages/componentsC/gap/index.vue
+67
-41
u-count-to.vue
uview/components/u-count-to/u-count-to.vue
+220
-193
u-gap.vue
uview/components/u-gap/u-gap.vue
+34
-24
u-search.vue
uview/components/u-search/u-search.vue
+231
-212
index.js
uview/index.js
+70
-88
mixin.js
uview/libs/mixin/mixin.js
+26
-38
wxshare.js
uview/libs/mixin/wxshare.js
+16
-0
No files found.
main.js
View file @
2bfded3d
/*
* @Desc: --- ----
* @Date: 2020-04-22 12:29:21
* @LastEditors: 王
* @LastEditTime: 2020-04-22 15:18:39
*/
import
Vue
from
'
vue
'
import
Vue
from
'
vue
'
import
App
from
'
./App
'
import
App
from
'
./App
'
...
@@ -6,18 +12,19 @@ Vue.config.productionTip = false
...
@@ -6,18 +12,19 @@ Vue.config.productionTip = false
App
.
mpType
=
'
app
'
App
.
mpType
=
'
app
'
// 此处为演示Vue.prototype使用,非uView的功能部分
// 此处为演示Vue.prototype使用,非uView的功能部分
Vue
.
prototype
.
vuePrototype
=
'
枣红
'
;
Vue
.
prototype
.
vuePrototype
=
'
枣红
'
// 引入全局uView
// 引入全局uView
import
uView
from
"
@/uview
"
;
// Vue.prototype.openShare = true // 是否开启全局分享
Vue
.
use
(
uView
);
import
uView
from
'
@/uview
'
Vue
.
use
(
uView
)
// 此处为演示vuex使用,非uView的功能部分
// 此处为演示vuex使用,非uView的功能部分
import
store
from
'
@/store
'
;
import
store
from
'
@/store
'
// 引入uView提供的对vuex的简写法文件
// 引入uView提供的对vuex的简写法文件
let
vuexStore
=
require
(
"
@/store/$u.mixin.js
"
);
let
vuexStore
=
require
(
'
@/store/$u.mixin.js
'
)
Vue
.
mixin
(
vuexStore
)
;
Vue
.
mixin
(
vuexStore
)
const
app
=
new
Vue
({
const
app
=
new
Vue
({
store
,
store
,
...
...
pages/componentsC/countTo/index.vue
View file @
2bfded3d
...
@@ -4,23 +4,33 @@
...
@@ -4,23 +4,33 @@
<view
class=
"u-demo-title"
>
演示效果
</view>
<view
class=
"u-demo-title"
>
演示效果
</view>
<view
class=
"u-demo-area"
>
<view
class=
"u-demo-area"
>
<u-toast
ref=
"uToast"
></u-toast>
<u-toast
ref=
"uToast"
></u-toast>
<view
class=
"u-no-demo-here"
>
<view
class=
"u-no-demo-here"
>
如果使用text-align: center对齐,数字滚动期间可能会抖动,见文档说明
</view>
如果使用text-align: center对齐,数字滚动期间可能会抖动,见文档说明
</view>
<view
class=
"count-to-demo"
>
<view
class=
"count-to-demo"
>
<u-count-to
class=
"count-to"
:useEasing=
"useEasing"
ref=
"uCountTo"
:autoplay=
"autoplay"
<u-count-to
:startVal=
"startVal"
:endVal=
"endVal"
:duration=
"duration"
:decimals=
"decimals"
class=
"count-to"
@
end=
"end"
></u-count-to>
:useEasing=
"useEasing"
ref=
"uCountTo"
:autoplay=
"autoplay"
:startVal=
"startVal"
:endVal=
"endVal"
:duration=
"duration"
:decimals=
"decimals"
:fontWeight=
"fontWeight"
@
end=
"end"
></u-count-to>
</view>
</view>
</view>
</view>
</view>
</view>
<view
class=
"u-config-wrap"
>
<view
class=
"u-config-wrap"
>
<view
class=
"u-config-title u-border-bottom"
>
<view
class=
"u-config-title u-border-bottom"
>
参数配置
</view>
参数配置
</view>
<view
class=
"u-config-item"
>
<view
class=
"u-config-item"
>
<view
class=
"u-item-title"
>
状态
</view>
<view
class=
"u-item-title"
>
状态
</view>
<u-subsection
vibrateShort
:current=
"current"
:list=
"['启动', '暂停', '继续', '重置']"
@
change=
"statusChange"
></u-subsection>
<u-subsection
vibrateShort
:current=
"current"
:list=
"['启动', '暂停', '继续', '重置']"
@
change=
"statusChange"
></u-subsection>
</view>
</view>
<view
class=
"u-config-item"
>
<view
class=
"u-config-item"
>
<view
class=
"u-item-title"
>
目标值
</view>
<view
class=
"u-item-title"
>
目标值
</view>
...
@@ -34,6 +44,15 @@
...
@@ -34,6 +44,15 @@
<view
class=
"u-item-title"
>
显示小数
</view>
<view
class=
"u-item-title"
>
显示小数
</view>
<u-subsection
vibrateShort
current=
"1"
:list=
"['是', '否']"
@
change=
"decimalsChange"
></u-subsection>
<u-subsection
vibrateShort
current=
"1"
:list=
"['是', '否']"
@
change=
"decimalsChange"
></u-subsection>
</view>
</view>
<view
class=
"u-config-item"
>
<view
class=
"u-item-title"
>
字体加粗
</view>
<u-subsection
vibrateShort
current=
"1"
:list=
"['normal', 'bold', 'bolder','lighter']"
@
change=
"fontWidthChange"
></u-subsection>
</view>
</view>
</view>
</view>
</view>
</
template
>
</
template
>
...
@@ -44,13 +63,14 @@ export default {
...
@@ -44,13 +63,14 @@ export default {
return
{
return
{
startVal
:
0
,
startVal
:
0
,
endVal
:
608
,
endVal
:
608
,
separator
:
'
,
'
,
separator
:
"
,
"
,
decimals
:
0
,
decimals
:
0
,
duration
:
2000
,
duration
:
2000
,
autoplay
:
false
,
autoplay
:
false
,
useEasing
:
true
,
useEasing
:
true
,
current
:
3
,
current
:
3
,
isStop
:
false
,
// 如果开没启动前,不允许点击状态选项的"继续"按钮,否则会导致显示NaN
isStop
:
false
,
// 如果开没启动前,不允许点击状态选项的"继续"按钮,否则会导致显示NaN
fontWeight
:
400
};
};
},
},
methods
:
{
methods
:
{
...
@@ -62,16 +82,20 @@ export default {
...
@@ -62,16 +82,20 @@ export default {
durationChange
(
index
)
{
durationChange
(
index
)
{
this
.
duration
=
index
==
0
?
1000
:
index
==
1
?
2000
:
3000
;
this
.
duration
=
index
==
0
?
1000
:
index
==
1
?
2000
:
3000
;
},
},
fontWidthChange
(
index
)
{
let
arr
=
[
"
normal
"
,
"
bold
"
,
"
bolder
"
,
"
lighter
"
];
this
.
fontWeight
=
arr
[
index
];
},
decimalsChange
(
index
)
{
decimalsChange
(
index
)
{
this
.
decimals
=
index
==
0
?
2
:
0
;
this
.
decimals
=
index
==
0
?
2
:
0
;
},
},
statusChange
(
index
)
{
statusChange
(
index
)
{
this
.
current
=
index
;
this
.
current
=
index
;
if
(
index
==
0
)
{
if
(
index
==
0
)
{
this
.
start
();
this
.
start
();
}
else
if
(
index
==
1
)
{
}
else
if
(
index
==
1
)
{
this
.
stop
();
this
.
stop
();
}
else
if
(
index
==
2
)
{
}
else
if
(
index
==
2
)
{
this
.
resume
();
this
.
resume
();
}
else
{
}
else
{
this
.
reset
();
this
.
reset
();
...
@@ -80,9 +104,9 @@ export default {
...
@@ -80,9 +104,9 @@ export default {
end
()
{
end
()
{
this
.
current
=
3
;
this
.
current
=
3
;
this
.
$refs
.
uToast
.
show
({
this
.
$refs
.
uToast
.
show
({
type
:
'
warning
'
,
type
:
"
warning
"
,
title
:
'
滚动结束
'
title
:
"
滚动结束
"
})
});
},
},
start
()
{
start
()
{
this
.
current
=
0
;
this
.
current
=
0
;
...
@@ -93,15 +117,15 @@ export default {
...
@@ -93,15 +117,15 @@ export default {
this
.
$refs
.
uCountTo
.
stop
();
this
.
$refs
.
uCountTo
.
stop
();
},
},
resume
()
{
resume
()
{
if
(
!
this
.
isStop
)
{
if
(
!
this
.
isStop
)
{
this
.
$refs
.
uToast
.
show
({
this
.
$refs
.
uToast
.
show
({
type
:
'
error
'
,
type
:
"
error
"
,
title
:
'
请开始并暂停后才能继续
'
title
:
"
请开始并暂停后才能继续
"
})
});
this
.
$nextTick
(()
=>
{
this
.
$nextTick
(()
=>
{
this
.
current
=
3
;
this
.
current
=
3
;
})
});
return
;
return
;
}
}
this
.
$refs
.
uCountTo
.
resume
();
this
.
$refs
.
uCountTo
.
resume
();
},
},
...
...
pages/componentsC/gap/index.vue
View file @
2bfded3d
<!--
* @Desc: --- ----
* @Date: 2020-04-22 12:29:21
* @LastEditors: 王
* @LastEditTime: 2020-04-22 18:33:28
-->
<
template
>
<
template
>
<view
class=
"u-demo"
>
<view
class=
"u-demo"
>
<view
class=
"u-demo-wrap"
>
<view
class=
"u-demo-wrap"
>
<view
class=
"u-demo-title"
>
演示效果
</view>
<view
class=
"u-demo-title"
>
演示效果
</view>
<view
class=
"u-demo-area"
>
<view
class=
"u-demo-area"
>
<u-gap
:bg-color=
"bgColor"
:height=
"height
"
></u-gap>
<u-gap
:bg-color=
"bgColor"
:height=
"height"
:margin=
"margin
"
></u-gap>
</view>
</view>
</view>
</view>
<view
class=
"u-config-wrap"
>
<view
class=
"u-config-wrap"
>
<view
class=
"u-config-title u-border-bottom"
>
<view
class=
"u-config-title u-border-bottom"
>
参数配置
</view>
参数配置
</view>
<view
class=
"u-config-item"
>
<view
class=
"u-config-item"
>
<view
class=
"u-item-title"
>
背景颜色
</view>
<view
class=
"u-item-title"
>
背景颜色
</view>
<u-subsection
vibrateShort
:list=
"['default', 'primary', 'error', 'warning', 'success']"
@
change=
"bgColorChange"
></u-subsection>
<u-subsection
vibrateShort
:list=
"['default', 'primary', 'error', 'warning', 'success']"
@
change=
"bgColorChange"
></u-subsection>
</view>
</view>
<view
class=
"u-config-item"
>
<view
class=
"u-config-item"
>
<view
class=
"u-item-title"
>
高度
</view>
<view
class=
"u-item-title"
>
高度
</view>
<u-subsection
vibrateShort
:list=
"['30', '50', '70']"
@
change=
"heightChange"
></u-subsection>
<u-subsection
vibrateShort
:list=
"['30', '50', '70']"
@
change=
"heightChange"
></u-subsection>
</view>
</view>
<view
class=
"u-config-item"
>
<view
class=
"u-item-title"
>
上下外边距
</view>
<u-subsection
vibrateShort
:list=
"['30', '50', '70']"
@
change=
"marginChange"
></u-subsection>
</view>
</view>
</view>
</view>
</view>
</
template
>
</
template
>
<
script
>
<
script
>
export
default
{
export
default
{
data
()
{
data
()
{
return
{
return
{
height
:
30
,
height
:
30
,
margin
:
0
,
bgColor
:
this
.
$u
.
color
.
bgColor
bgColor
:
this
.
$u
.
color
.
bgColor
}
};
},
},
methods
:
{
methods
:
{
bgColorChange
(
index
)
{
bgColorChange
(
index
)
{
let
color
=
index
==
0
?
'
default
'
:
index
==
1
?
'
primary
'
:
index
==
2
?
'
error
'
:
index
==
3
?
'
warning
'
:
'
success
'
;
let
color
=
this
.
bgColor
=
color
==
'
default
'
?
this
.
$u
.
color
[
'
bgColor
'
]
:
this
.
$u
.
color
[
color
];
index
==
0
?
"
default
"
:
index
==
1
?
"
primary
"
:
index
==
2
?
"
error
"
:
index
==
3
?
"
warning
"
:
"
success
"
;
this
.
bgColor
=
color
==
"
default
"
?
this
.
$u
.
color
[
"
bgColor
"
]
:
this
.
$u
.
color
[
color
];
},
},
heightChange
(
index
)
{
heightChange
(
index
)
{
this
.
height
=
index
==
0
?
30
:
index
==
1
?
50
:
70
;
this
.
height
=
index
==
0
?
30
:
index
==
1
?
50
:
70
;
},
marginChange
(
index
)
{
this
.
margin
=
index
==
0
?
30
:
index
==
1
?
50
:
70
;
}
}
}
}
}
};
</
script
>
</
script
>
<
style
lang=
"scss"
scoped
>
<
style
lang=
"scss"
scoped
>
.wrap
{
.wrap
{
padding
:
24rpx
;
padding
:
24rpx
;
}
}
</
style
>
</
style
>
uview/components/u-count-to/u-count-to.vue
View file @
2bfded3d
<
template
>
<
template
>
<view
class=
"u-count-num"
:style=
"
{
<view
class=
"u-count-num"
:style=
"
{
fontSize: fontSize + 'rpx',
fontSize: fontSize + 'rpx',
fontWeight:fontWeight,
color: color
color: color
}">
}"
{{
displayValue
}}
>
{{
displayValue
}}
</view>
</view>
</
template
>
</
template
>
<
script
>
<
script
>
...
@@ -44,23 +46,28 @@ export default {
...
@@ -44,23 +46,28 @@ export default {
// 十进制分割
// 十进制分割
decimal
:
{
decimal
:
{
type
:
[
Number
,
String
],
type
:
[
Number
,
String
],
default
:
'
.
'
default
:
"
.
"
},
},
// 字体颜色
// 字体颜色
color
:
{
color
:
{
type
:
String
,
type
:
String
,
default
:
'
#303133
'
default
:
"
#303133
"
},
},
// 字体大小
// 字体大小
fontSize
:
{
fontSize
:
{
type
:
[
Number
,
String
],
type
:
[
Number
,
String
],
default
:
50
default
:
50
},
},
// 字体粗细
fontWeight
:
{
type
:
[
Number
,
String
],
default
:
400
},
// 千位分隔符,类似金额的分割(¥23,321.05中的",")
// 千位分隔符,类似金额的分割(¥23,321.05中的",")
separator
:
{
separator
:
{
type
:
String
,
type
:
String
,
default
:
''
default
:
""
},
}
},
},
data
()
{
data
()
{
return
{
return
{
...
@@ -152,27 +159,47 @@ export default {
...
@@ -152,27 +159,47 @@ export default {
this
.
remaining
=
this
.
localDuration
-
progress
;
this
.
remaining
=
this
.
localDuration
-
progress
;
if
(
this
.
useEasing
)
{
if
(
this
.
useEasing
)
{
if
(
this
.
countDown
)
{
if
(
this
.
countDown
)
{
this
.
printVal
=
this
.
localStartVal
-
this
.
easingFn
(
progress
,
0
,
this
.
localStartVal
-
this
.
endVal
,
this
.
localDuration
);
this
.
printVal
=
this
.
localStartVal
-
this
.
easingFn
(
progress
,
0
,
this
.
localStartVal
-
this
.
endVal
,
this
.
localDuration
);
}
else
{
}
else
{
this
.
printVal
=
this
.
easingFn
(
progress
,
this
.
localStartVal
,
this
.
endVal
-
this
.
localStartVal
,
this
.
localDuration
);
this
.
printVal
=
this
.
easingFn
(
progress
,
this
.
localStartVal
,
this
.
endVal
-
this
.
localStartVal
,
this
.
localDuration
);
}
}
}
else
{
}
else
{
if
(
this
.
countDown
)
{
if
(
this
.
countDown
)
{
this
.
printVal
=
this
.
localStartVal
-
(
this
.
localStartVal
-
this
.
endVal
)
*
(
progress
/
this
.
localDuration
);
this
.
printVal
=
this
.
localStartVal
-
(
this
.
localStartVal
-
this
.
endVal
)
*
(
progress
/
this
.
localDuration
);
}
else
{
}
else
{
this
.
printVal
=
this
.
localStartVal
+
(
this
.
endVal
-
this
.
localStartVal
)
*
(
progress
/
this
.
localDuration
);
this
.
printVal
=
this
.
localStartVal
+
(
this
.
endVal
-
this
.
localStartVal
)
*
(
progress
/
this
.
localDuration
);
}
}
}
}
if
(
this
.
countDown
)
{
if
(
this
.
countDown
)
{
this
.
printVal
=
this
.
printVal
<
this
.
endVal
?
this
.
endVal
:
this
.
printVal
;
this
.
printVal
=
this
.
printVal
<
this
.
endVal
?
this
.
endVal
:
this
.
printVal
;
}
else
{
}
else
{
this
.
printVal
=
this
.
printVal
>
this
.
endVal
?
this
.
endVal
:
this
.
printVal
;
this
.
printVal
=
this
.
printVal
>
this
.
endVal
?
this
.
endVal
:
this
.
printVal
;
}
}
this
.
displayValue
=
this
.
formatNumber
(
this
.
printVal
);
this
.
displayValue
=
this
.
formatNumber
(
this
.
printVal
);
if
(
progress
<
this
.
localDuration
)
{
if
(
progress
<
this
.
localDuration
)
{
this
.
rAF
=
this
.
requestAnimationFrame
(
this
.
count
);
this
.
rAF
=
this
.
requestAnimationFrame
(
this
.
count
);
}
else
{
}
else
{
this
.
$emit
(
'
end
'
);
this
.
$emit
(
"
end
"
);
}
}
},
},
// 判断是否数字
// 判断是否数字
...
@@ -181,14 +208,14 @@ export default {
...
@@ -181,14 +208,14 @@ export default {
},
},
formatNumber
(
num
)
{
formatNumber
(
num
)
{
num
=
num
.
toFixed
(
Number
(
this
.
decimals
));
num
=
num
.
toFixed
(
Number
(
this
.
decimals
));
num
+=
''
;
num
+=
""
;
const
x
=
num
.
split
(
'
.
'
);
const
x
=
num
.
split
(
"
.
"
);
let
x1
=
x
[
0
];
let
x1
=
x
[
0
];
const
x2
=
x
.
length
>
1
?
this
.
decimal
+
x
[
1
]
:
''
;
const
x2
=
x
.
length
>
1
?
this
.
decimal
+
x
[
1
]
:
""
;
const
rgx
=
/
(\d
+
)(\d{3})
/
;
const
rgx
=
/
(\d
+
)(\d{3})
/
;
if
(
this
.
separator
&&
!
this
.
isNumber
(
this
.
separator
))
{
if
(
this
.
separator
&&
!
this
.
isNumber
(
this
.
separator
))
{
while
(
rgx
.
test
(
x1
))
{
while
(
rgx
.
test
(
x1
))
{
x1
=
x1
.
replace
(
rgx
,
'
$1
'
+
this
.
separator
+
'
$2
'
);
x1
=
x1
.
replace
(
rgx
,
"
$1
"
+
this
.
separator
+
"
$2
"
);
}
}
}
}
return
x1
+
x2
;
return
x1
+
x2
;
...
...
uview/components/u-gap/u-gap.vue
View file @
2bfded3d
<!--
* @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
class=
"u-gap"
:style=
"[gapStyle]"
></view>
</view>
</
template
>
</
template
>
<
script
>
<
script
>
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
:
{
type
:
[
String
,
Number
],
type
:
[
String
,
Number
],
default
:
30
default
:
30
},
margin
:
{
type
:
[
String
,
Number
],
default
:
0
}
}
},
},
computed
:
{
computed
:
{
gapStyle
()
{
gapStyle
()
{
return
{
return
{
backgroundColor
:
this
.
bgColor
,
backgroundColor
:
this
.
bgColor
,
height
:
this
.
height
+
'
rpx
'
height
:
this
.
height
+
"
rpx
"
,
}
marginTop
:
this
.
margin
+
"
rpx
"
,
}
marginBttom
:
this
.
margin
+
"
rpx
"
};
}
}
}
}
};
</
script
>
</
script
>
<
style
>
<
style
>
...
...
uview/components/u-search/u-search.vue
View file @
2bfded3d
<
template
>
<
template
>
<view
class=
"u-search"
>
<view
class=
"u-search"
>
<view
class=
"u-content"
:style=
"
{
<view
class=
"u-content"
:style=
"
{
backgroundColor: bgColor,
backgroundColor: bgColor,
borderRadius: shape == 'round' ? '100rpx' : '10rpx',
borderRadius: shape == 'round' ? '100rpx' : '10rpx',
border: borderStyle,
border: borderStyle,
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>
<u-icon
class=
"u-clear-icon"
:size=
"30"
name=
"search"
color=
"#909399"
></u-icon>
</view>
</view>
<input
confirm-type=
"search"
@
blur=
"blur"
:value=
"value"
@
confirm=
"search"
@
input=
"inputChange"
:disabled=
"disabled"
@
focus=
"getFocus"
:focus=
"focus"
<input
placeholder-class=
"u-placeholder-class"
:placeholder=
"placeholder"
class=
"u-input"
type=
"text"
:style=
"
{
confirm-type=
"search"
@
blur=
"blur"
:value=
"value"
@
confirm=
"search"
@
input=
"inputChange"
:disabled=
"disabled"
@
focus=
"getFocus"
:focus=
"focus"
placeholder-class=
"u-placeholder-class"
:placeholder=
"placeholder"
class=
"u-input"
type=
"text"
:style=
"
{
textAlign: inputAlign
textAlign: inputAlign
}" />
}"
/>
<view
class=
"u-close-wrap"
v-if=
"keyword && clearabled && focused"
@
touchstart=
"clear"
>
<view
class=
"u-close-wrap"
v-if=
"keyword && clearabled && focused"
@
touchstart=
"clear"
>
<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
:style=
"[actionStyle]"
class=
"u-action"
:class=
"[showActionBtn || show ? 'u-action-active' : '']"
@
tap=
"custom"
>
<view
{{
actiontext
}}
:style=
"[actionStyle]"
</view>
class=
"u-action"
:class=
"[showActionBtn || show ? 'u-action-active' : '']"
@
tap=
"custom"
>
{{
actionText
}}
</view>
</view>
</view>
</
template
>
</
template
>
<
script
>
<
script
>
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
:
{
...
@@ -60,18 +79,18 @@
...
@@ -60,18 +79,18 @@
actionStyle
:
{
actionStyle
:
{
type
:
Object
,
type
:
Object
,
default
()
{
default
()
{
return
{}
return
{};
}
}
},
},
// 取消按钮文字
// 取消按钮文字
actiont
ext
:
{
actionT
ext
:
{
type
:
String
,
type
:
String
,
default
:
'
搜索
'
default
:
"
搜索
"
},
},
// 输入框内容对齐方式,可选值为 left|center|right
// 输入框内容对齐方式,可选值为 left|center|right
inputAlign
:
{
inputAlign
:
{
type
:
String
,
type
:
String
,
default
:
'
left
'
default
:
"
left
"
},
},
// 是否启用输入框
// 是否启用输入框
disabled
:
{
disabled
:
{
...
@@ -86,12 +105,12 @@
...
@@ -86,12 +105,12 @@
// 边框颜色,只要配置了颜色,才会有边框
// 边框颜色,只要配置了颜色,才会有边框
borderColor
:
{
borderColor
:
{
type
:
String
,
type
:
String
,
default
:
'
none
'
default
:
"
none
"
},
},
// 输入框的初始化内容
// 输入框的初始化内容
value
:
{
value
:
{
type
:
String
,
type
:
String
,
default
:
''
default
:
""
},
},
// 搜索框高度,单位rpx
// 搜索框高度,单位rpx
height
:
{
height
:
{
...
@@ -101,21 +120,21 @@
...
@@ -101,21 +120,21 @@
},
},
data
()
{
data
()
{
return
{
return
{
keyword
:
''
,
keyword
:
""
,
showClear
:
false
,
// 是否显示右边的清除图标
showClear
:
false
,
// 是否显示右边的清除图标
show
:
false
,
show
:
false
,
// 标记input当前状态是否处于聚焦中,如果是,才会显示右侧的清除控件
// 标记input当前状态是否处于聚焦中,如果是,才会显示右侧的清除控件
focused
:
this
.
focus
,
focused
:
this
.
focus
// 绑定输入框的值
// 绑定输入框的值
// inputValue: this.value
// inputValue: this.value
}
};
},
},
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
,
...
@@ -131,8 +150,8 @@
...
@@ -131,8 +150,8 @@
},
},
// 样式,根据用户传入的颜色值生成,如果不传入,默认为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
:
{
...
@@ -143,17 +162,17 @@
...
@@ -143,17 +162,17 @@
// 清空输入
// 清空输入
// 也可以作为用户通过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
();
},
},
...
@@ -169,37 +188,37 @@
...
@@ -169,37 +188,37 @@
this
.
show
=
false
;
this
.
show
=
false
;
}
}
}
}
}
};
</
script
>
</
script
>
<
style
lang=
"scss"
scoped
>
<
style
lang=
"scss"
scoped
>
.u-search
{
.u-search
{
display
:
flex
;
display
:
flex
;
align-items
:
center
;
align-items
:
center
;
flex
:
1
;
flex
:
1
;
}
}
.u-content
{
.u-content
{
display
:
flex
;
display
:
flex
;
align-items
:
center
;
align-items
:
center
;
padding
:
0
18rpx
;
padding
:
0
18rpx
;
flex
:
1
;
flex
:
1
;
}
}
.u-clear-icon
{
.u-clear-icon
{
display
:
flex
;
display
:
flex
;
align-items
:
center
;
align-items
:
center
;
}
}
.u-input
{
.u-input
{
flex
:
1
;
flex
:
1
;
font-size
:
28rpx
;
font-size
:
28rpx
;
line-height
:
1
;
line-height
:
1
;
margin
:
0
10rpx
;
margin
:
0
10rpx
;
color
:
$u-tips-color
;
color
:
$u-tips-color
;
}
}
.u-close-wrap
{
.u-close-wrap
{
width
:
34rpx
;
width
:
34rpx
;
height
:
34rpx
;
height
:
34rpx
;
display
:
flex
;
display
:
flex
;
...
@@ -207,13 +226,13 @@
...
@@ -207,13 +226,13 @@
justify-content
:
center
;
justify-content
:
center
;
background-color
:
rgb
(
200
,
203
,
204
);
background-color
:
rgb
(
200
,
203
,
204
);
border-radius
:
50%
;
border-radius
:
50%
;
}
}
.u-placeholder-class
{
.u-placeholder-class
{
color
:
$u-tips-color
;
color
:
$u-tips-color
;
}
}
.u-action
{
.u-action
{
font-size
:
28rpx
;
font-size
:
28rpx
;
color
:
$u-main-color
;
color
:
$u-main-color
;
width
:
0
;
width
:
0
;
...
@@ -221,10 +240,10 @@
...
@@ -221,10 +240,10 @@
transition
:
all
0
.3s
;
transition
:
all
0
.3s
;
white-space
:
nowrap
;
white-space
:
nowrap
;
text-align
:
center
;
text-align
:
center
;
}
}
.u-action-active
{
.u-action-active
{
width
:
80rpx
;
width
:
80rpx
;
margin-left
:
10rpx
;
margin-left
:
10rpx
;
}
}
</
style
>
</
style
>
uview/index.js
View file @
2bfded3d
// 引入全局mixin
// 引入全局mixin
import
mixin
from
'
@/uview/libs/mixin/mixin.js
'
import
mixin
from
'
@/uview/libs/mixin/mixin.js
'
import
wxshare
from
'
@/uview/libs/mixin/wxshare.js
'
// 全局挂载引入http相关请求拦截插件
// 全局挂载引入http相关请求拦截插件
import
http
from
"
@/uview/libs/request
"
;
import
http
from
'
@/uview/libs/request
'
function
wranning
(
str
)
{
function
wranning
(
str
)
{
// 开发环境进行信息输出,主要是一些报错信息
// 开发环境进行信息输出,主要是一些报错信息
// 这个环境的来由是在程序编写时候,点击hx编辑器运行调试代码的时候,详见:
// 这个环境的来由是在程序编写时候,点击hx编辑器运行调试代码的时候,详见:
// https://uniapp.dcloud.io/frame?id=%e5%bc%80%e5%8f%91%e7%8e%af%e5%a2%83%e5%92%8c%e7%94%9f%e4%ba%a7%e7%8e%af%e5%a2%83
// https://uniapp.dcloud.io/frame?id=%e5%bc%80%e5%8f%91%e7%8e%af%e5%a2%83%e5%92%8c%e7%94%9f%e4%ba%a7%e7%8e%af%e5%a2%83
if
(
process
.
env
.
NODE_ENV
===
'
development
'
)
{
if
(
process
.
env
.
NODE_ENV
===
'
development
'
)
{
console
.
warn
(
str
);
console
.
warn
(
str
)
}
}
}
}
...
@@ -23,63 +23,41 @@ function wranning(str) {
...
@@ -23,63 +23,41 @@ function wranning(str) {
// }
// }
// post类型对象参数转为get类型url参数
// post类型对象参数转为get类型url参数
import
{
import
{
queryParams
}
from
'
@/uview/libs/function/queryParams.js
'
queryParams
}
from
'
@/uview/libs/function/queryParams.js
'
;
// 路由封装
// 路由封装
import
{
import
{
route
}
from
'
@/uview/libs/function/route.js
'
route
}
from
'
@/uview/libs/function/route.js
'
;
// 时间格式化
// 时间格式化
import
{
import
{
timeFormat
}
from
'
@/uview/libs/function/timeFormat.js
'
timeFormat
}
from
'
@/uview/libs/function/timeFormat.js
'
;
// 时间戳格式化,返回多久之前
// 时间戳格式化,返回多久之前
import
{
import
{
timeFrom
}
from
'
@/uview/libs/function/timeFrom.js
'
timeFrom
}
from
'
@/uview/libs/function/timeFrom.js
'
;
// 颜色渐变相关,colorGradient-颜色渐变,hexToRgb-十六进制颜色转rgb颜色,rgbToHex-rgb转十六进制
// 颜色渐变相关,colorGradient-颜色渐变,hexToRgb-十六进制颜色转rgb颜色,rgbToHex-rgb转十六进制
import
{
import
{
colorGradient
,
colorGradient
,
hexToRgb
,
hexToRgb
,
rgbToHex
rgbToHex
}
from
'
@/uview/libs/function/colorGradient.js
'
;
}
from
'
@/uview/libs/function/colorGradient.js
'
// 生成全局唯一guid字符串
// 生成全局唯一guid字符串
import
{
import
{
guid
}
from
'
@/uview/libs/function/guid.js
'
guid
}
from
'
@/uview/libs/function/guid.js
'
;
// 主题相关颜色,info|success|warning|primary|default|error,此颜色已在uview.scss中定义,但是为js中也能使用,故也定义一份
// 主题相关颜色,info|success|warning|primary|default|error,此颜色已在uview.scss中定义,但是为js中也能使用,故也定义一份
import
{
import
{
color
}
from
'
@/uview/libs/function/color.js
'
color
}
from
'
@/uview/libs/function/color.js
'
;
// 根据type获取图标名称
// 根据type获取图标名称
import
{
import
{
type2icon
}
from
'
@/uview/libs/function/type2icon.js
'
type2icon
}
from
'
@/uview/libs/function/type2icon.js
'
;
// 打乱数组的顺序
// 打乱数组的顺序
import
{
import
{
randomArray
}
from
'
@/uview/libs/function/randomArray.js
'
randomArray
}
from
"
@/uview/libs/function/randomArray.js
"
;
// 规则检验
// 规则检验
import
test
from
"
@/uview/libs/function/test.js
"
;
import
test
from
'
@/uview/libs/function/test.js
'
// 随机数
// 随机数
import
{
import
{
random
}
from
'
@/uview/libs/function/random.js
'
random
}
from
"
@/uview/libs/function/random.js
"
;
// 去除空格
// 去除空格
import
{
import
{
trim
}
from
'
@/uview/libs/function/trim.js
'
trim
}
from
"
@/uview/libs/function/trim.js
"
;
// toast提示,对uni.showToast的封装
// toast提示,对uni.showToast的封装
import
{
import
{
toast
}
from
'
@/uview/libs/function/toast.js
'
toast
}
from
"
@/uview/libs/function/toast.js
"
;
// 配置信息
// 配置信息
import
config
from
"
@/uview/libs/config/config.js
"
;
import
config
from
'
@/uview/libs/config/config.js
'
// 各个需要fixed的地方的z-index配置文件
// 各个需要fixed的地方的z-index配置文件
import
zIndex
from
"
@/uview/libs/config/zIndex.js
"
;
import
zIndex
from
'
@/uview/libs/config/zIndex.js
'
const
$u
=
{
const
$u
=
{
queryParams
,
queryParams
,
...
@@ -104,24 +82,28 @@ const $u = {
...
@@ -104,24 +82,28 @@ const $u = {
http
,
http
,
toast
,
toast
,
config
,
// uView配置信息相关,比如版本号
config
,
// uView配置信息相关,比如版本号
zIndex
,
zIndex
}
}
const
install
=
(
Vue
)
=>
{
const
install
=
Vue
=>
{
Vue
.
mixin
(
mixin
);
Vue
.
mixin
(
mixin
)
console
.
log
(
Vue
.
prototype
.
openShare
)
if
(
Vue
.
prototype
.
openShare
)
{
Vue
.
mixin
(
wxshare
)
}
// Vue.mixin(vuexStore);
// Vue.mixin(vuexStore);
// 时间格式化,同时两个名称,date和timeFormat
// 时间格式化,同时两个名称,date和timeFormat
Vue
.
filter
(
'
timeFormat
'
,
(
timestamp
,
format
)
=>
{
Vue
.
filter
(
'
timeFormat
'
,
(
timestamp
,
format
)
=>
{
return
timeFormat
(
timestamp
,
format
);
return
timeFormat
(
timestamp
,
format
)
})
})
Vue
.
filter
(
'
date
'
,
(
timestamp
,
format
)
=>
{
Vue
.
filter
(
'
date
'
,
(
timestamp
,
format
)
=>
{
return
timeFormat
(
timestamp
,
format
);
return
timeFormat
(
timestamp
,
format
)
})
})
// 将多久以前的方法,注入到全局过滤器
// 将多久以前的方法,注入到全局过滤器
Vue
.
filter
(
'
timeFrom
'
,
(
timestamp
,
format
)
=>
{
Vue
.
filter
(
'
timeFrom
'
,
(
timestamp
,
format
)
=>
{
return
timeFrom
(
timestamp
,
format
);
return
timeFrom
(
timestamp
,
format
)
})
})
Vue
.
prototype
.
$u
=
$u
;
Vue
.
prototype
.
$u
=
$u
}
}
export
default
{
export
default
{
...
...
uview/libs/mixin/mixin.js
View file @
2bfded3d
module
.
exports
=
{
module
.
exports
=
{
data
()
{
data
()
{
return
{}
return
{}
},
},
onLoad
()
{
// getRect挂载到$u上,因为这方法需要使用in(this),所以无法把它独立成一个单独的文件导出
this
.
$u
.
getRect
=
this
.
$uGetRect
;
// 设置默认的转发参数
this
.
$u
.
mpShare
=
{
title
:
''
,
// 默认为小程序名称
path
:
''
,
// 默认为当前页面路径
imageUrl
:
''
// 默认为当前页面的截图
};
},
onShareAppMessage
()
{
return
this
.
$u
.
mpShare
;
},
methods
:
{
methods
:
{
// 查询节点信息
// 查询节点信息
$uGetRect
(
selector
,
all
)
{
$uGetRect
(
selector
,
all
)
{
return
new
Promise
(
resolve
=>
{
return
new
Promise
(
resolve
=>
{
uni
.
createSelectorQuery
()
uni
.
in
(
this
)[
all
?
'
selectAll
'
:
'
select
'
](
selector
)
.
createSelectorQuery
()
.
in
(
this
)
[
all
?
'
selectAll
'
:
'
select
'
](
selector
)
.
boundingClientRect
(
rect
=>
{
.
boundingClientRect
(
rect
=>
{
if
(
all
&&
Array
.
isArray
(
rect
)
&&
rect
.
length
)
{
if
(
all
&&
Array
.
isArray
(
rect
)
&&
rect
.
length
)
{
resolve
(
rect
);
resolve
(
rect
)
}
}
if
(
!
all
&&
rect
)
{
if
(
!
all
&&
rect
)
{
resolve
(
rect
);
resolve
(
rect
)
}
}
})
})
.
exec
();
.
exec
()
});
})
},
}
},
},
onReachBottom
()
{
onReachBottom
()
{
uni
.
$emit
(
'
uOnReachBottom
'
);
uni
.
$emit
(
'
uOnReachBottom
'
)
}
}
}
}
uview/libs/mixin/wxshare.js
0 → 100644
View file @
2bfded3d
module
.
exports
=
{
onLoad
()
{
// getRect挂载到$u上,因为这方法需要使用in(this),所以无法把它独立成一个单独的文件导出
this
.
$u
.
getRect
=
this
.
$uGetRect
// 设置默认的转发参数
this
.
$u
.
mpShare
=
{
title
:
''
,
// 默认为小程序名称
path
:
''
,
// 默认为当前页面路径
imageUrl
:
''
// 默认为当前页面的截图
}
},
onShareAppMessage
()
{
return
this
.
$u
.
mpShare
}
}
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