97 lines
1.9 KiB
Vue
97 lines
1.9 KiB
Vue
<template>
|
|
<div class="md-tip" :class="wrapperCls">
|
|
<template>{{content}}</template>
|
|
<md-icon name="cross" size="md" @click.native="$_onClose" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Icon from '../icon'
|
|
|
|
export default {
|
|
name: 'md-tip-content',
|
|
components: {
|
|
[Icon.name]: Icon,
|
|
},
|
|
|
|
props: {
|
|
placement: {
|
|
type: String,
|
|
},
|
|
content: {
|
|
type: String,
|
|
},
|
|
},
|
|
|
|
computed: {
|
|
wrapperCls() {
|
|
const cls = {}
|
|
|
|
if (['left', 'bottom', 'right'].indexOf(this.placement) !== -1) {
|
|
cls[`is-${this.placement}`] = true
|
|
}
|
|
|
|
return cls
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
$_onClose() {
|
|
this.$emit('close')
|
|
},
|
|
},
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
<style lang="stylus">
|
|
.md-tip
|
|
display inline-block
|
|
max-width 400px
|
|
color tip-color
|
|
font-size tip-font-size
|
|
padding 20px 50px 20px 30px
|
|
border-radius 4px
|
|
background-color tip-fill
|
|
z-index tip-zindex
|
|
&::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
|
|
&.is-bottom::after
|
|
bottom auto
|
|
top -10px
|
|
border-width 0 11px 10px 11px
|
|
border-color transparent transparent tip-fill transparent
|
|
&.is-left::after
|
|
bottom auto
|
|
right -10px
|
|
left auto
|
|
top 50%
|
|
margin-left 0
|
|
margin-top -11px
|
|
border-width 11px 0 11px 10px
|
|
border-color transparent transparent transparent tip-fill
|
|
&.is-right::after
|
|
bottom auto
|
|
left -10px
|
|
right auto
|
|
top 50%
|
|
margin-left 0
|
|
margin-top -11px
|
|
border-width 11px 10px 11px 0
|
|
border-color transparent tip-fill transparent transparent
|
|
svg
|
|
position absolute
|
|
right 16px
|
|
top 20px
|
|
width 16px
|
|
height 16px
|
|
</style>
|