uview-plus 3.2.8 → 3.2.10

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.
Files changed (120) hide show
  1. package/changelog.md +10 -0
  2. package/components/u--form/u--form.vue +7 -7
  3. package/components/u--image/u--image.vue +3 -3
  4. package/components/u--input/u--input.vue +9 -9
  5. package/components/u--textarea/u--textarea.vue +3 -3
  6. package/components/u-action-sheet/u-action-sheet.vue +5 -4
  7. package/components/u-album/u-album.vue +9 -7
  8. package/components/u-alert/u-alert.vue +9 -6
  9. package/components/u-avatar/props.js +2 -1
  10. package/components/u-avatar/u-avatar.vue +15 -11
  11. package/components/u-avatar-group/u-avatar-group.vue +9 -5
  12. package/components/u-back-top/u-back-top.vue +9 -8
  13. package/components/u-badge/u-badge.vue +10 -6
  14. package/components/u-button/u-button.vue +13 -9
  15. package/components/u-calendar/header.vue +3 -3
  16. package/components/u-calendar/month.vue +17 -15
  17. package/components/u-calendar/u-calendar.vue +26 -10
  18. package/components/u-car-keyboard/u-car-keyboard.vue +7 -6
  19. package/components/u-cell/u-cell.vue +9 -6
  20. package/components/u-cell-group/u-cell-group.vue +8 -4
  21. package/components/u-checkbox/u-checkbox.vue +13 -11
  22. package/components/u-checkbox-group/u-checkbox-group.vue +3 -3
  23. package/components/u-circle-progress/u-circle-progress.vue +5 -4
  24. package/components/u-code/u-code.vue +3 -3
  25. package/components/u-code-input/u-code-input.vue +9 -8
  26. package/components/u-col/u-col.vue +9 -8
  27. package/components/u-collapse/u-collapse.vue +3 -3
  28. package/components/u-collapse-item/u-collapse-item.vue +32 -15
  29. package/components/u-column-notice/u-column-notice.vue +8 -6
  30. package/components/u-count-down/u-count-down.vue +3 -3
  31. package/components/u-count-to/u-count-to.vue +6 -4
  32. package/components/u-datetime-picker/u-datetime-picker.vue +16 -15
  33. package/components/u-divider/u-divider.vue +7 -5
  34. package/components/u-dropdown/u-dropdown.vue +12 -10
  35. package/components/u-dropdown-item/u-dropdown-item.vue +7 -5
  36. package/components/u-empty/u-empty.vue +12 -8
  37. package/components/u-form/u-form.vue +12 -10
  38. package/components/u-form-item/u-form-item.vue +17 -11
  39. package/components/u-gap/u-gap.vue +3 -3
  40. package/components/u-grid/u-grid.vue +18 -7
  41. package/components/u-grid-item/u-grid-item.vue +14 -9
  42. package/components/u-icon/u-icon.vue +21 -19
  43. package/components/u-image/u-image.vue +18 -16
  44. package/components/u-index-anchor/u-index-anchor.vue +11 -9
  45. package/components/u-index-item/u-index-item.vue +6 -5
  46. package/components/u-index-list/u-index-list.vue +20 -18
  47. package/components/u-input/u-input.vue +19 -12
  48. package/components/u-keyboard/u-keyboard.vue +3 -3
  49. package/components/u-line/u-line.vue +7 -6
  50. package/components/u-line-progress/u-line-progress.vue +11 -8
  51. package/components/u-link/u-link.vue +9 -8
  52. package/components/u-list/u-list.vue +9 -9
  53. package/components/u-list-item/u-list-item.vue +5 -4
  54. package/components/u-loading-icon/u-loading-icon.vue +14 -10
  55. package/components/u-loading-page/u-loading-page.vue +10 -7
  56. package/components/u-loadmore/u-loadmore.vue +12 -10
  57. package/components/u-modal/u-modal.vue +7 -5
  58. package/components/u-navbar/u-navbar.vue +12 -7
  59. package/components/u-no-network/u-no-network.vue +6 -6
  60. package/components/u-notice-bar/u-notice-bar.vue +6 -5
  61. package/components/u-notify/u-notify.vue +19 -15
  62. package/components/u-number-box/u-number-box.vue +8 -7
  63. package/components/u-number-keyboard/u-number-keyboard.vue +7 -7
  64. package/components/u-overlay/u-overlay.vue +5 -5
  65. package/components/u-picker/u-picker.vue +19 -15
  66. package/components/u-picker-column/u-picker-column.vue +3 -3
  67. package/components/u-popup/u-popup.vue +13 -13
  68. package/components/u-radio/u-radio.vue +12 -12
  69. package/components/u-radio-group/u-radio-group.vue +3 -3
  70. package/components/u-rate/u-rate.vue +16 -14
  71. package/components/u-read-more/u-read-more.vue +9 -7
  72. package/components/u-row/u-row.vue +8 -7
  73. package/components/u-row-notice/u-row-notice.vue +14 -12
  74. package/components/u-safe-bottom/u-safe-bottom.vue +5 -4
  75. package/components/u-scroll-list/nvue.js +4 -4
  76. package/components/u-scroll-list/u-scroll-list.vue +13 -10
  77. package/components/u-search/u-search.vue +8 -6
  78. package/components/u-skeleton/u-skeleton.vue +20 -17
  79. package/components/u-slider/mpwxs.js +3 -2
  80. package/components/u-slider/nvue - /345/211/257/346/234/254.js" +2 -2
  81. package/components/u-slider/nvue.js +2 -2
  82. package/components/u-slider/u-slider.vue +8 -5
  83. package/components/u-status-bar/u-status-bar.vue +6 -5
  84. package/components/u-steps/u-steps.vue +5 -4
  85. package/components/u-steps-item/u-steps-item.vue +9 -7
  86. package/components/u-sticky/u-sticky.vue +12 -10
  87. package/components/u-subsection/u-subsection.vue +8 -6
  88. package/components/u-swipe-action/u-swipe-action.vue +3 -3
  89. package/components/u-swipe-action-item/nvue - backup.js +3 -3
  90. package/components/u-swipe-action-item/nvue.js +3 -3
  91. package/components/u-swipe-action-item/u-swipe-action-item.vue +8 -5
  92. package/components/u-swiper/u-swiper.vue +35 -24
  93. package/components/u-swiper-indicator/u-swiper-indicator.vue +10 -7
  94. package/components/u-switch/u-switch.vue +15 -13
  95. package/components/u-tabbar/u-tabbar.vue +6 -5
  96. package/components/u-tabbar-item/u-tabbar-item.vue +7 -5
  97. package/components/u-table/u-table.vue +3 -3
  98. package/components/u-tabs/u-tabs.vue +18 -14
  99. package/components/u-tabs-item/u-tabs-item.vue +3 -3
  100. package/components/u-tag/u-tag.vue +6 -4
  101. package/components/u-td/u-td.vue +3 -3
  102. package/components/u-text/u-text.vue +12 -10
  103. package/components/u-text/value.js +14 -12
  104. package/components/u-textarea/u-textarea.vue +11 -8
  105. package/components/u-toast/u-toast.vue +12 -9
  106. package/components/u-toolbar/u-toolbar.vue +3 -3
  107. package/components/u-tooltip/u-tooltip.vue +18 -17
  108. package/components/u-tr/u-tr.vue +3 -3
  109. package/components/u-transition/transition.js +2 -2
  110. package/components/u-transition/u-transition.vue +6 -5
  111. package/components/u-upload/mixin.js +4 -3
  112. package/components/u-upload/u-upload.vue +20 -17
  113. package/index.js +0 -5
  114. package/libs/function/index.js +27 -20
  115. package/libs/function/throttle.js +2 -2
  116. package/libs/mixin/mixin.js +14 -6
  117. package/libs/mixin/style.js +23 -4
  118. package/libs/util/route.js +6 -6
  119. package/package.json +1 -1
  120. package/types/index.d.ts +0 -1
