Skip to content

Commit 3b26e78

Browse files
DewyzeeDewyzee
authored
Merge pull request #8 from iview/dewyzee/dev
add new components
2 parents 531da4b + b84141c commit 3b26e78

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

95 files changed

+4393
-10
lines changed

‎dist/components/button/button.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,15 @@ export default {
2929
props: {
3030
type: {
3131
type: String,
32-
default: 'primary',
32+
default: '',
3333
},
3434
inline: {
3535
type: Boolean,
3636
default: false
3737
},
3838
size: {
3939
type: String,
40-
default: 'default',
40+
default: '',
4141
},
4242
shape: {
4343
type: String,

‎dist/components/drawer/drawer.vue

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<template>
2+
<div class="i-drawer" :class="classObj">
3+
<div v-if="mask" class="i-drawer-mask" @click="handleMaskClick"></div>
4+
<div class="i-drawer-container">
5+
<slot></slot>
6+
</div>
7+
</div>
8+
</template>
9+
10+
<script>
11+
export default {
12+
props: {
13+
visible: {
14+
type: Boolean,
15+
default: false
16+
},
17+
mask: {
18+
type: Boolean,
19+
default: true
20+
},
21+
maskClosable: {
22+
type: Boolean,
23+
default: true
24+
},
25+
mode: {
26+
type: String,
27+
default: 'left'
28+
},
29+
iClass: {
30+
type: String,
31+
default: ''
32+
}
33+
},
34+
computed: {
35+
classObj() {
36+
const showClass = this.visible ? 'i-drawer-show' : ''
37+
const modeClass = 'i-drawer-' + this.mode
38+
return this.iClass + ' ' + showClass + ' ' + modeClass
39+
}
40+
},
41+
methods: {
42+
handleMaskClick(evt) {
43+
if (!this.maskClosable) {
44+
return
45+
}
46+
this.$emit('click', evt)
47+
}
48+
}
49+
}
50+
</script>
51+

‎dist/components/drawer/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import drawer from 'drawer.vue'
2+
3+
export default drawer

‎dist/components/drawer/style/css.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import './drawer.css'

‎dist/components/drawer/style/drawer.css

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
.i-drawer {
2+
visibility: hidden;
3+
}
4+
.i-drawer-show {
5+
visibility: visible;
6+
}
7+
.i-drawer-show .i-drawer-mask {
8+
display: block;
9+
opacity: 1;
10+
}
11+
.i-drawer-show .i-drawer-container {
12+
opacity: 1;
13+
}
14+
.i-drawer-show.i-drawer-left .i-drawer-container,
15+
.i-drawer-show.i-drawer-right .i-drawer-container {
16+
-webkit-transform: translate3d(0, -50%, 0);
17+
transform: translate3d(0, -50%, 0);
18+
}
19+
.i-drawer-mask {
20+
opacity: 0;
21+
position: fixed;
22+
top: 0;
23+
left: 0;
24+
right: 0;
25+
bottom: 0;
26+
z-index: 6;
27+
background: rgba(0, 0, 0, 0.6);
28+
-webkit-transition: all 0.3s ease-in-out;
29+
transition: all 0.3s ease-in-out;
30+
}
31+
.i-drawer-container {
32+
position: fixed;
33+
left: 50%;
34+
top: 50%;
35+
-webkit-transform: translate3d(-50%, -50%, 0);
36+
transform: translate3d(-50%, -50%, 0);
37+
-webkit-transform-origin: center;
38+
-ms-transform-origin: center;
39+
transform-origin: center;
40+
-webkit-transition: all 0.3s ease-in-out;
41+
transition: all 0.3s ease-in-out;
42+
z-index: 7;
43+
opacity: 0;
44+
}
45+
.i-drawer-left .i-drawer-container {
46+
left: 0;
47+
top: 50%;
48+
-webkit-transform: translate3d(-100%, -50%, 0);
49+
transform: translate3d(-100%, -50%, 0);
50+
}
51+
.i-drawer-right .i-drawer-container {
52+
right: 0;
53+
top: 50%;
54+
left: auto;
55+
-webkit-transform: translate3d(100%, -50%, 0);
56+
transform: translate3d(100%, -50%, 0);
57+
}

‎dist/components/drawer/style/drawer.less

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
@import '../../common/_base.less';
2+
@import '../../common/_mixins.less';
3+
4+
@drawer-prefix-cls: i-drawer;
5+
6+
.@{drawer-prefix-cls} {
7+
visibility: hidden;
8+
&-show {
9+
visibility: visible;
10+
& .@{drawer-prefix-cls}-mask {
11+
display: block;
12+
opacity: 1;
13+
}
14+
& .@{drawer-prefix-cls}-container {
15+
opacity: 1;
16+
}
17+
&.@{drawer-prefix-cls}-left,
18+
&.@{drawer-prefix-cls}-right {
19+
& .@{drawer-prefix-cls}-container {
20+
transform: translate3d(0, -50%, 0);
21+
}
22+
}
23+
}
24+
&-mask {
25+
//display: none;
26+
opacity: 0;
27+
position: fixed;
28+
top: 0;
29+
left: 0;
30+
right: 0;
31+
bottom: 0;
32+
z-index: 6;
33+
background: rgba(0, 0, 0, 0.6);
34+
transition: all 0.3s ease-in-out;
35+
}
36+
&-container {
37+
position: fixed;
38+
left: 50%;
39+
top: 50%;
40+
transform: translate3d(-50%, -50%, 0);
41+
transform-origin: center;
42+
transition: all 0.3s ease-in-out;
43+
z-index: 7;
44+
opacity: 0;
45+
}
46+
&-left {
47+
& .@{drawer-prefix-cls}-container {
48+
left: 0;
49+
top: 50%;
50+
transform: translate3d(-100%, -50%, 0);
51+
}
52+
}
53+
&-right {
54+
& .@{drawer-prefix-cls}-container {
55+
right: 0;
56+
top: 50%;
57+
left: auto;
58+
transform: translate3d(100%, -50%, 0);
59+
}
60+
}
61+
}

‎dist/components/drawer/style/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import './drawer.less'

‎dist/components/icon/icon.vue

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="i-icon" v-bind:class="classObj" v-bind:style="{color: color, fontSize: size + 'px'}"></div>
2+
<div class="i-icon" v-bind:class="classObj" v-bind:style="{color: color, fontSize: size + 'px'}" @click.stop="clickHandle"></div>
33
</template>
44
<script>
55
export default {
@@ -33,6 +33,11 @@ export default {
3333
return this.iClass + ' ' + iconType + ' ' + custom
3434
}
3535
},
36+
methods: {
37+
clickHandle() {
38+
this.$emit('click')
39+
}
40+
}
3641
}
3742
</script>
3843

‎dist/components/notice-bar/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import noticeBar from 'notice-bar.vue'
2+
3+
export default noticeBar

‎dist/components/notice-bar/notice-bar.vue

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
<template>
2+
<div v-if="show" class="i-noticebar" :style="{color: color, backgroundColor: backgroundColor}" :class="iClass">
3+
<i-icon v-if="icon" :type="icon" size="24" i-class="i-noticebar-icon"></i-icon>
4+
<div class="i-noticebar-content-wrap" :class="wrapClassObj">
5+
<div class="i-noticebar-content" :class="classObj" :animation="animationData">
6+
<slot></slot>
7+
</div>
8+
</div>
9+
<i-icon v-if="closable" i-class="i-noticebar-operation" type="close" size="20" :color="color" @click="handleClose"></i-icon>
10+
</div>
11+
</template>
12+
<script>
13+
import icon from '../icon/icon'
14+
export default {
15+
components: {
16+
'i-icon': icon
17+
},
18+
props: {
19+
closable: {
20+
type: Boolean,
21+
default: false
22+
},
23+
icon: {
24+
type: String,
25+
default: ''
26+
},
27+
loop: {
28+
type: Boolean,
29+
default: false
30+
},
31+
backgroundColor: {
32+
type: String,
33+
default: '#fefcec'
34+
},
35+
color: {
36+
type: String,
37+
default: '#f76a24'
38+
},
39+
speed: {
40+
type: Number,
41+
default: 1000
42+
},
43+
iClass: {
44+
type: String,
45+
default: ''
46+
}
47+
},
48+
data() {
49+
const animElemId = "C_" + Math.ceil(Math.random() * 10e5).toString(36);
50+
const wrapElemId = "W_" + Math.ceil(Math.random() * 10e5).toString(36);
51+
return {
52+
show: true,
53+
animationData: null,
54+
animation: null,
55+
timer: null,
56+
wrapWidth: 0,
57+
width: 0,
58+
duration: 0,
59+
animElemId,
60+
wrapElemId
61+
}
62+
},
63+
mounted() {
64+
if (this.loop) {
65+
setTimeout(() => {
66+
this.initAnimation()
67+
}, 100)
68+
}
69+
},
70+
onShow() {
71+
if (this.timer) {
72+
this.destroyTimer()
73+
if (this.loop) {
74+
setTimeout(() => {
75+
this.initAnimation()
76+
}, 100)
77+
}
78+
}
79+
},
80+
computed: {
81+
classObj() {
82+
return this.loop ? 'i-noticebar-content-loop ' + this.animElemId : this.animElemId
83+
},
84+
wrapClassObj() {
85+
return this.wrapElemId
86+
}
87+
},
88+
methods: {
89+
initAnimation() {
90+
const globalMpvue = wx || swan || tt || my
91+
if (!globalMpvue.createSelectorQuery) {
92+
return
93+
}
94+
globalMpvue.createSelectorQuery().in(this.$root.$mp.page).select(`.${this.wrapElemId}`).boundingClientRect()
95+
.select(`.${this.animElemId}`).boundingClientRect()
96+
.exec((retArray) => {
97+
this.createAnimation(globalMpvue, retArray[0], retArray[1])
98+
})
99+
},
100+
startAnimation() {
101+
const resetAction = () => {
102+
const resetAnimation = this.animation.translateX(this.wrapWidth).step()
103+
this.animationData = resetAnimation.export()
104+
}
105+
// 微信小程序
106+
if (this.animation.option && this.animation.option.transition) {
107+
if (this.animation.option.transition.duration !== 0) {
108+
this.animation.option.transition.duration = 0
109+
resetAction()
110+
}
111+
this.animation.option.transition.duration = this.duration
112+
}
113+
// 头条小程序
114+
if (this.animation.option && this.animation.option.hasOwnProperty('duration')) {
115+
if (this.animation.option.duration !== 0) {
116+
this.animation.option.duration = 0
117+
resetAction()
118+
}
119+
this.animation.option.duration = this.duration
120+
}
121+
// 支付宝小程序
122+
if (this.animation.config && this.animation.config.hasOwnProperty('duration')) {
123+
if (this.animation.config.duration !== 0) {
124+
this.animation.config.duration = 0
125+
resetAction()
126+
}
127+
this.animation.config.duration = this.duration
128+
}
129+
// 百度小程序
130+
if (this.animation.hasOwnProperty('duration')) {
131+
if (this.animation.duration !== 0) {
132+
this.animation.duration = 0
133+
resetAction()
134+
}
135+
this.animation.duration = this.duration
136+
}
137+
const animationData = this.animation.translateX(-this.width).step()
138+
setTimeout(() => {
139+
this.animationData = animationData.export()
140+
}, 100)
141+
this.timer = setTimeout(() => {
142+
this.startAnimation()
143+
}, this.duration)
144+
},
145+
createAnimation(globalMpvue, wrapRect, rect) {
146+
const duration = this.duration = rect.width / 40 * this.speed
147+
this.animation = globalMpvue.createAnimation({
148+
duration: duration,
149+
timingFunction: "linear",
150+
})
151+
this.wrapWidth = wrapRect.width
152+
this.width = rect.width
153+
this.startAnimation()
154+
},
155+
destroyTimer() {
156+
if (this.timer) {
157+
clearTimeout(this.timer)
158+
const animationData = this.animation.translateX(this.wrapWidth).step()
159+
this.animationData = animationData.export()
160+
}
161+
},
162+
handleClose() {
163+
console.log(123)
164+
this.destroyTimer()
165+
this.show = false
166+
this.timer = null
167+
}
168+
}
169+
}
170+
</script>
171+

0 commit comments

Comments
 (0)