dolphin-weex-ui 2.0.0 → 2.0.2
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 +15 -0
- package/dist/index.native.js +17 -15
- package/dist/index.native.js.map +1 -1
- package/dist/index.web.js +22 -19
- package/dist/index.web.js.map +1 -1
- package/package.json +1 -1
- package/packages/dof-cell/index.vue +126 -126
- package/packages/dof-refresher/index.vue +4 -5
package/package.json
CHANGED
|
@@ -1,134 +1,131 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div :class="['wrapper', hasMargin && 'cell-margin']" ref="dof-cell" :style="cellStyleComp">
|
|
3
|
-
<div
|
|
4
|
-
|
|
5
|
-
'dof-cell',
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
3
|
+
<div :class="['cell-wrapper', disabled ? 'cell-disabled-opacity' : 'cell-abled-opacity']">
|
|
4
|
+
<div
|
|
5
|
+
:class="['dof-cell', hackMrgb1pxcom && 'mgb-1', !disabled && isHighlight && 'dof-cell-highlight']"
|
|
6
|
+
:style="borderStyleComp"
|
|
7
|
+
:accessible="autoAccessible"
|
|
8
|
+
:aria-label="`${label},${title},${desc}`"
|
|
9
|
+
@click="onClick"
|
|
10
|
+
>
|
|
11
|
+
<slot>
|
|
12
|
+
<!-- left -->
|
|
13
|
+
<div class="left img-wrapper" v-if="avatarIcon || avatarIconFont">
|
|
14
|
+
<div
|
|
15
|
+
v-if="avatarIcon"
|
|
16
|
+
class="img-container circle-bg"
|
|
17
|
+
:class="[badgeNum && 'Dotright32']"
|
|
18
|
+
:style="avatarIconBgSizeComp"
|
|
19
|
+
>
|
|
20
|
+
<slot name="leftImg">
|
|
21
|
+
<image class="left-img" :src="avatarIcon" :style="avatarIconSizeComp"></image>
|
|
22
|
+
</slot>
|
|
23
|
+
</div>
|
|
24
|
+
<div v-if="avatarIconFont" class="circle-bg">
|
|
25
|
+
<dof-iconfont
|
|
26
|
+
:code="avatarIconFont"
|
|
27
|
+
:size="avatarIconFontSize"
|
|
28
|
+
:color="_isColmo ? 'rgba(255,255,255,0.80)' : '#333333'"
|
|
29
|
+
></dof-iconfont>
|
|
30
|
+
</div>
|
|
31
|
+
|
|
32
|
+
<div class="dot-tip" v-if="hasDot" :class="[badgeNum && 'dotRight']" :style="badgeStyle"></div>
|
|
33
|
+
<div class="dot-num-tip" v-else-if="badgeNum" :style="badgeStyle">
|
|
34
|
+
<text class="dot-num-tip-text">{{ dotNum }}</text>
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
|
|
38
|
+
<!-- middle -->
|
|
18
39
|
<div
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
:class="[badgeNum && 'Dotright32']"
|
|
22
|
-
:style="avatarIconBgSizeComp"
|
|
40
|
+
:class="['main-container', hasVerticalIndent && 'cell-indent', badgeNum && 'notDot']"
|
|
41
|
+
:style="subBorderStyleComp"
|
|
23
42
|
>
|
|
24
|
-
<slot name="
|
|
25
|
-
<
|
|
43
|
+
<slot name="label">
|
|
44
|
+
<div v-if="label">
|
|
45
|
+
<text class="cell-label-text" :style="textColorComp">{{ label }}</text>
|
|
46
|
+
</div>
|
|
26
47
|
</slot>
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
<div class="dot-num-tip" v-else-if="badgeNum" :style="badgeStyle">
|
|
38
|
-
<text class="dot-num-tip-text">{{ dotNum }}</text>
|
|
39
|
-
</div>
|
|
40
|
-
</div>
|
|
41
|
-
|
|
42
|
-
<!-- middle -->
|
|
43
|
-
<div
|
|
44
|
-
:class="['main-container', hasVerticalIndent && 'cell-indent', badgeNum && 'notDot']"
|
|
45
|
-
:style="subBorderStyleComp"
|
|
46
|
-
>
|
|
47
|
-
<slot name="label">
|
|
48
|
-
<div v-if="label">
|
|
49
|
-
<text class="cell-label-text" :style="textColorComp">{{ label }}</text>
|
|
50
|
-
</div>
|
|
51
|
-
</slot>
|
|
52
|
-
<div :class="['middle', desc ? 'has-desc' : 'no-desc']" :style="innerCellHeightComp">
|
|
53
|
-
<slot name="middle">
|
|
54
|
-
<div class="cell-title-wrapper">
|
|
55
|
-
<div :class="['cell-title-content', !tag && 'title-flex-expand']">
|
|
56
|
-
<div :class="['cell-title']">
|
|
57
|
-
<text :class="['cell-title-text', !hasTextTip && 'title-flex-expand']" :style="titleStyleComp">{{
|
|
58
|
-
title
|
|
59
|
-
}}</text>
|
|
60
|
-
<div class="text-dot-tip" v-if="hasTextTip"></div>
|
|
48
|
+
<div :class="['middle', desc ? 'has-desc' : 'no-desc']" :style="innerCellHeightComp">
|
|
49
|
+
<slot name="middle">
|
|
50
|
+
<div class="cell-title-wrapper">
|
|
51
|
+
<div :class="['cell-title-content', !tag && 'title-flex-expand']">
|
|
52
|
+
<div :class="['cell-title']">
|
|
53
|
+
<text :class="['cell-title-text', !hasTextTip && 'title-flex-expand']" :style="titleStyleComp">{{
|
|
54
|
+
title
|
|
55
|
+
}}</text>
|
|
56
|
+
<div class="text-dot-tip" v-if="hasTextTip"></div>
|
|
57
|
+
</div>
|
|
61
58
|
</div>
|
|
62
|
-
</div>
|
|
63
59
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
60
|
+
<slot name="tag">
|
|
61
|
+
<div
|
|
62
|
+
class="cell-title-tag"
|
|
63
|
+
v-if="tag"
|
|
64
|
+
:style="{
|
|
65
|
+
backgroundColor: iconColor ? iconColor : '#f2f2f2'
|
|
66
|
+
}"
|
|
67
|
+
>
|
|
68
|
+
<text class="cell-title-tag-text">{{ tag }}</text>
|
|
69
|
+
</div>
|
|
70
|
+
</slot>
|
|
71
|
+
</div>
|
|
72
|
+
<div :class="['cell-desc-wrapper', !tag && !_isColmo && 'margin-top-24']" v-if="desc">
|
|
73
|
+
<slot name="desc">
|
|
74
|
+
<div class="cell-desc">
|
|
75
|
+
<text class="cell-desc-text" :style="descStyleComp">{{ desc }}</text>
|
|
76
|
+
</div>
|
|
77
|
+
</slot>
|
|
78
|
+
</div>
|
|
79
|
+
</slot>
|
|
80
|
+
</div>
|
|
81
|
+
<!-- right -->
|
|
82
|
+
<div :class="['right', rightTip && 'has-no-padding-left']">
|
|
83
|
+
<slot name="rightText">
|
|
84
|
+
<div class="right-text-wrapper" v-if="rightText">
|
|
85
|
+
<text
|
|
86
|
+
:class="[
|
|
87
|
+
'right-text',
|
|
88
|
+
!avatarIcon && 'single-line-text',
|
|
89
|
+
avatarIcon && iconSize === 'big' && 'normal-right-text'
|
|
90
|
+
]"
|
|
91
|
+
:style="rightTextStyleComp"
|
|
92
|
+
>{{ rightText }}</text
|
|
71
93
|
>
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
<
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
94
|
+
</div>
|
|
95
|
+
</slot>
|
|
96
|
+
<text class="extra-content-text" :style="textColorComp" v-if="extraContent">{{ extraContent }}</text>
|
|
97
|
+
<!-- 开关 -->
|
|
98
|
+
<slot name="switch"></slot>
|
|
99
|
+
|
|
100
|
+
<div class="arrow-wrapper" v-if="hasArrow">
|
|
101
|
+
<slot name="arrow">
|
|
102
|
+
<dof-iconfont
|
|
103
|
+
style="width: 34px"
|
|
104
|
+
v-if="_isColmo"
|
|
105
|
+
:code="'\u4713'"
|
|
106
|
+
:size="48"
|
|
107
|
+
:color="'rgba(255,255,255,0.80)'"
|
|
108
|
+
></dof-iconfont>
|
|
109
|
+
<image v-else :src="arrowIcon" class="cell-arrow-icon" :aria-hidden="true"></image>
|
|
81
110
|
</slot>
|
|
82
111
|
</div>
|
|
83
|
-
</
|
|
112
|
+
</div>
|
|
84
113
|
</div>
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
>{{ rightText }}</text
|
|
97
|
-
>
|
|
98
|
-
</div>
|
|
114
|
+
<div
|
|
115
|
+
:class="[
|
|
116
|
+
'right-tip-wrapper',
|
|
117
|
+
hasTopSubBorder && 'cell-top-border',
|
|
118
|
+
hasSubBottomBorder && 'cell-bottom-border',
|
|
119
|
+
special && 'space-gap'
|
|
120
|
+
]"
|
|
121
|
+
v-if="rightTip"
|
|
122
|
+
>
|
|
123
|
+
<slot name="rightTip">
|
|
124
|
+
<text class="right-tip-text" @click="dofRightTipClicked">{{ rightTip }}</text>
|
|
99
125
|
</slot>
|
|
100
|
-
<text class="extra-content-text" :style="textColorComp" v-if="extraContent">{{ extraContent }}</text>
|
|
101
|
-
<!-- 开关 -->
|
|
102
|
-
<slot name="switch"></slot>
|
|
103
|
-
|
|
104
|
-
<div class="arrow-wrapper" v-if="hasArrow">
|
|
105
|
-
<slot name="arrow">
|
|
106
|
-
<dof-iconfont
|
|
107
|
-
style="width: 34px"
|
|
108
|
-
v-if="_isColmo"
|
|
109
|
-
:code="'\u4713'"
|
|
110
|
-
:size="48"
|
|
111
|
-
:color="'rgba(255,255,255,0.80)'"
|
|
112
|
-
></dof-iconfont>
|
|
113
|
-
<image v-else :src="arrowIcon" class="cell-arrow-icon" :aria-hidden="true"></image>
|
|
114
|
-
</slot>
|
|
115
|
-
</div>
|
|
116
126
|
</div>
|
|
117
|
-
</
|
|
118
|
-
|
|
119
|
-
:class="[
|
|
120
|
-
'right-tip-wrapper',
|
|
121
|
-
hasTopSubBorder && 'cell-top-border',
|
|
122
|
-
hasSubBottomBorder && 'cell-bottom-border',
|
|
123
|
-
special && 'space-gap'
|
|
124
|
-
]"
|
|
125
|
-
v-if="rightTip"
|
|
126
|
-
>
|
|
127
|
-
<slot name="rightTip">
|
|
128
|
-
<text class="right-tip-text" @click="dofRightTipClicked">{{ rightTip }}</text>
|
|
129
|
-
</slot>
|
|
130
|
-
</div>
|
|
131
|
-
</slot>
|
|
127
|
+
</slot>
|
|
128
|
+
</div>
|
|
132
129
|
</div>
|
|
133
130
|
<div v-if="useFakeBorder" class="fake-border" :style="fakeBorderStyleRender"></div>
|
|
134
131
|
</div>
|
|
@@ -168,6 +165,9 @@
|
|
|
168
165
|
flex: 1;
|
|
169
166
|
/* align-items: center; */
|
|
170
167
|
}
|
|
168
|
+
.cell-wrapper {
|
|
169
|
+
flex: 1;
|
|
170
|
+
}
|
|
171
171
|
|
|
172
172
|
.mgb-1 {
|
|
173
173
|
margin-bottom: 1px;
|
|
@@ -740,20 +740,20 @@ export default {
|
|
|
740
740
|
let { iconSize, iconColor } = this
|
|
741
741
|
if (iconSize === 'max') {
|
|
742
742
|
return {
|
|
743
|
-
width: '
|
|
744
|
-
height: '
|
|
743
|
+
width: '112px',
|
|
744
|
+
height: '112px',
|
|
745
745
|
borderRadius: '48px',
|
|
746
|
-
marginTop: '
|
|
747
|
-
marginBottom: '
|
|
746
|
+
marginTop: '16px',
|
|
747
|
+
marginBottom: '16px',
|
|
748
748
|
backgroundColor: iconColor ? iconColor : 'transparent'
|
|
749
749
|
}
|
|
750
750
|
} else if (iconSize === 'medium') {
|
|
751
751
|
return {
|
|
752
|
-
width: '
|
|
753
|
-
height: '
|
|
752
|
+
width: '76px',
|
|
753
|
+
height: '76px',
|
|
754
754
|
borderRadius: '32px',
|
|
755
|
-
marginTop: '
|
|
756
|
-
marginBottom: '
|
|
755
|
+
marginTop: '40px',
|
|
756
|
+
marginBottom: '40px',
|
|
757
757
|
backgroundColor: iconColor ? iconColor : 'transparent'
|
|
758
758
|
}
|
|
759
759
|
} else if (iconSize === 'min') {
|
|
@@ -32,8 +32,7 @@ import bindingx from 'weex-bindingx/lib/index.weex'
|
|
|
32
32
|
import BindEnv from '../utils/bind-env'
|
|
33
33
|
import Utils from '../utils'
|
|
34
34
|
|
|
35
|
-
const ICON_ARROW_DOWN =
|
|
36
|
-
'https://img.alicdn.com/tfs/TB1A8faeTtYBeNjy1XdXXXXyVXa-48-48.png'
|
|
35
|
+
const ICON_ARROW_DOWN = 'https://img.alicdn.com/tfs/TB1A8faeTtYBeNjy1XdXXXXyVXa-48-48.png'
|
|
37
36
|
|
|
38
37
|
export default {
|
|
39
38
|
props: {
|
|
@@ -109,9 +108,7 @@ export default {
|
|
|
109
108
|
onPullingDown(event) {
|
|
110
109
|
this.$emit('dofPullingDown', event)
|
|
111
110
|
const pd = event.pullingDistance * (Utils.env.isIOS() ? -1 : 1)
|
|
112
|
-
pd > (Utils.env.isAndroid() ? 200 : 140)
|
|
113
|
-
? (this.couldUnLash = true)
|
|
114
|
-
: (this.couldUnLash = false)
|
|
111
|
+
pd > (Utils.env.isAndroid() ? 200 : 140) ? (this.couldUnLash = true) : (this.couldUnLash = false)
|
|
115
112
|
if (this.refreshing && pd < 20) {
|
|
116
113
|
this.timeoutSto && clearTimeout(this.timeoutSto)
|
|
117
114
|
this.refreshing = false
|
|
@@ -123,6 +120,7 @@ export default {
|
|
|
123
120
|
*/
|
|
124
121
|
animationBinding() {
|
|
125
122
|
setTimeout(() => {
|
|
123
|
+
if (!this.$refs['cover2'] || !this.$refs['cover-cycle']) return
|
|
126
124
|
// 降级版本取不到，需要注意
|
|
127
125
|
const scroller = this.$parent.$refs[this.scrollerRef].ref
|
|
128
126
|
const cover2 = this.$refs['cover2'].ref
|
|
@@ -155,6 +153,7 @@ export default {
|
|
|
155
153
|
*/
|
|
156
154
|
cycleGoRound() {
|
|
157
155
|
if (Utils.env.isAndroid()) return
|
|
156
|
+
if (!this.$refs['cycle']) return
|
|
158
157
|
const cycle = this.$refs['cycle'].ref
|
|
159
158
|
this.arrowShow(false)
|
|
160
159
|
if (!cycle) {
|