@@ -9,13 +9,13 @@
9
9
  v-if="isImg"
10
10
  :src="name"
11
11
  :mode="imgMode"
12
- :style="[imgStyle, $u.addStyle(customStyle)]"
12
+ :style="[imgStyle, addStyle(customStyle)]"
13
13
  ></image>
14
14
  <text
15
15
  v-else
16
16
  class="u-icon__icon"
17
17
  :class="uClasses"
18
- :style="[iconStyle, $u.addStyle(customStyle)]"
18
+ :style="[iconStyle, addStyle(customStyle)]"
19
19
  :hover-class="hoverClass"
20
20
  >{{icon}}</text>
21
21
  <!-- 这里进行空字符串判断,如果仅仅是v-if="label",可能会出现传递0的时候,结果也无法显示 -->
@@ -24,11 +24,11 @@
24
24
  class="u-icon__label"
25
25
  :style="{
26
26
  color: labelColor,
27
- fontSize: $u.addUnit(labelSize),
28
- marginLeft: labelPos == 'right' ? $u.addUnit(space) : 0,
29
- marginTop: labelPos == 'bottom' ? $u.addUnit(space) : 0,
30
- marginRight: labelPos == 'left' ? $u.addUnit(space) : 0,
31
- marginBottom: labelPos == 'top' ? $u.addUnit(space) : 0,
27
+ fontSize: addUnit(labelSize),
28
+ marginLeft: labelPos == 'right' ? addUnit(space) : 0,
29
+ marginTop: labelPos == 'bottom' ? addUnit(space) : 0,
30
+ marginRight: labelPos == 'left' ? addUnit(space) : 0,
31
+ marginBottom: labelPos == 'top' ? addUnit(space) : 0,
32
32
  }"
33
33
  >{{ label }}</text>
34
34
  </view>
