uview-plus 3.3.13 → 3.3.15
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-calendar/month.vue +2 -2
- package/components/u-card/props.js +140 -0
- package/components/u-card/u-card.vue +186 -0
- package/components/u-code-input/u-code-input.vue +43 -9
- package/libs/function/index.js +4 -1
- 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>
|
|
@@ -158,13 +158,13 @@
|
|
|
158
158
|
const dayWidth = Number(parseFloat(this.width / 7).toFixed(3).slice(0, -1))
|
|
159
159
|
// 得出每个日期的宽度
|
|
160
160
|
// #ifdef APP-NVUE
|
|
161
|
-
style.width = addUnit(dayWidth)
|
|
161
|
+
style.width = addUnit(dayWidth, 'px')
|
|
162
162
|
// #endif
|
|
163
163
|
style.height = addUnit(this.rowHeight)
|
|
164
164
|
if (index2 === 0) {
|
|
165
165
|
// 获取当前为星期几，如果为0，则为星期天，减一为每月第一天时，需要向左偏移的item个数
|
|
166
166
|
week = (week === 0 ? 7 : week) - 1
|
|
167
|
-
style.marginLeft = addUnit(week * dayWidth)
|
|
167
|
+
style.marginLeft = addUnit(week * dayWidth, 'px')
|
|
168
168
|
}
|
|
169
169
|
if (this.mode === 'range') {
|
|
170
170
|
// 之所以需要这么写，是因为DCloud公司的iOS客户端的开发者能力有限导致的bug
|
|
@@ -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>
|
|
@@ -23,8 +23,13 @@
|
|
|
23
23
|
v-if="mode === 'line'"
|
|
24
24
|
:style="[lineStyle]"
|
|
25
25
|
></view>
|
|
26
|
-
<!-- #ifndef APP-
|
|
27
|
-
<view v-if="isFocus && codeArray.length === index"
|
|
26
|
+
<!-- #ifndef APP-NVUE -->
|
|
27
|
+
<view v-if="isFocus && codeArray.length === index"
|
|
28
|
+
:style="{backgroundColor: color}" class="u-code-input__item__cursor"></view>
|
|
29
|
+
<!-- #endif -->
|
|
30
|
+
<!-- #ifdef APP-NVUE -->
|
|
31
|
+
<view v-if="isFocus && codeArray.length === index"
|
|
32
|
+
:style="{backgroundColor: color, opacity: opacity}" class="u-code-input__item__cursor"></view>
|
|
28
33
|
<!-- #endif -->
|
|
29
34
|
</view>
|
|
30
35
|
<input
|
|
@@ -79,22 +84,51 @@
|
|
|
79
84
|
data() {
|
|
80
85
|
return {
|
|
81
86
|
inputValue: '',
|
|
82
|
-
isFocus: this.focus
|
|
87
|
+
isFocus: this.focus,
|
|
88
|
+
timer: null,
|
|
89
|
+
opacity: 1
|
|
83
90
|
}
|
|
84
91
|
},
|
|
85
92
|
watch: {
|
|
86
93
|
// #ifdef VUE2
|
|
87
94
|
value: {
|
|
95
|
+
immediate: true,
|
|
96
|
+
handler(val) {
|
|
97
|
+
// 转为字符串，超出部分截掉
|
|
98
|
+
this.inputValue = String(val).substring(0, this.maxlength)
|
|
99
|
+
}
|
|
100
|
+
},
|
|
88
101
|
// #endif
|
|
89
102
|
// #ifdef VUE3
|
|
90
103
|
modelValue: {
|
|
91
|
-
// #endif
|
|
92
104
|
immediate: true,
|
|
93
105
|
handler(val) {
|
|
94
106
|
// 转为字符串，超出部分截掉
|
|
95
107
|
this.inputValue = String(val).substring(0, this.maxlength)
|
|
96
108
|
}
|
|
97
109
|
},
|
|
110
|
+
// #endif
|
|
111
|
+
isFocus: {
|
|
112
|
+
handler(val) {
|
|
113
|
+
// #ifdef APP-NVUE
|
|
114
|
+
if (val) {
|
|
115
|
+
this.timer = setInterval(() => {
|
|
116
|
+
this.opacity = Math.abs(this.opacity - 1)
|
|
117
|
+
}, 600)
|
|
118
|
+
} else {
|
|
119
|
+
clearInterval(this.timer)
|
|
120
|
+
}
|
|
121
|
+
// #endif
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
},
|
|
125
|
+
created() {
|
|
126
|
+
|
|
127
|
+
},
|
|
128
|
+
beforeUnmount() {
|
|
129
|
+
// #ifdef APP-NVUE
|
|
130
|
+
clearInterval(this.timer)
|
|
131
|
+
// #endif
|
|
98
132
|
},
|
|
99
133
|
computed: {
|
|
100
134
|
// 根据长度，循环输入框的个数，因为头条小程序数值不能用于v-for
|
|
@@ -188,7 +222,7 @@
|
|
|
188
222
|
<style lang="scss" scoped>
|
|
189
223
|
@import "../../libs/css/components.scss";
|
|
190
224
|
$u-code-input-cursor-width: 1px;
|
|
191
|
-
$u-code-input-cursor-height:
|
|
225
|
+
$u-code-input-cursor-height: 20px;
|
|
192
226
|
$u-code-input-cursor-animation-duration: 1s;
|
|
193
227
|
$u-code-input-cursor-animation-name: u-cursor-flicker;
|
|
194
228
|
|
|
@@ -223,18 +257,18 @@
|
|
|
223
257
|
width: 40px;
|
|
224
258
|
background-color: $u-content-color;
|
|
225
259
|
}
|
|
226
|
-
/* #ifndef APP-PLUS */
|
|
227
260
|
&__cursor {
|
|
228
261
|
position: absolute;
|
|
262
|
+
/* #ifndef APP-NVUE */
|
|
229
263
|
top: 50%;
|
|
230
264
|
left: 50%;
|
|
265
|
+
opacity: 1;
|
|
231
266
|
transform: translate(-50%,-50%);
|
|
267
|
+
/* #endif */
|
|
232
268
|
width: $u-code-input-cursor-width;
|
|
233
269
|
height: $u-code-input-cursor-height;
|
|
234
270
|
animation: $u-code-input-cursor-animation-duration u-cursor-flicker infinite;
|
|
235
271
|
}
|
|
236
|
-
/* #endif */
|
|
237
|
-
|
|
238
272
|
}
|
|
239
273
|
|
|
240
274
|
&__input {
|
|
@@ -249,7 +283,7 @@
|
|
|
249
283
|
}
|
|
250
284
|
}
|
|
251
285
|
|
|
252
|
-
/* #ifndef APP-
|
|
286
|
+
/* #ifndef APP-NVUE */
|
|
253
287
|
@keyframes u-cursor-flicker {
|
|
254
288
|
0% {
|
|
255
289
|
opacity: 0;
|
package/libs/function/index.js
CHANGED
|
@@ -181,8 +181,11 @@ export function addUnit(value = 'auto', unit = '') {
|
|
|
181
181
|
if (!unit) {
|
|
182
182
|
unit = config.unit || 'px'
|
|
183
183
|
}
|
|
184
|
+
if (unit == 'rpx') {
|
|
185
|
+
value = value * 2
|
|
186
|
+
}
|
|
184
187
|
value = String(value)
|
|
185
|
-
//
|
|
188
|
+
// 用内置验证规则中的number判断是否为数值
|
|
186
189
|
return testNumber(value) ? `${value}${unit}` : value
|
|
187
190
|
}
|
|
188
191
|
|