drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Tooltip add prop theme

Browse source
This commit is contained in:
梁灏 2018-06-22 15:04:38 +08:00
parent 46c07066c8
commit 16e850535b
2 changed files with 59 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
examples/routers/tooltip.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<Tooltip always placement="top" transfer :content="text" :delay="1000" theme="dark"> <Tooltip always placement="top" transfer :content="text" :delay="1000" theme="light">
<Button @click="disabled = true">延时1秒显示</Button> <Button @click="disabled = true">延时1秒显示</Button>
</Tooltip> </Tooltip>
<Tooltip placement="top" transfer :content="text"> <Tooltip placement="top" transfer :content="text">

61
src/styles/components/tooltip.less
View file

@ -3,7 +3,11 @@
@tooltip-max-width: 250px; @tooltip-max-width: 250px;
@tooltip-arrow-width: 5px; @tooltip-arrow-width: 5px;
@tooltip-distance: @tooltip-arrow-width - 1 + 4; @tooltip-distance: @tooltip-arrow-width - 1 + 4;
@poptip-arrow-color: hsla(0,0%,85%,.5);
@tooltip-arrow-width-light: 7px;
@tooltip-distance-light: @tooltip-arrow-width-light - 1 + 4;
@tooltip-arrow-outer-width-light: (@tooltip-arrow-width-light + 1);
@tooltip-arrow-color: hsla(0,0%,85%,.5);
.@{tooltip-prefix-cls} { .@{tooltip-prefix-cls} {
display: inline-block; display: inline-block;
@ -17,9 +21,44 @@
.popper(@tooltip-arrow, @tooltip-arrow-width, @tooltip-distance, @tooltip-bg); .popper(@tooltip-arrow, @tooltip-arrow-width, @tooltip-distance, @tooltip-bg);
} }
&-light&-popper{ &-light&-popper{
.popper(@tooltip-arrow, @tooltip-arrow-width, @tooltip-distance, @poptip-arrow-color); .popper(@tooltip-arrow, @tooltip-arrow-width-light, @tooltip-distance-light, @tooltip-arrow-color);
}
&[x-placement^="top"] .@{tooltip-arrow}:after {
content: " ";
bottom: 1px;
margin-left: -@tooltip-arrow-width-light;
border-bottom-width: 0;
border-top-width: @tooltip-arrow-width-light;
border-top-color: #fff;
}
&[x-placement^="right"] .@{tooltip-arrow}:after {
content: " ";
left: 1px;
bottom: -@tooltip-arrow-width-light;
border-left-width: 0;
border-right-width: @tooltip-arrow-width-light;
border-right-color: #fff;
}
&[x-placement^="bottom"] .@{tooltip-arrow}:after {
content: " ";
top: 1px;
margin-left: -@tooltip-arrow-width-light;
border-top-width: 0;
border-bottom-width: @tooltip-arrow-width-light;
border-bottom-color: #fff;
}
&[x-placement^="left"] .@{tooltip-arrow}:after {
content: " ";
right: 1px;
border-right-width: 0;
border-left-width: @tooltip-arrow-width-light;
border-left-color: #fff;
bottom: -@tooltip-arrow-width-light;
}
}
&-inner{ &-inner{
max-width: @tooltip-max-width; max-width: @tooltip-max-width;
@ -46,4 +85,20 @@
border-color: transparent; border-color: transparent;
border-style: solid; border-style: solid;
} }
&-light {
.@{tooltip-arrow}{
&:after{
display: block;
width: 0;
height: 0;
position: absolute;
border-color: transparent;
border-style: solid;
content: "";
border-width: @tooltip-arrow-width-light;
}
border-width: @tooltip-arrow-outer-width-light;
}
}
} }