152 lines
2.8 KiB
Vue
152 lines
2.8 KiB
Vue
<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>
|