uview-plus 3.3.12 → 3.3.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/changelog.md +13 -0
- package/components/u-box/props.js +27 -0
- package/components/u-box/u-box.vue +92 -0
- package/components/u-card/props.js +140 -0
- package/components/u-card/u-card.vue +186 -0
- package/components/u-grid/u-grid.vue +2 -2
- package/components/u-grid-item/u-grid-item.vue +7 -20
- package/components/u-input/u-input.vue +7 -0
- package/components/u-navbar-mini/props.js +51 -0
- package/components/u-navbar-mini/u-navbar-mini.vue +148 -0
- package/package.json +1 -1
package/changelog.md
CHANGED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { defineMixin } from '../../libs/vue'
|
|
2
|
+
import defProps from '../../libs/config/props.js'
|
|
3
|
+
|
|
4
|
+
export const propsBox = defineMixin({
|
|
5
|
+
props: {
|
|
6
|
+
// 背景色
|
|
7
|
+
bgColors: {
|
|
8
|
+
type: [Array],
|
|
9
|
+
default: ['#EEFCFF', '#FCF8FF', '#FDF8F2']
|
|
10
|
+
},
|
|
11
|
+
// 高度
|
|
12
|
+
height: {
|
|
13
|
+
type: [String],
|
|
14
|
+
default: "160px"
|
|
15
|
+
},
|
|
16
|
+
// 圆角
|
|
17
|
+
borderRadius: {
|
|
18
|
+
type: [String],
|
|
19
|
+
default: "6px"
|
|
20
|
+
},
|
|
21
|
+
// 间隔
|
|
22
|
+
gap: {
|
|
23
|
+
type: [String],
|
|
24
|
+
default: "15px"
|
|
25
|
+
},
|
|
26
|
+
}
|
|
27
|
+
})
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<view class="u-box" :style="[{height: height}, addStyle(customStyle)]">
|
|
3
|
+
<view class="u-box__left" :style="{borderRadius: borderRadius, backgroundColor: bgColors[0]}">
|
|
4
|
+
<slot name="left">左</slot>
|
|
5
|
+
</view>
|
|
6
|
+
<view class="u-box__gap" :style="{width: gap, height: height}"></view>
|
|
7
|
+
<view class="u-box__right">
|
|
8
|
+
<view class="u-box__right-top" :style="{borderRadius: borderRadius, backgroundColor: bgColors[1]}">
|
|
9
|
+
<slot name="rightTop">右上</slot>
|
|
10
|
+
</view>
|
|
11
|
+
<view class="u-box__right-gap" :style="{height: gap}"></view>
|
|
12
|
+
<view class="u-box__right-bottom" :style="{borderRadius: borderRadius, backgroundColor: bgColors[2]}">
|
|
13
|
+
<slot name="rightBottom">右下</slot>
|
|
14
|
+
</view>
|
|
15
|
+
</view>
|
|
16
|
+
</view>
|
|
17
|
+
</template>
|
|
18
|
+
|
|
19
|
+
<script>
|
|
20
|
+
import { propsBox } from './props';
|
|
21
|
+
import { mpMixin } from '../../libs/mixin/mpMixin';
|
|
22
|
+
import { mixin } from '../../libs/mixin/mixin';
|
|
23
|
+
import { addStyle } from '../../libs/function/index';
|
|
24
|
+
import test from '../../libs/function/test';
|
|
25
|
+
/**
|
|
26
|
+
* box 盒子
|
|
27
|
+
* @description box盒子一般为左边一个盒子，右侧两个等高的半盒组成，常用于App首页座位重点突出。
|
|
28
|
+
* @tutorial https://uview-plus.jiangruyi.com/components/box.html
|
|
29
|
+
* @property {Array} bgColors 背景色
|
|
30
|
+
* @property {String} height 高度
|
|
31
|
+
* @property {String} borderRadius 圆角
|
|
32
|
+
* @property {Object} customStyle 定义需要用到的外部样式
|
|
33
|
+
*
|
|
34
|
+
* @event {Function} click 点击cell列表时触发
|
|
35
|
+
* @example <up-box colors=['blue', 'red', 'yellow'] height="200px"></up-box>
|
|
36
|
+
*/
|
|
37
|
+
export default {
|
|
38
|
+
name: 'up-box',
|
|
39
|
+
data() {
|
|
40
|
+
return {
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
mixins: [mpMixin, mixin, propsBox],
|
|
44
|
+
computed: {
|
|
45
|
+
},
|
|
46
|
+
emits: [],
|
|
47
|
+
methods: {
|
|
48
|
+
addStyle,
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
</script>
|
|
52
|
+
|
|
53
|
+
<style lang="scss" scoped>
|
|
54
|
+
@import "../../libs/css/components.scss";
|
|
55
|
+
|
|
56
|
+
.u-box {
|
|
57
|
+
/* #ifndef APP-NVUE */
|
|
58
|
+
/* #endif */
|
|
59
|
+
@include flex();
|
|
60
|
+
flex: 1;
|
|
61
|
+
|
|
62
|
+
&__left {
|
|
63
|
+
@include flex();
|
|
64
|
+
justify-content: center;
|
|
65
|
+
align-items: center;
|
|
66
|
+
flex: 1;
|
|
67
|
+
}
|
|
68
|
+
&__gap {
|
|
69
|
+
@include flex();
|
|
70
|
+
flex-direction: column;
|
|
71
|
+
}
|
|
72
|
+
&__right {
|
|
73
|
+
@include flex();
|
|
74
|
+
flex-direction: column;
|
|
75
|
+
flex: 1;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
&__right-top {
|
|
79
|
+
@include flex();
|
|
80
|
+
flex: 1;
|
|
81
|
+
justify-content: center;
|
|
82
|
+
align-items: center;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
&__right-bottom {
|
|
86
|
+
@include flex();
|
|
87
|
+
flex: 1;
|
|
88
|
+
justify-content: center;
|
|
89
|
+
align-items: center;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
</style>
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
import { defineMixin } from '../../libs/vue'
|
|
2
|
+
import defProps from '../../libs/config/props.js'
|
|
3
|
+
|
|
4
|
+
export const propsCard = defineMixin({
|
|
5
|
+
props: {
|
|
6
|
+
// 与屏幕两侧是否留空隙
|
|
7
|
+
full: {
|
|
8
|
+
type: Boolean,
|
|
9
|
+
default: false
|
|
10
|
+
},
|
|
11
|
+
// 标题
|
|
12
|
+
title: {
|
|
13
|
+
type: String,
|
|
14
|
+
default: ''
|
|
15
|
+
},
|
|
16
|
+
// 标题颜色
|
|
17
|
+
titleColor: {
|
|
18
|
+
type: String,
|
|
19
|
+
default: '#303133'
|
|
20
|
+
},
|
|
21
|
+
// 标题字体大小
|
|
22
|
+
titleSize: {
|
|
23
|
+
type: [Number, String],
|
|
24
|
+
default: '15px'
|
|
25
|
+
},
|
|
26
|
+
// 副标题
|
|
27
|
+
subTitle: {
|
|
28
|
+
type: String,
|
|
29
|
+
default: ''
|
|
30
|
+
},
|
|
31
|
+
// 副标题颜色
|
|
32
|
+
subTitleColor: {
|
|
33
|
+
type: String,
|
|
34
|
+
default: '#909399'
|
|
35
|
+
},
|
|
36
|
+
// 副标题字体大小
|
|
37
|
+
subTitleSize: {
|
|
38
|
+
type: [Number, String],
|
|
39
|
+
default: '13'
|
|
40
|
+
},
|
|
41
|
+
// 是否显示外部边框，只对full=false时有效(卡片与边框有空隙时)
|
|
42
|
+
border: {
|
|
43
|
+
type: Boolean,
|
|
44
|
+
default: true
|
|
45
|
+
},
|
|
46
|
+
// 用于标识点击了第几个
|
|
47
|
+
index: {
|
|
48
|
+
type: [Number, String, Object],
|
|
49
|
+
default: ''
|
|
50
|
+
},
|
|
51
|
+
// 用于隔开上下左右的边距，带单位的写法，如："30px 30px"，"20px 20px 30px 30px"
|
|
52
|
+
margin: {
|
|
53
|
+
type: String,
|
|
54
|
+
default: '15px'
|
|
55
|
+
},
|
|
56
|
+
// card卡片的圆角
|
|
57
|
+
borderRadius: {
|
|
58
|
+
type: [Number, String],
|
|
59
|
+
default: '8px'
|
|
60
|
+
},
|
|
61
|
+
// 头部自定义样式，对象形式
|
|
62
|
+
headStyle: {
|
|
63
|
+
type: Object,
|
|
64
|
+
default() {
|
|
65
|
+
return {};
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
// 主体自定义样式，对象形式
|
|
69
|
+
bodyStyle: {
|
|
70
|
+
type: Object,
|
|
71
|
+
default() {
|
|
72
|
+
return {};
|
|
73
|
+
}
|
|
74
|
+
},
|
|
75
|
+
// 底部自定义样式，对象形式
|
|
76
|
+
footStyle: {
|
|
77
|
+
type: Object,
|
|
78
|
+
default() {
|
|
79
|
+
return {};
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
// 头部是否下边框
|
|
83
|
+
headBorderBottom: {
|
|
84
|
+
type: Boolean,
|
|
85
|
+
default: true
|
|
86
|
+
},
|
|
87
|
+
// 底部是否有上边框
|
|
88
|
+
footBorderTop: {
|
|
89
|
+
type: Boolean,
|
|
90
|
+
default: true
|
|
91
|
+
},
|
|
92
|
+
// 标题左边的缩略图
|
|
93
|
+
thumb: {
|
|
94
|
+
type: String,
|
|
95
|
+
default: ''
|
|
96
|
+
},
|
|
97
|
+
// 缩略图宽高
|
|
98
|
+
thumbWidth: {
|
|
99
|
+
type: [String, Number],
|
|
100
|
+
default: '30px'
|
|
101
|
+
},
|
|
102
|
+
// 缩略图是否为圆形
|
|
103
|
+
thumbCircle: {
|
|
104
|
+
type: Boolean,
|
|
105
|
+
default: false
|
|
106
|
+
},
|
|
107
|
+
// 给head，body，foot的内边距
|
|
108
|
+
padding: {
|
|
109
|
+
type: [String, Number],
|
|
110
|
+
default: '15px'
|
|
111
|
+
},
|
|
112
|
+
paddingHead: {
|
|
113
|
+
type: [String, Number],
|
|
114
|
+
default: ''
|
|
115
|
+
},
|
|
116
|
+
paddingBody: {
|
|
117
|
+
type: [String, Number],
|
|
118
|
+
default: ''
|
|
119
|
+
},
|
|
120
|
+
paddingFoot: {
|
|
121
|
+
type: [String, Number],
|
|
122
|
+
default: ''
|
|
123
|
+
},
|
|
124
|
+
// 是否显示头部
|
|
125
|
+
showHead: {
|
|
126
|
+
type: Boolean,
|
|
127
|
+
default: true
|
|
128
|
+
},
|
|
129
|
+
// 是否显示尾部
|
|
130
|
+
showFoot: {
|
|
131
|
+
type: Boolean,
|
|
132
|
+
default: true
|
|
133
|
+
},
|
|
134
|
+
// 卡片外围阴影，字符串形式
|
|
135
|
+
boxShadow: {
|
|
136
|
+
type: String,
|
|
137
|
+
default: 'none'
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
})
|
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<view
|
|
3
|
+
class="u-card"
|
|
4
|
+
@tap.stop="click"
|
|
5
|
+
:class="{ 'u-border': border, 'u-card-full': full, 'u-card--border': getPx(borderRadius) > 0 }"
|
|
6
|
+
:style="{
|
|
7
|
+
borderRadius: addUnit(borderRadius),
|
|
8
|
+
margin: margin,
|
|
9
|
+
boxShadow: boxShadow
|
|
10
|
+
}"
|
|
11
|
+
>
|
|
12
|
+
<view
|
|
13
|
+
v-if="showHead"
|
|
14
|
+
class="u-card__head"
|
|
15
|
+
:style="[{padding: addUnit(paddingHead || padding)}, headStyle]"
|
|
16
|
+
:class="{
|
|
17
|
+
'u-border-bottom': headBorderBottom
|
|
18
|
+
}"
|
|
19
|
+
@tap="headClick"
|
|
20
|
+
>
|
|
21
|
+
<view v-if="!$slots.head" class="u-flex u-row-between">
|
|
22
|
+
<view class="u-card__head--left u-flex u-line-1" v-if="title">
|
|
23
|
+
<image
|
|
24
|
+
:src="thumb"
|
|
25
|
+
class="u-card__head--left__thumb"
|
|
26
|
+
mode="aspectFill"
|
|
27
|
+
v-if="thumb"
|
|
28
|
+
:style="{
|
|
29
|
+
height: addUnit(thumbWidth),
|
|
30
|
+
width: addUnit(thumbWidth),
|
|
31
|
+
borderRadius: thumbCircle ? '50px' : '4px'
|
|
32
|
+
}"
|
|
33
|
+
></image>
|
|
34
|
+
<text
|
|
35
|
+
class="u-card__head--left__title u-line-1"
|
|
36
|
+
:style="{
|
|
37
|
+
fontSize: addUnit(titleSize),
|
|
38
|
+
color: titleColor
|
|
39
|
+
}"
|
|
40
|
+
>
|
|
41
|
+
{{ title }}
|
|
42
|
+
</text>
|
|
43
|
+
</view>
|
|
44
|
+
<view class="u-card__head--right u-line-1" v-if="subTitle">
|
|
45
|
+
<text
|
|
46
|
+
class="u-card__head__title__text"
|
|
47
|
+
:style="{
|
|
48
|
+
fontSize: addUnit(subTitleSize),
|
|
49
|
+
color: subTitleColor
|
|
50
|
+
}"
|
|
51
|
+
>
|
|
52
|
+
{{ subTitle }}
|
|
53
|
+
</text>
|
|
54
|
+
</view>
|
|
55
|
+
</view>
|
|
56
|
+
<slot name="head" v-else />
|
|
57
|
+
</view>
|
|
58
|
+
<view @tap="bodyClick" class="u-card__body"
|
|
59
|
+
:style="[{padding: addUnit(paddingBody || padding)}, bodyStyle]"><slot name="body" /></view>
|
|
60
|
+
<view
|
|
61
|
+
v-if="showFoot"
|
|
62
|
+
class="u-card__foot"
|
|
63
|
+
@tap="footClick"
|
|
64
|
+
:style="[{padding: $slots.foot ? addUnit(paddingFoot || padding) : 0}, footStyle]"
|
|
65
|
+
:class="{
|
|
66
|
+
'u-border-top': footBorderTop
|
|
67
|
+
}"
|
|
68
|
+
>
|
|
69
|
+
<slot name="foot" />
|
|
70
|
+
</view>
|
|
71
|
+
</view>
|
|
72
|
+
</template>
|
|
73
|
+
|
|
74
|
+
<script>
|
|
75
|
+
import { propsCard } from './props';
|
|
76
|
+
import { mpMixin } from '../../libs/mixin/mpMixin';
|
|
77
|
+
import { mixin } from '../../libs/mixin/mixin';
|
|
78
|
+
import { addStyle, addUnit, getPx } from '../../libs/function/index';
|
|
79
|
+
/**
|
|
80
|
+
* card 卡片
|
|
81
|
+
* @description 卡片组件一般用于多个列表条目，且风格统一的场景
|
|
82
|
+
* @tutorial https://uview-plus.jiangruyi.com/components/card.html
|
|
83
|
+
* @property {Boolean} full 卡片与屏幕两侧是否留空隙（默认false）
|
|
84
|
+
* @property {String} title 头部左边的标题
|
|
85
|
+
* @property {String} title-color 标题颜色（默认#303133）
|
|
86
|
+
* @property {String | Number} title-size 标题字体大小，单位rpx（默认15px）
|
|
87
|
+
* @property {String} sub-title 头部右边的副标题
|
|
88
|
+
* @property {String} sub-title-color 副标题颜色（默认#909399）
|
|
89
|
+
* @property {String | Number} sub-title-size 副标题字体大小（默认13px
|
|
90
|
+
* @property {Boolean} border 是否显示边框（默认true）
|
|
91
|
+
* @property {String | Number} index 用于标识点击了第几个卡片
|
|
92
|
+
* @property {String} box-shadow 卡片外围阴影，字符串形式（默认none）
|
|
93
|
+
* @property {String} margin 卡片与屏幕两边和上下元素的间距，需带单位，如"30px 20px"（默认15px）
|
|
94
|
+
* @property {String | Number} border-radius 卡片整体的圆角值，单位rpx（默认8px）
|
|
95
|
+
* @property {Object} head-style 头部自定义样式，对象形式
|
|
96
|
+
* @property {Object} body-style 中部自定义样式，对象形式
|
|
97
|
+
* @property {Object} foot-style 底部自定义样式，对象形式
|
|
98
|
+
* @property {Boolean} head-border-bottom 是否显示头部的下边框（默认true）
|
|
99
|
+
* @property {Boolean} foot-border-top 是否显示底部的上边框（默认true）
|
|
100
|
+
* @property {Boolean} show-head 是否显示头部（默认true）
|
|
101
|
+
* @property {Boolean} show-foot 是否显示尾部（默认true）
|
|
102
|
+
* @property {String} thumb 缩略图路径，如设置将显示在标题的左边，不建议使用相对路径
|
|
103
|
+
* @property {String | Number} thumb-width 缩略图的宽度，高等于宽，单位px（默认30px）
|
|
104
|
+
* @property {Boolean} thumb-circle 缩略图是否为圆形（默认false）
|
|
105
|
+
* @event {Function} click 整个卡片任意位置被点击时触发
|
|
106
|
+
* @event {Function} head-click 卡片头部被点击时触发
|
|
107
|
+
* @event {Function} body-click 卡片主体部分被点击时触发
|
|
108
|
+
* @event {Function} foot-click 卡片底部部分被点击时触发
|
|
109
|
+
* @example <u-card paddingFoot="2px 15px" title="card"></u-card>
|
|
110
|
+
*/
|
|
111
|
+
export default {
|
|
112
|
+
name: 'up-card',
|
|
113
|
+
data() {
|
|
114
|
+
return {};
|
|
115
|
+
},
|
|
116
|
+
mixins: [mpMixin, mixin, propsCard],
|
|
117
|
+
emits: ['click', 'head-click', 'body-click', 'foot-click'],
|
|
118
|
+
methods: {
|
|
119
|
+
addStyle,
|
|
120
|
+
addUnit,
|
|
121
|
+
getPx,
|
|
122
|
+
click() {
|
|
123
|
+
this.$emit('click', this.index);
|
|
124
|
+
},
|
|
125
|
+
headClick() {
|
|
126
|
+
this.$emit('head-click', this.index);
|
|
127
|
+
},
|
|
128
|
+
bodyClick() {
|
|
129
|
+
this.$emit('body-click', this.index);
|
|
130
|
+
},
|
|
131
|
+
footClick() {
|
|
132
|
+
this.$emit('foot-click', this.index);
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
};
|
|
136
|
+
</script>
|
|
137
|
+
|
|
138
|
+
<style lang="scss" scoped>
|
|
139
|
+
@import "../../libs/css/components.scss";
|
|
140
|
+
|
|
141
|
+
.u-card {
|
|
142
|
+
position: relative;
|
|
143
|
+
overflow: hidden;
|
|
144
|
+
font-size: 28rpx;
|
|
145
|
+
background-color: #ffffff;
|
|
146
|
+
box-sizing: border-box;
|
|
147
|
+
|
|
148
|
+
&-full {
|
|
149
|
+
// 如果是与屏幕之间不留空隙，应该设置左右边距为0
|
|
150
|
+
margin-left: 0 !important;
|
|
151
|
+
margin-right: 0 !important;
|
|
152
|
+
width: 100%;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
&--border:after {
|
|
156
|
+
border-radius: 16rpx;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
&__head {
|
|
160
|
+
&--left {
|
|
161
|
+
color: $u-main-color;
|
|
162
|
+
|
|
163
|
+
&__thumb {
|
|
164
|
+
margin-right: 16rpx;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
&__title {
|
|
168
|
+
max-width: 400rpx;
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
&--right {
|
|
173
|
+
color: $u-tips-color;
|
|
174
|
+
margin-left: 6rpx;
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
&__body {
|
|
179
|
+
color: $u-content-color;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
&__foot {
|
|
183
|
+
color: $u-tips-color;
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
</style>
|
|
@@ -92,7 +92,7 @@
|
|
|
92
92
|
@import "../../libs/css/components.scss";
|
|
93
93
|
$u-grid-width:100% !default;
|
|
94
94
|
.u-grid {
|
|
95
|
-
/* #ifdef
|
|
95
|
+
/* #ifdef APP-NVUE */
|
|
96
96
|
width: $u-grid-width;
|
|
97
97
|
position: relative;
|
|
98
98
|
box-sizing: border-box;
|
|
@@ -105,7 +105,7 @@
|
|
|
105
105
|
align-items: center;
|
|
106
106
|
// 在uni-app中应尽量避免使用flex布局以外的方式,因为nvue/uvue等方案都支持flex布局
|
|
107
107
|
// 这里使用grid布局使用为目前20240409uni-app在抖音小程序开启virtualHost时有bug，存在事件失效问题。
|
|
108
|
-
/* #
|
|
108
|
+
/* #ifndef APP-NVUE */
|
|
109
109
|
display: grid;
|
|
110
110
|
grid-template-columns: repeat(v-bind(col), 1fr);
|
|
111
111
|
/* #endif */
|
|
@@ -52,9 +52,6 @@
|
|
|
52
52
|
// #ifdef APP-NVUE
|
|
53
53
|
width: 0, // nvue下才这么计算，vue下放到computed中，否则会因为延时造成闪烁
|
|
54
54
|
// #endif
|
|
55
|
-
// #ifdef MP-TOUTIAO
|
|
56
|
-
width: '100%',
|
|
57
|
-
// #endif
|
|
58
55
|
classes: [], // 类名集合，用于判断是否显示右边和下边框
|
|
59
56
|
};
|
|
60
57
|
},
|
|
@@ -69,26 +66,16 @@
|
|
|
69
66
|
},
|
|
70
67
|
// #endif
|
|
71
68
|
computed: {
|
|
72
|
-
// #ifndef APP-NVUE || MP-TOUTIAO
|
|
73
|
-
// vue下放到computed中，否则会因为延时造成闪烁
|
|
74
|
-
width() {
|
|
75
|
-
if (this.parentData.col > 0) {
|
|
76
|
-
return 100 / Number(this.parentData.col) + '%'
|
|
77
|
-
} else {
|
|
78
|
-
return 0;
|
|
79
|
-
}
|
|
80
|
-
},
|
|
81
|
-
// #endif
|
|
82
69
|
itemStyle() {
|
|
83
70
|
const style = {
|
|
84
|
-
background: this.bgColor
|
|
85
|
-
// #ifndef MP
|
|
86
|
-
width: this.width
|
|
87
|
-
// #endif
|
|
88
|
-
// #ifdef MP
|
|
89
|
-
width: '100%'
|
|
90
|
-
// #endif
|
|
71
|
+
background: this.bgColor
|
|
91
72
|
}
|
|
73
|
+
// #ifdef APP-NVUE
|
|
74
|
+
style['width'] = this.width
|
|
75
|
+
// #endif
|
|
76
|
+
// #ifndef APP-NVUE
|
|
77
|
+
style['width'] = '100%'
|
|
78
|
+
// #endif
|
|
92
79
|
return deepMerge(style, addStyle(this.customStyle))
|
|
93
80
|
}
|
|
94
81
|
},
|
|
@@ -18,6 +18,7 @@
|
|
|
18
18
|
为了防止type=number时，又存在password属性，type无效，此时需要设置password为undefined
|
|
19
19
|
-->
|
|
20
20
|
<input
|
|
21
|
+
ref="input-native"
|
|
21
22
|
class="u-input__content__field-wrapper__field"
|
|
22
23
|
:style="[inputStyle]"
|
|
23
24
|
:type="type"
|
|
@@ -258,6 +259,12 @@ export default {
|
|
|
258
259
|
this.focused = true;
|
|
259
260
|
this.$emit("focus");
|
|
260
261
|
},
|
|
262
|
+
doFocus() {
|
|
263
|
+
this.$refs['input-native'].focus();
|
|
264
|
+
},
|
|
265
|
+
doBlur() {
|
|
266
|
+
this.$refs['input-native'].blur();
|
|
267
|
+
},
|
|
261
268
|
// 点击完成按钮时触发
|
|
262
269
|
onConfirm(event) {
|
|
263
270
|
this.$emit("confirm", this.innerValue);
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { defineMixin } from '../../libs/vue'
|
|
2
|
+
|
|
3
|
+
export const props = defineMixin({
|
|
4
|
+
props: {
|
|
5
|
+
// 是否开启顶部安全区适配
|
|
6
|
+
safeAreaInsetTop: {
|
|
7
|
+
type: Boolean,
|
|
8
|
+
default: () => true
|
|
9
|
+
},
|
|
10
|
+
// 是否固定在顶部
|
|
11
|
+
fixed: {
|
|
12
|
+
type: Boolean,
|
|
13
|
+
default: () => true
|
|
14
|
+
},
|
|
15
|
+
// 左边的图标
|
|
16
|
+
leftIcon: {
|
|
17
|
+
type: String,
|
|
18
|
+
default: 'arrow-leftward'
|
|
19
|
+
},
|
|
20
|
+
// 背景颜色
|
|
21
|
+
bgColor: {
|
|
22
|
+
type: String,
|
|
23
|
+
default: () => 'rgba(0,0,0,.15)'
|
|
24
|
+
},
|
|
25
|
+
// 导航栏高度
|
|
26
|
+
height: {
|
|
27
|
+
type: [String, Number],
|
|
28
|
+
default: () => '32px'
|
|
29
|
+
},
|
|
30
|
+
// 图标的大小
|
|
31
|
+
iconSize: {
|
|
32
|
+
type: [String, Number],
|
|
33
|
+
default: '20px'
|
|
34
|
+
},
|
|
35
|
+
// 图标的颜色
|
|
36
|
+
iconColor: {
|
|
37
|
+
type: String,
|
|
38
|
+
default: '#fff'
|
|
39
|
+
},
|
|
40
|
+
// 点击左侧区域(返回图标)，是否自动返回上一页
|
|
41
|
+
autoBack: {
|
|
42
|
+
type: Boolean,
|
|
43
|
+
default: () => true
|
|
44
|
+
},
|
|
45
|
+
// 首页路径
|
|
46
|
+
homeUrl: {
|
|
47
|
+
type: [String],
|
|
48
|
+
default: ''
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
})
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<view class="u-navbar-mini" :class="[customClass]">
|
|
3
|
+
<view
|
|
4
|
+
class="u-navbar-mini__placeholder"
|
|
5
|
+
v-if="fixed"
|
|
6
|
+
:style="{
|
|
7
|
+
height: addUnit(getPx(height) + sys().statusBarHeight,'px'),
|
|
8
|
+
}"
|
|
9
|
+
></view>
|
|
10
|
+
<view class="u-navbar-mini__inner" :class="[fixed && 'u-navbar-mini--fixed']">
|
|
11
|
+
<u-status-bar
|
|
12
|
+
v-if="safeAreaInsetTop"
|
|
13
|
+
:bgColor="bgColor"
|
|
14
|
+
></u-status-bar>
|
|
15
|
+
<view
|
|
16
|
+
class="u-navbar-mini__content"
|
|
17
|
+
:class="[border && 'u-border-bottom']"
|
|
18
|
+
:style="{
|
|
19
|
+
height: addUnit(height),
|
|
20
|
+
backgroundColor: bgColor,
|
|
21
|
+
}"
|
|
22
|
+
>
|
|
23
|
+
<view
|
|
24
|
+
class="u-navbar-mini__content__left"
|
|
25
|
+
hover-class="u-navbar-mini__content__left--hover"
|
|
26
|
+
hover-start-time="150"
|
|
27
|
+
@tap="leftClick"
|
|
28
|
+
>
|
|
29
|
+
<slot name="left">
|
|
30
|
+
<up-icon
|
|
31
|
+
:name="leftIcon"
|
|
32
|
+
:size="iconSize"
|
|
33
|
+
:color="iconColor"
|
|
34
|
+
></up-icon>
|
|
35
|
+
</slot>
|
|
36
|
+
</view>
|
|
37
|
+
<view style="padding: 10px 10px;">
|
|
38
|
+
<up-line direction="col" color="#fff" length="16px"></up-line>
|
|
39
|
+
</view>
|
|
40
|
+
<view
|
|
41
|
+
class="u-navbar-mini__content__center" @tap="homeClick">
|
|
42
|
+
<slot name="center">
|
|
43
|
+
<up-icon name="home" :size="iconSize" :color="iconColor"></up-icon>
|
|
44
|
+
</slot>
|
|
45
|
+
</view>
|
|
46
|
+
</view>
|
|
47
|
+
</view>
|
|
48
|
+
</view>
|
|
49
|
+
</template>
|
|
50
|
+
|
|
51
|
+
<script>
|
|
52
|
+
import { props } from './props';
|
|
53
|
+
console.log(props)
|
|
54
|
+
import { mpMixin } from '../../libs/mixin/mpMixin';
|
|
55
|
+
import { mixin } from '../../libs/mixin/mixin';
|
|
56
|
+
import { addUnit, addStyle, getPx, sys } from '../../libs/function/index';
|
|
57
|
+
/**
|
|
58
|
+
* NavbarMini 迷你导航栏
|
|
59
|
+
* @description 此组件一般用于在全屏页面中，典型的如微信小程序左上角。
|
|
60
|
+
* @tutorial https://ijry.github.io/uview-plus/components/navbar-mini.html
|
|
61
|
+
* @property {Boolean} safeAreaInsetTop 是否开启顶部安全区适配 （默认 true ）
|
|
62
|
+
* @property {Boolean} placeholder 固定在顶部时，是否生成一个等高元素，以防止塌陷 （默认 false ）
|
|
63
|
+
* @property {Boolean} fixed 导航栏是否固定在顶部 （默认 false ）
|
|
64
|
+
* @property {String} leftIcon 左边返回图标的名称，只能为uView自带的图标 （默认 'arrow-left' ）
|
|
65
|
+
* @property {String} title 导航栏标题，如设置为空字符，将会隐藏标题占位区域
|
|
66
|
+
* @property {String} bgColor 导航栏背景设置 （默认 '#ffffff' ）
|
|
67
|
+
* @property {String | Number} height 导航栏高度(不包括状态栏高度在内，内部自动加上)（默认 '44px' ）
|
|
68
|
+
* @property {String | Number} iconSize 左侧返回图标的大小（默认 20px ）
|
|
69
|
+
* @property {String | Number} leftIconColor 左侧返回图标的颜色（默认 #303133 ）
|
|
70
|
+
* @property {Boolean} autoBack 点击左侧区域(返回图标)，是否自动返回上一页（默认 false ）
|
|
71
|
+
* @property {Object | String} titleStyle 标题的样式，对象或字符串
|
|
72
|
+
* @event {Function} leftClick 点击左侧区域
|
|
73
|
+
* @event {Function} rightClick 点击右侧区域
|
|
74
|
+
* @example <u-navbar-mini @click-left="onClickBack"></u-navbar-mini>
|
|
75
|
+
*/
|
|
76
|
+
export default {
|
|
77
|
+
name: 'u-navbar-mini',
|
|
78
|
+
mixins: [mpMixin, mixin, props],
|
|
79
|
+
data() {
|
|
80
|
+
return {
|
|
81
|
+
}
|
|
82
|
+
},
|
|
83
|
+
emits: ["leftClick", "homeClick"],
|
|
84
|
+
created() {
|
|
85
|
+
},
|
|
86
|
+
methods: {
|
|
87
|
+
addStyle,
|
|
88
|
+
addUnit,
|
|
89
|
+
sys,
|
|
90
|
+
getPx,
|
|
91
|
+
// 点击左侧区域
|
|
92
|
+
leftClick() {
|
|
93
|
+
// 如果配置了autoBack，自动返回上一页
|
|
94
|
+
this.$emit('leftClick')
|
|
95
|
+
if(this.autoBack) {
|
|
96
|
+
uni.navigateBack()
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
homeClick() {
|
|
100
|
+
if (this.homeUrl) {
|
|
101
|
+
uni.reLaunch({ url: this.homeUrl })
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
</script>
|
|
107
|
+
|
|
108
|
+
<style lang="scss" scoped>
|
|
109
|
+
@import "../../libs/css/components.scss";
|
|
110
|
+
|
|
111
|
+
.u-navbar-mini {
|
|
112
|
+
|
|
113
|
+
&__inner {
|
|
114
|
+
width: 180rpx;
|
|
115
|
+
border-radius: 20px;
|
|
116
|
+
overflow: hidden;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
&--fixed {
|
|
120
|
+
position: fixed;
|
|
121
|
+
left: 20px;
|
|
122
|
+
right: 0;
|
|
123
|
+
top: 10px;
|
|
124
|
+
z-index: 11;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
&__content {
|
|
128
|
+
@include flex(row);
|
|
129
|
+
padding: 0 15px;
|
|
130
|
+
align-items: center;
|
|
131
|
+
height: 44px;
|
|
132
|
+
background-color: #9acafc;
|
|
133
|
+
position: relative;
|
|
134
|
+
justify-content: space-between;
|
|
135
|
+
|
|
136
|
+
&__left {
|
|
137
|
+
@include flex(row);
|
|
138
|
+
align-items: center;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
&__left {
|
|
142
|
+
&--hover {
|
|
143
|
+
opacity: 0.7;
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
</style>
|