@@ -48,11 +48,11 @@
48
48
 
49
49
  // 引入图标名称,已经对应的unicode
50
50
  import icons from './icons'
51
-
52
- import props from './props.js';
53
- import mpMixin from '../../libs/mixin/mpMixin.js';
54
- import mixin from '../../libs/mixin/mixin.js';
55
-
51
+ import props from './props';
52
+ import mpMixin from '../../libs/mixin/mpMixin';
53
+ import mixin from '../../libs/mixin/mixin';
54
+ import { addUnit, addStyle } from '../../libs/function/index';
55
+ import config from '../../libs/config/config';
56
56
  /**
57
57
  * icon 图标
58
58
  * @description 基于字体的图标集,包含了大多数常见场景的图标。
@@ -100,7 +100,7 @@
100
100
  classes.push(this.customPrefix)
101
101
  }
102
102
  // 主题色,通过类配置
103
- if (this.color && uni.$u.config.type.includes(this.color)) classes.push('u-icon__icon--' + this.color)
103
+ if (this.color && config.type.includes(this.color)) classes.push('u-icon__icon--' + this.color)
104
104
  // 阿里,头条,百度小程序通过数组绑定类名时,无法直接使用[a, b, c]的形式,否则无法识别
105
105
  // 故需将其拆成一个字符串的形式,通过空格隔开各个类名
106
106
  //#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
@@ -111,14 +111,14 @@
111
111
  iconStyle() {
112
112
  let style = {}
113
113
  style = {
114
- fontSize: uni.$u.addUnit(this.size),
115
- lineHeight: uni.$u.addUnit(this.size),
114
+ fontSize: addUnit(this.size),
115
+ lineHeight: addUnit(this.size),
116
116
  fontWeight: this.bold ? 'bold' : 'normal',
117
117
  // 某些特殊情况需要设置一个到顶部的距离,才能更好的垂直居中
118
- top: uni.$u.addUnit(this.top)
118
+ top: addUnit(this.top)
119
119
  }
120
120
  // 非主题色值时,才当作颜色值
121
- if (this.color && !uni.$u.config.type.includes(this.color)) style.color = this.color
121
+ if (this.color && !config.type.includes(this.color)) style.color = this.color
122
122
 
123
123
  return style
124
124
  },
@@ -129,8 +129,8 @@
129
129
  imgStyle() {
130
130
  let style = {}
131
131
  // 如果设置width和height属性,则优先使用,否则使用size属性
132
- style.width = this.width ? uni.$u.addUnit(this.width) : uni.$u.addUnit(this.size)
133
- style.height = this.height ? uni.$u.addUnit(this.height) : uni.$u.addUnit(this.size)
132
+ style.width = this.width ? addUnit(this.width) : addUnit(this.size)
133
+ style.height = this.height ? addUnit(this.height) : addUnit(this.size)
134
134
  return style
135
135
  },
136
136
  // 通过图标名,查找对应的图标
@@ -142,6 +142,8 @@
142
142
  }
143
143
  },
144
144
  methods: {
145
+ addStyle,
146
+ addUnit,
145
147
  clickHandler(e) {
146
148
  this.$emit('click', this.index)
147
149
  // 是否阻止事件冒泡
@@ -19,19 +19,19 @@
19
19
  :lazy-load="lazyLoad"
20
20
  class="u-image__image"
21
21
  :style="{
22
- borderRadius: shape == 'circle' ? '10000px' : $u.addUnit(radius),
23
- width: $u.addUnit(width),
24
- height: $u.addUnit(height)
22
+ borderRadius: shape == 'circle' ? '10000px' : addUnit(radius),
23
+ width: addUnit(width),
24
+ height: addUnit(height)
25
25
  }"
26
26
  ></image>
27
27
  <view
28
28
  v-if="showLoading && loading"
29
29
  class="u-image__loading"
30
30
  :style="{
31
- borderRadius: shape == 'circle' ? '50%' : $u.addUnit(radius),
31
+ borderRadius: shape == 'circle' ? '50%' : addUnit(radius),
32
32
  backgroundColor: this.bgColor,
33
- width: $u.addUnit(width),
34
- height: $u.addUnit(height)
33
+ width: addUnit(width),
34
+ height: addUnit(height)
35
35
  }"
36
36
  >
37
37
  <slot name="loading">
@@ -46,9 +46,9 @@
46
46
  v-if="showError && isError && !loading"
47
47
  class="u-image__error"
48
48
  :style="{
49
- borderRadius: shape == 'circle' ? '50%' : $u.addUnit(radius),
50
- width: $u.addUnit(width),
51
- height: $u.addUnit(height)
49
+ borderRadius: shape == 'circle' ? '50%' : addUnit(radius),
50
+ width: addUnit(width),
51
+ height: addUnit(height)
52
52
  }"
53
53
  >
54
54
  <slot name="error">
@@ -64,9 +64,10 @@
64
64
  </template>
65
65
 
66
66
  <script>
67
- import props from './props.js';
68
- import mpMixin from '../../libs/mixin/mpMixin.js';
69
- import mixin from '../../libs/mixin/mixin.js';
67
+ import props from './props';
68
+ import mpMixin from '../../libs/mixin/mpMixin';
69
+ import mixin from '../../libs/mixin/mixin';
70
+ import { addUnit, addStyle, deepMerge } from '../../libs/function/index';
70
71
  /**
71
72
  * Image 图片
72
73
  * @description 此组件为uni-app的image组件的加强版,在继承了原有功能外,还支持淡入动画、加载中、加载失败提示、圆角值和形状等。
@@ -131,10 +132,10 @@
131
132
  wrapStyle() {
132
133
  let style = {};
133
134
  // 通过调用addUnit()方法,如果有单位,如百分比,px单位等,直接返回,如果是纯粹的数值,则加上rpx单位
134
- style.width = this.$u.addUnit(this.width);
135
- style.height = this.$u.addUnit(this.height);
135
+ style.width = addUnit(this.width);
136
+ style.height = addUnit(this.height);
136
137
  // 如果是显示圆形,设置一个很多的半径值即可
137
- style.borderRadius = this.shape == 'circle' ? '10000px' : uni.$u.addUnit(this.radius)
138
+ style.borderRadius = this.shape == 'circle' ? '10000px' : addUnit(this.radius)
138
139
  // 如果设置圆角,必须要有hidden,否则可能圆角无效
139
140
  style.overflow = this.radius > 0 ? 'hidden' : 'visible'
140
141
  // if (this.fade) {
@@ -144,7 +145,7 @@
144
145
  // style.transitionTimingFunction = 'ease-in-out'
145
146
  // style.transitionProperty = 'opacity'
146
147
  // }
147
- return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
148
+ return deepMerge(style, addStyle(this.customStyle));
148
149
 
149
150
  }
150
151
  },
@@ -153,6 +154,7 @@
153
154
  },
154
155
  emits: ['click', 'error', 'load'],
155
156
  methods: {
157
+ addUnit,
156
158
  // 点击图片
157
159
  onClick() {
158
160
  this.$emit('click')
@@ -6,14 +6,14 @@
6
6
  class="u-index-anchor u-border-bottom"
7
7
  :ref="`u-index-anchor-${text}`"
8
8
  :style="{
9
- height: $u.addUnit(height),
9
+ height: addUnit(height),
10
10
  backgroundColor: bgColor
11
11
  }"
12
12
  >
13
13
  <text
14
14
  class="u-index-anchor__text"
15
15
  :style="{
16
- fontSize: $u.addUnit(size),
16
+ fontSize: addUnit(size),
17
17
  color: color
18
18
  }"
19
19
  >{{ text }}</text>
@@ -24,9 +24,10 @@
24
24
  </template>
25
25
 
26
26
  <script>
27
- import props from './props.js';
28
- import mpMixin from '../../libs/mixin/mpMixin.js';
29
- import mixin from '../../libs/mixin/mixin.js';
27
+ import props from './props';
28
+ import mpMixin from '../../libs/mixin/mpMixin';
29
+ import mixin from '../../libs/mixin/mixin';
30
+ import { addUnit, $parent, error } from '../../libs/function/index';
30
31
  // #ifdef APP-NVUE
31
32
  const dom = uni.requireNativePlugin('dom')
32
33
  // #endif
@@ -52,19 +53,20 @@
52
53
  this.init()
53
54
  },
54
55
  methods: {
56
+ addUnit,
55
57
  init() {
56
58
  // 此处会活动父组件实例,并赋值给实例的parent属性
57
- const indexList = uni.$u.$parent.call(this, 'u-index-list')
59
+ const indexList = $parent.call(this, 'u-index-list')
58
60
  if (!indexList) {
59
- return uni.$u.error('u-index-anchor必须要搭配u-index-list组件使用')
61
+ return error('u-index-anchor必须要搭配u-index-list组件使用')
60
62
  }
61
63
  // 将当前实例放入到u-index-list中
62
64
  indexList.anchors.push(this)
63
- const indexListItem = uni.$u.$parent.call(this, 'u-index-item')
65
+ const indexListItem = $parent.call(this, 'u-index-item')
64
66
  // #ifndef APP-NVUE
65
67
  // 只有在非nvue下,u-index-anchor才是嵌套在u-index-item中的
66
68
  if (!indexListItem) {
67
- return uni.$u.error('u-index-anchor必须要搭配u-index-item组件使用')
69
+ return error('u-index-anchor必须要搭配u-index-item组件使用')
68
70
  }
69
71
  // 设置u-index-item的id为anchor的text标识符,因为非nvue下滚动列表需要依赖scroll-view滚动到元素的特性
70
72
  indexListItem.id = this.text.charCodeAt(0)
@@ -15,9 +15,10 @@
15
15
  </template>
16
16
 
17
17
  <script>
18
- import props from './props.js';
19
- import mpMixin from '../../libs/mixin/mpMixin.js';
20
- import mixin from '../../libs/mixin/mixin.js';
18
+ import props from './props';
19
+ import mpMixin from '../../libs/mixin/mpMixin';
20
+ import mixin from '../../libs/mixin/mixin';
21
+ import { sleep, error } from '../../libs/function/index';
21
22
  // #ifdef APP-NVUE
22
23
  // 由于weex为阿里的KPI业绩考核的产物,所以不支持百分比单位,这里需要通过dom查询组件的宽度
23
24
  const dom = uni.requireNativePlugin('dom')
@@ -53,9 +54,9 @@
53
54
  // 此处会活动父组件实例,并赋值给实例的parent属性
54
55
  this.getParentData('u-index-list')
55
56
  if (!this.parent) {
56
- return uni.$u.error('u-index-item必须要搭配u-index-list组件使用')
57
+ return error('u-index-item必须要搭配u-index-list组件使用')
57
58
  }
58
- uni.$u.sleep().then(() =>{
59
+ sleep().then(() =>{
59
60
  this.getIndexItemRect().then(size => {
60
61
  // 由于对象的引用特性,此处会同时生效到父组件的children数组的本实例的top属性中,供父组件判断读取
61
62
  this.top = Math.ceil(size.top)
@@ -6,7 +6,7 @@
6
6
  enable-back-to-top
7
7
  :offset-accuracy="1"
8
8
  :style="{
9
- maxHeight: $u.addUnit(scrollViewHeight)
9
+ maxHeight: addUnit(scrollViewHeight)
10
10
  }"
11
11
  @scroll="scrollHandler"
12
12
  ref="uList"
@@ -29,7 +29,7 @@
29
29
  :scrollIntoView="scrollIntoView"
30
30
  :offset-accuracy="1"
31
31
  :style="{
32
- maxHeight: $u.addUnit(scrollViewHeight)
32
+ maxHeight: addUnit(scrollViewHeight)
33
33
  }"
34
34
  scroll-y
35
35
  @scroll="scrollHandler"
@@ -47,7 +47,7 @@
47
47
  <view
48
48
  class="u-index-list__letter"
49
49
  ref="u-index-list__letter"
50
- :style="{ top: $u.addUnit(letterInfo.top || 100) }"
50
+ :style="{ top: addUnit(letterInfo.top || 100) }"
51
51
  @touchstart.prevent="touchStart"
52
52
  @touchmove.prevent="touchMove"
53
53
  @touchend.prevent="touchEnd"
@@ -73,7 +73,7 @@
73
73
  :customStyle="{
74
74
  position: 'fixed',
75
75
  right: '50px',
76
- top: $u.addUnit(indicatorTop),
76
+ top: addUnit(indicatorTop),
77
77
  zIndex: 2
78
78
  }"
79
79
  >
@@ -81,8 +81,8 @@
81
81
  class="u-index-list__indicator"
82
82
  :class="['u-index-list__indicator--show']"
83
83
  :style="{
84
- height: $u.addUnit(indicatorHeight),
85
- width: $u.addUnit(indicatorHeight)
84
+ height: addUnit(indicatorHeight),
85
+ width: addUnit(indicatorHeight)
86
86
  }"
87
87
  >
88
88
  <text class="u-index-list__indicator__text">{{ uIndexList[activeIndex] }}</text>
@@ -100,9 +100,10 @@
100
100
  }
101
101
  return indexList;
102
102
  }
103
- import props from './props.js';
104
- import mpMixin from '../../libs/mixin/mpMixin.js';
105
- import mixin from '../../libs/mixin/mixin.js';
103
+ import props from './props';
104
+ import mpMixin from '../../libs/mixin/mpMixin';
105
+ import mixin from '../../libs/mixin/mixin';
106
+ import { addUnit, sys, sleep, getPx } from '../../libs/function/index';
106
107
  // #ifdef APP-NVUE
107
108
  // 由于weex为阿里的KPI业绩考核的产物,所以不支持百分比单位,这里需要通过dom查询组件的宽度
108
109
  const dom = uni.requireNativePlugin('dom')
@@ -148,7 +149,7 @@
148
149
  // scroll-view的高度
149
150
  scrollViewHeight: 0,
150
151
  // 系统信息
151
- sys: uni.$u.sys(),
152
+ sys: sys(),
152
153
  scrolling: false,
153
154
  scrollIntoView: '',
154
155
  }
@@ -172,7 +173,7 @@
172
173
  uIndexList: {
173
174
  immediate: true,
174
175
  handler() {
175
- uni.$u.sleep().then(() => {
176
+ sleep().then(() => {
176
177
  this.setIndexListLetterInfo()
177
178
  })
178
179
  }
@@ -187,11 +188,12 @@
187
188
  this.setIndexListLetterInfo()
188
189
  },
189
190
  methods: {
191
+ addUnit,
190
192
  init() {
191
193
  // 设置列表的高度为整个屏幕的高度
192
194
  //减去this.customNavHeight,并将this.scrollViewHeight设置为maxHeight
193
195
  //解决当u-index-list组件放在tabbar页面时,scroll-view内容较少时,还能滚动
194
- let customNavHeight = uni.$u.getPx(this.customNavHeight)
196
+ let customNavHeight = getPx(this.customNavHeight)
195
197
  this.scrollViewHeight = this.sys.windowHeight - customNavHeight
196
198
  },
197
199
  // 索引列表被触摸
@@ -226,7 +228,7 @@
226
228
  // 触摸结束
227
229
  touchEnd(e) {
228
230
  // 延时一定时间后再隐藏指示器,为了让用户看的更直观,同时也是为了消除快速切换u-transition的show带来的影响
229
- uni.$u.sleep(300).then(() => {
231
+ sleep(300).then(() => {
230
232
  this.touching = false
231
233
  })
232
234
  },
@@ -254,7 +256,7 @@
254
256
  const {
255
257
  height
256
258
  } = size
257
- const sys = uni.$u.sys()
259
+ const sys = sys()
258
260
  const windowHeight = sys.windowHeight
259
261
  let customNavHeight = 0
260
262
  // 消除各端导航栏非原生和原生导致的差异,让索引列表字母对屏幕垂直居中
@@ -267,7 +269,7 @@
267
269
  customNavHeight = -(sys.statusBarHeight + 44)
268
270
  // #endif
269
271
  } else {
270
- customNavHeight = uni.$u.getPx(this.customNavHeight)
272
+ customNavHeight = getPx(this.customNavHeight)
271
273
  }
272
274
  this.letterInfo = {
273
275
  height,
@@ -286,7 +288,7 @@
286
288
  } = this.letterInfo
287
289
  // 对H5的pageY进行修正,这是由于uni-app自作多情在H5中将触摸点的坐标跟H5的导航栏结合导致的问题
288
290
  // #ifdef H5
289
- pageY += uni.$u.sys().windowTop
291
+ pageY += sys().windowTop
290
292
  // #endif
291
293
  // 对第一和最后一个字母做边界处理,因为用户可能在字母列表上触摸到两端的尽头后依然继续滑动
292
294
  if (pageY < top) {
@@ -311,7 +313,7 @@
311
313
  // #ifdef MP-WEIXIN
312
314
  // 微信小程序下,scroll-view的scroll-into-view属性无法对slot中的内容的id生效,只能通过设置scrollTop的形式去移动滚动条
313
315
  const customNavHeight = this.customNavHeight
314
- this.scrollTop = this.children[currentIndex].top - uni.$u.getPx(customNavHeight)
316
+ this.scrollTop = this.children[currentIndex].top - getPx(customNavHeight)
315
317
  // #endif
316
318
  // #ifdef APP-NVUE
317
319
  // 在nvue中,由于cell和header为同级元素,所以实际是需要对header(anchor)进行偏移
@@ -335,7 +337,7 @@
335
337
  if (this.touching || this.scrolling) return
336
338
  // 每过一定时间取样一次,减少资源损耗以及可能带来的卡顿
337
339
  this.scrolling = true
338
- uni.$u.sleep(10).then(() => {
340
+ sleep(10).then(() => {
339
341
  this.scrolling = false
340
342
  })
341
343
  let scrollTop = 0
@@ -44,7 +44,6 @@
44
44
  @focus="onFocus"
45
45
  @confirm="onConfirm"
46
46
  @keyboardheightchange="onkeyboardheightchange"
47
- @change="onInput"
48
47
  />
49
48
  </view>
50
49
  <view
@@ -77,8 +76,9 @@
77
76
 
78
77
  <script>
79
78
  import props from "./props.js";
80
- import mpMixin from '../../libs/mixin/mpMixin.js';
81
- import mixin from '../../libs/mixin/mixin.js';
79
+ import mpMixin from '../../libs/mixin/mpMixin';
80
+ import mixin from '../../libs/mixin/mixin';
81
+ import { addStyle, addUnit, deepMerge, formValidate, $parent, sleep, os } from '../../libs/function/index';
82
82
  /**
83
83
  * Input 输入框
84
84
  * @description 此组件为一个输入框,默认没有边框和样式,是专门为配合表单组件u-form而设计的,利用它可以快速实现表单验证,输入内容,下拉选择等功能。
@@ -126,6 +126,8 @@ export default {
126
126
  mixins: [mpMixin, mixin, props],
127
127
  data() {
128
128
  return {
129
+ // 清除操作
130
+ clearInput: false,
129
131
  // 输入框的值
130
132
  innerValue: "",
131
133
  // 是否处于获得焦点状态
@@ -153,7 +155,7 @@ export default {
153
155
  this.valueChange();
154
156
  } else {
155
157
  // 尝试调用u-form的验证方法
156
- uni.$u.formValidate(this, "change");
158
+ formValidate(this, "change");
157
159
  }
158
160
  /* #endif */
