update Poptip style

This commit is contained in:
梁灏 2018-06-22 14:47:58 +08:00
parent ac50d539aa
commit 46c07066c8
4 changed files with 22 additions and 3 deletions

View file

@ -1,12 +1,15 @@
<template>
<div>
<Tooltip always placement="top" transfer :content="text" :delay="1000">
<Tooltip always placement="top" transfer :content="text" :delay="1000" theme="dark">
<Button @click="disabled = true">延时1秒显示</Button>
</Tooltip>
<Tooltip placement="top" transfer :content="text">
<Button @click="handleChange">change</Button>
</Tooltip>
<Button @click="handleChange">change</Button>
<Poptip title="Title" content="content">
<Button>Click</Button>
</Poptip>
</div>
</template>
<script>

View file

@ -5,7 +5,7 @@
</div>
<transition name="fade">
<div
:class="[prefixCls + '-popper']"
:class="[prefixCls + '-popper', prefixCls + '-' + theme]"
ref="popper"
v-show="!disabled && (visible || always)"
@mouseenter="handleShowPopper"
@ -61,6 +61,12 @@
transfer: {
type: Boolean,
default: false
},
theme: {
validator (value) {
return oneOf(value, ['dark', 'light']);
},
default: 'dark'
}
},
data () {

View file

@ -1,7 +1,7 @@
@poptip-prefix-cls: ~"@{css-prefix}poptip";
@poptip-arrow: ~"@{poptip-prefix-cls}-arrow";
@poptip-max-width: 250px;
@poptip-arrow-width: 5px;
@poptip-arrow-width: 7px;
@poptip-arrow-outer-width: (@poptip-arrow-width + 1);
@poptip-distance: @poptip-arrow-width - 1 + 4;
//@poptip-arrow-color: fadein(@border-color-base, 5%);

View file

@ -3,6 +3,7 @@
@tooltip-max-width: 250px;
@tooltip-arrow-width: 5px;
@tooltip-distance: @tooltip-arrow-width - 1 + 4;
@poptip-arrow-color: hsla(0,0%,85%,.5);
.@{tooltip-prefix-cls} {
display: inline-block;
@ -15,6 +16,10 @@
&-popper{
.popper(@tooltip-arrow, @tooltip-arrow-width, @tooltip-distance, @tooltip-bg);
}
&-light&-popper{
.popper(@tooltip-arrow, @tooltip-arrow-width, @tooltip-distance, @poptip-arrow-color);
}
&-inner{
max-width: @tooltip-max-width;
@ -29,6 +34,11 @@
white-space: nowrap;
}
&-light &-inner{
background-color: #fff;
color: @text-color;
}
&-arrow{
position: absolute;
width: 0;