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