159
161
  this.firstChange = false;
@@ -176,7 +178,7 @@ export default {
176
178
  this.valueChange();
177
179
  } else {
178
180
  // 尝试调用u-form的验证方法
179
- uni.$u.formValidate(this, "change");
181
+ formValidate(this, "change");
180
182
  }
181
183
  /* #endif */
182
184
  this.firstChange = false;
@@ -223,13 +225,13 @@ export default {
223
225
  style.paddingLeft = "9px";
224
226
  style.paddingRight = "9px";
225
227
  }
226
- return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
228
+ return deepMerge(style, addStyle(this.customStyle));
227
229
  },
228
230
  // 输入框的样式
229
231
  inputStyle() {
230
232
  const style = {
231
233
  color: this.color,
232
- fontSize: uni.$u.addUnit(this.fontSize),
234
+ fontSize: addUnit(this.fontSize),
233
235
  textAlign: this.inputAlign
234
236
  };
235
237
  return style;
@@ -261,11 +263,11 @@ export default {
261
263
  this.$emit("blur", event.detail.value);
262
264
  // H5端的blur会先于点击清除控件的点击click事件触发,导致focused
263
265
  // 瞬间为false,从而隐藏了清除控件而无法被点击到
264
- uni.$u.sleep(150).then(() => {
266
+ sleep(150).then(() => {
265
267
  this.focused = false;
266
268
  });
267
269
  // 尝试调用u-form的验证方法
268
- uni.$u.formValidate(this, "blur");
270
+ formValidate(this, "blur");
269
271
  },
270
272
  // 输入框聚焦时触发
271
273
  onFocus(event) {
@@ -283,6 +285,10 @@ export default {
283
285
  },
284
286
  // 内容发生变化,进行处理
285
287
  valueChange() {
288
+ if(this.clearInput) {
289
+ this.innerValue = '';
290
+ this.clearInput = false;
291
+ }
286
292
  const value = this.innerValue;
287
293
  this.$nextTick(() => {
288
294
  // #ifdef VUE3
@@ -295,11 +301,12 @@ export default {
295
301
  this.changeFromInner = true;
296
302
  this.$emit("change", value);
297
303
  // 尝试调用u-form的验证方法
298
- uni.$u.formValidate(this, "change");
304
+ formValidate(this, "change");
299
305
  });
300
306
  },
301
307
  // 点击清除控件
302
308
  onClear() {
309
+ this.clearInput = true;
303
310
  this.innerValue = "";
304
311
  this.$nextTick(() => {
305
312
  this.valueChange();
@@ -313,8 +320,8 @@ export default {
313
320
  */
314
321
  clickHandler() {
315
322
  // #ifdef APP-NVUE
316
- if (uni.$u.os() === "android") {
317
- const formItem = uni.$u.$parent.call(this, "u-form-item");
323
+ if (os() === "android") {
324
+ const formItem = $parent.call(this, "u-form-item");
318
325
  if (formItem) {
319
326
  formItem.clickHandler();
320
327
  }
@@ -68,9 +68,9 @@
68
68
  </template>
69
69
 
70
70
  <script>
71
- import props from './props.js';
72
- import mpMixin from '../../libs/mixin/mpMixin.js';
73
- import mixin from '../../libs/mixin/mixin.js';
71
+ import props from './props';
72
+ import mpMixin from '../../libs/mixin/mpMixin';
73
+ import mixin from '../../libs/mixin/mixin';
74
74
 
75
75
  /**
76
76
  * keyboard 键盘
@@ -8,9 +8,10 @@
8
8
  </template>
9
9
 
10
10
  <script>
11
- import props from './props.js';
12
- import mpMixin from '../../libs/mixin/mpMixin.js';
13
- import mixin from '../../libs/mixin/mixin.js';
11
+ import props from './props';
12
+ import mpMixin from '../../libs/mixin/mpMixin';
13
+ import mixin from '../../libs/mixin/mixin';
14
+ import { addUnit, addStyle, deepMerge } from '../../libs/function/index';
14
15
  /**
15
16
  * line 线条
16
17
  * @description 此组件一般用于显示一根线条,用于分隔内容块,有横向和竖向两种模式,且能设置0.5px线条,使用也很简单
@@ -36,18 +37,18 @@
36
37
  // 此处采用兼容分开写,兼容nvue的写法
37
38
  style.borderBottomWidth = '1px'
38
39
  style.borderBottomStyle = this.dashed ? 'dashed' : 'solid'
39
- style.width = uni.$u.addUnit(this.length)
40
+ style.width = addUnit(this.length)
40
41
  if (this.hairline) style.transform = 'scaleY(0.5)'
41
42
  } else {
42
43
  // 如果是竖向线条,边框宽度为1px,再通过transform缩小一半,就是0.5px了
43
44
  style.borderLeftWidth = '1px'
44
45
  style.borderLeftStyle = this.dashed ? 'dashed' : 'solid'
45
- style.height = uni.$u.addUnit(this.length)
46
+ style.height = addUnit(this.length)
46
47
  if (this.hairline) style.transform = 'scaleX(0.5)'
47
48
  }
48
49
 
49
50
  style.borderColor = this.color
50
- return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
51
+ return deepMerge(style, addStyle(this.customStyle))
51
52
  }
52
53
  }
53
54
  }
@@ -1,14 +1,14 @@
1
1
  <template>
2
2
  <view
3
3
  class="u-line-progress"
4
- :style="[$u.addStyle(customStyle)]"
4
+ :style="[addStyle(customStyle)]"
5
5
  >
6
6
  <view
7
7
  class="u-line-progress__background"
8
8
  ref="u-line-progress__background"
9
9
  :style="[{
10
10
  backgroundColor: inactiveColor,
11
- height: $u.addUnit(height),
11
+ height: addUnit(height),
12
12
  }]"
13
13
  >
14
14
  </view>
@@ -24,9 +24,10 @@
24
24
  </template>
25
25
 
26
26
  <script>
27
- import props from './props.js';
28
- import mpMixin from '../../libs/mixin/mpMixin.js';
29
- import mixin from '../../libs/mixin/mixin.js';
27
+ import props from './props';
28
+ import mpMixin from '../../libs/mixin/mpMixin';
29
+ import mixin from '../../libs/mixin/mixin';
30
+ import { addUnit, addStyle, sleep, range } from '../../libs/function/index';
30
31
  // #ifdef APP-NVUE
31
32
  const dom = uni.requireNativePlugin('dom')
32
33
  // #endif
@@ -60,20 +61,22 @@
60
61
  let style = {}
61
62
  style.width = this.lineWidth
62
63
  style.backgroundColor = this.activeColor
63
- style.height = uni.$u.addUnit(this.height)
64
+ style.height = addUnit(this.height)
64
65
  return style
65
66
  },
66
67
  innserPercentage() {
67
68
  // 控制范围在0-100之间
68
- return uni.$u.range(0, 100, this.percentage)
69
+ return range(0, 100, this.percentage)
69
70
  }
70
71
  },
71
72
  mounted() {
72
73
  this.init()
73
74
  },
74
75
  methods: {
76
+ addStyle,
77
+ addUnit,
75
78
  init() {
76
- uni.$u.sleep(20).then(() => {
79
+ sleep(20).then(() => {
77
80
  this.resizeProgressWidth()
78
81
  })
79
82
  },
@@ -2,15 +2,15 @@
2
2
  <text
3
3
  class="u-link"
4
4
  @tap.stop="openLink"
5
- :style="[linkStyle, $u.addStyle(customStyle)]"
5
+ :style="[linkStyle, addStyle(customStyle)]"
6
6
  >{{text}}</text>
7
7
  </template>
8
8
 
9
9
  <script>
10
- import props from './props.js';
11
- import mpMixin from '../../libs/mixin/mpMixin.js';
12
- import mixin from '../../libs/mixin/mixin.js';
13
-
10
+ import props from './props';
11
+ import mpMixin from '../../libs/mixin/mpMixin';
12
+ import mixin from '../../libs/mixin/mixin';
13
+ import { addStyle, addUnit, getPx, toast } from '../../libs/function/index';
14
14
  /**
15
15
  * link 超链接
16
16
  * @description 该组件为超链接组件,在不同平台有不同表现形式:在APP平台会通过plus环境打开内置浏览器,在小程序中把链接复制到粘贴板,同时提示信息,在H5中通过window.open打开链接。
@@ -33,9 +33,9 @@
33
33
  linkStyle() {
34
34
  const style = {
35
35
  color: this.color,
36
- fontSize: uni.$u.addUnit(this.fontSize),
36
+ fontSize: addUnit(this.fontSize),
37
37
  // line-height设置为比字体大小多2px
38
- lineHeight: uni.$u.addUnit(uni.$u.getPx(this.fontSize) + 2),
38
+ lineHeight: addUnit(getPx(this.fontSize) + 2),
39
39
  textDecoration: this.underLine ? 'underline' : 'none'
40
40
  }
41
41
  // if (this.underLine) {
@@ -47,6 +47,7 @@
47
47
  },
48
48
  emits: ["click"],
49
49
  methods: {
50
+ addStyle,
50
51
  openLink() {
51
52
  // #ifdef APP-PLUS
52
53
  plus.runtime.openURL(this.href)
@@ -60,7 +61,7 @@
60
61
  success: () => {
61
62
  uni.hideToast();
62
63
  this.$nextTick(() => {
63
- uni.$u.toast(this.mpTips);
64
+ toast(this.mpTips);
64
65
  })
65
66
  }
66
67
  });