Commit 46c07066c86d58864fd0ee1e25465c6fd3653027
1 parent
ac50d539
update Poptip style
Showing
4 changed files
with
22 additions
and
3 deletions
Show diff stats
examples/routers/tooltip.vue
| 1 | <template> | 1 | <template> |
| 2 | <div> | 2 | <div> |
| 3 | - <Tooltip always placement="top" transfer :content="text" :delay="1000"> | 3 | + <Tooltip always placement="top" transfer :content="text" :delay="1000" theme="dark"> |
| 4 | <Button @click="disabled = true">延时1秒显示</Button> | 4 | <Button @click="disabled = true">延时1秒显示</Button> |
| 5 | </Tooltip> | 5 | </Tooltip> |
| 6 | <Tooltip placement="top" transfer :content="text"> | 6 | <Tooltip placement="top" transfer :content="text"> |
| 7 | <Button @click="handleChange">change</Button> | 7 | <Button @click="handleChange">change</Button> |
| 8 | </Tooltip> | 8 | </Tooltip> |
| 9 | <Button @click="handleChange">change</Button> | 9 | <Button @click="handleChange">change</Button> |
| 10 | + <Poptip title="Title" content="content"> | ||
| 11 | + <Button>Click</Button> | ||
| 12 | + </Poptip> | ||
| 10 | </div> | 13 | </div> |
| 11 | </template> | 14 | </template> |
| 12 | <script> | 15 | <script> |
src/components/tooltip/tooltip.vue
| @@ -5,7 +5,7 @@ | @@ -5,7 +5,7 @@ | ||
| 5 | </div> | 5 | </div> |
| 6 | <transition name="fade"> | 6 | <transition name="fade"> |
| 7 | <div | 7 | <div |
| 8 | - :class="[prefixCls + '-popper']" | 8 | + :class="[prefixCls + '-popper', prefixCls + '-' + theme]" |
| 9 | ref="popper" | 9 | ref="popper" |
| 10 | v-show="!disabled && (visible || always)" | 10 | v-show="!disabled && (visible || always)" |
| 11 | @mouseenter="handleShowPopper" | 11 | @mouseenter="handleShowPopper" |
| @@ -61,6 +61,12 @@ | @@ -61,6 +61,12 @@ | ||
| 61 | transfer: { | 61 | transfer: { |
| 62 | type: Boolean, | 62 | type: Boolean, |
| 63 | default: false | 63 | default: false |
| 64 | + }, | ||
| 65 | + theme: { | ||
| 66 | + validator (value) { | ||
| 67 | + return oneOf(value, ['dark', 'light']); | ||
| 68 | + }, | ||
| 69 | + default: 'dark' | ||
| 64 | } | 70 | } |
| 65 | }, | 71 | }, |
| 66 | data () { | 72 | data () { |
src/styles/components/poptip.less
| 1 | @poptip-prefix-cls: ~"@{css-prefix}poptip"; | 1 | @poptip-prefix-cls: ~"@{css-prefix}poptip"; |
| 2 | @poptip-arrow: ~"@{poptip-prefix-cls}-arrow"; | 2 | @poptip-arrow: ~"@{poptip-prefix-cls}-arrow"; |
| 3 | @poptip-max-width: 250px; | 3 | @poptip-max-width: 250px; |
| 4 | -@poptip-arrow-width: 5px; | 4 | +@poptip-arrow-width: 7px; |
| 5 | @poptip-arrow-outer-width: (@poptip-arrow-width + 1); | 5 | @poptip-arrow-outer-width: (@poptip-arrow-width + 1); |
| 6 | @poptip-distance: @poptip-arrow-width - 1 + 4; | 6 | @poptip-distance: @poptip-arrow-width - 1 + 4; |
| 7 | //@poptip-arrow-color: fadein(@border-color-base, 5%); | 7 | //@poptip-arrow-color: fadein(@border-color-base, 5%); |
src/styles/components/tooltip.less
| @@ -3,6 +3,7 @@ | @@ -3,6 +3,7 @@ | ||
| 3 | @tooltip-max-width: 250px; | 3 | @tooltip-max-width: 250px; |
| 4 | @tooltip-arrow-width: 5px; | 4 | @tooltip-arrow-width: 5px; |
| 5 | @tooltip-distance: @tooltip-arrow-width - 1 + 4; | 5 | @tooltip-distance: @tooltip-arrow-width - 1 + 4; |
| 6 | +@poptip-arrow-color: hsla(0,0%,85%,.5); | ||
| 6 | 7 | ||
| 7 | .@{tooltip-prefix-cls} { | 8 | .@{tooltip-prefix-cls} { |
| 8 | display: inline-block; | 9 | display: inline-block; |
| @@ -15,6 +16,10 @@ | @@ -15,6 +16,10 @@ | ||
| 15 | &-popper{ | 16 | &-popper{ |
| 16 | .popper(@tooltip-arrow, @tooltip-arrow-width, @tooltip-distance, @tooltip-bg); | 17 | .popper(@tooltip-arrow, @tooltip-arrow-width, @tooltip-distance, @tooltip-bg); |
| 17 | } | 18 | } |
| 19 | + &-light&-popper{ | ||
| 20 | + .popper(@tooltip-arrow, @tooltip-arrow-width, @tooltip-distance, @poptip-arrow-color); | ||
| 21 | + } | ||
| 22 | + | ||
| 18 | 23 | ||
| 19 | &-inner{ | 24 | &-inner{ |
| 20 | max-width: @tooltip-max-width; | 25 | max-width: @tooltip-max-width; |
| @@ -29,6 +34,11 @@ | @@ -29,6 +34,11 @@ | ||
| 29 | white-space: nowrap; | 34 | white-space: nowrap; |
| 30 | } | 35 | } |
| 31 | 36 | ||
| 37 | + &-light &-inner{ | ||
| 38 | + background-color: #fff; | ||
| 39 | + color: @text-color; | ||
| 40 | + } | ||
| 41 | + | ||
| 32 | &-arrow{ | 42 | &-arrow{ |
| 33 | position: absolute; | 43 | position: absolute; |
| 34 | width: 0; | 44 | width: 0; |