forked from didi/mand-mobile
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtip.vue
More file actions
153 lines (140 loc) · 2.83 KB
/
tip.vue
File metadata and controls
153 lines (140 loc) · 2.83 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<template>
<div class="md-tip" :class="wrapperCls">
<div class="md-tip-content">
<template v-if="!$slots.default">
<md-icon
v-if="icon"
class="content-icon"
:name="icon"
:svg="iconSvg"
/>
<div class="content-text" v-text="content"></div>
</template>
<template v-else>
<slot></slot>
</template>
<md-icon
v-if="closable"
name="close"
size="md"
@click.native="$_onClose"
/>
</div>
<div class="md-tip-bg"></div>
</div>
</template>
<script>import Icon from '../icon'
export default {
name: 'md-tip-content',
components: {
[Icon.name]: Icon,
},
props: {
placement: {
type: String,
},
closable: {
type: Boolean,
default: true,
},
icon: {
type: String,
},
iconSvg: {
type: Boolean,
},
content: {
type: [String, Number],
},
name: {
type: [String, Number],
},
},
computed: {
wrapperCls() {
return {
'has-close': this.closable,
[`is-${this.placement}`]: ['left', 'bottom', 'right'].indexOf(this.placement) !== -1,
[this.name]: !!this.name,
}
},
},
methods: {
$_onClose() {
this.$emit('close')
},
},
}
</script>
<style lang="stylus">
.md-tip
position relative
display inline-block
// max-width 400px
z-index tip-zindex
.md-tip-content
clearfix()
position relative
padding tip-padding
color tip-color
font-size tip-font-size
line-height 1.2
z-index 2
.content-icon
float left
margin-right 14px
.content-text
float left
margin-top 2px
.md-tip-bg
position absolute
absolute-pos()
border-radius tip-radius
background-color tip-fill
box-shadow tip-shadow
opacity tip-fill-opacity
&::after
content ''
position absolute
bottom -10px
left 50%
margin-left -11px
width 0
height 0
border-style solid
border-width 10px 11px 0 11px
border-color tip-fill transparent transparent transparent
.md-tip
&.has-close
.md-tip-content
padding-right 60px
&.is-bottom
.md-tip-bg::after
bottom auto
top -10px
border-width 0 11px 10px 11px
border-color transparent transparent tip-fill transparent
&.is-left
.md-tip-bg::after
top 50%
right -6px
left auto
margin-top -11px
border-width 11px 0 11px 10px
border-color transparent transparent transparent tip-fill
&.is-right
.md-tip-bg::after
top 50%
left 4px
margin-top -11px
border-width 11px 10px 11px 0
border-color transparent tip-fill transparent transparent
.md-icon.md-icon-close
position absolute
right 16px
top 50%
width tip-close-size
height tip-close-size
transform translateY(-50%)
</style>