chenhaodong / mew-iview

Commit 16e850535bda62da9fe3a42ffad2aa4206727f77

Authored by 梁灏
1 parent 46c07066

Tooltip add prop theme

Showing 2 changed files with 59 additions and 4 deletions   Show diff stats
Inline Side-by-side
examples/routers/tooltip.vue
  Show/Hide comments   View file @16e8505
1 <template> 1 <template>
2 <div> 2 <div>
3 - <Tooltip always placement="top" transfer :content="text" :delay="1000" theme="dark"> 3 + <Tooltip always placement="top" transfer :content="text" :delay="1000" theme="light">
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">
src/styles/components/tooltip.less
  Show/Hide comments   View file @16e8505
@@ -3,7 +3,11 @@ @@ -3,7 +3,11 @@
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 +@tooltip-arrow-width-light: 7px;
  8 +@tooltip-distance-light: @tooltip-arrow-width-light - 1 + 4;
  9 +@tooltip-arrow-outer-width-light: (@tooltip-arrow-width-light + 1);
  10 +@tooltip-arrow-color: hsla(0,0%,85%,.5);
7 11
8 .@{tooltip-prefix-cls} { 12 .@{tooltip-prefix-cls} {
9 display: inline-block; 13 display: inline-block;
@@ -17,9 +21,44 @@ @@ -17,9 +21,44 @@
17 .popper(@tooltip-arrow, @tooltip-arrow-width, @tooltip-distance, @tooltip-bg); 21 .popper(@tooltip-arrow, @tooltip-arrow-width, @tooltip-distance, @tooltip-bg);
18 } 22 }
19 &-light&-popper{ 23 &-light&-popper{
20 - .popper(@tooltip-arrow, @tooltip-arrow-width, @tooltip-distance, @poptip-arrow-color);  
21 - } 24 + .popper(@tooltip-arrow, @tooltip-arrow-width-light, @tooltip-distance-light, @tooltip-arrow-color);
  25 +
  26 + &[x-placement^="top"] .@{tooltip-arrow}:after {
  27 + content: " ";
  28 + bottom: 1px;
  29 + margin-left: -@tooltip-arrow-width-light;
  30 + border-bottom-width: 0;
  31 + border-top-width: @tooltip-arrow-width-light;
  32 + border-top-color: #fff;
  33 + }
  34 +
  35 + &[x-placement^="right"] .@{tooltip-arrow}:after {
  36 + content: " ";
  37 + left: 1px;
  38 + bottom: -@tooltip-arrow-width-light;
  39 + border-left-width: 0;
  40 + border-right-width: @tooltip-arrow-width-light;
  41 + border-right-color: #fff;
  42 + }
22 43
  44 + &[x-placement^="bottom"] .@{tooltip-arrow}:after {
  45 + content: " ";
  46 + top: 1px;
  47 + margin-left: -@tooltip-arrow-width-light;
  48 + border-top-width: 0;
  49 + border-bottom-width: @tooltip-arrow-width-light;
  50 + border-bottom-color: #fff;
  51 + }
  52 +
  53 + &[x-placement^="left"] .@{tooltip-arrow}:after {
  54 + content: " ";
  55 + right: 1px;
  56 + border-right-width: 0;
  57 + border-left-width: @tooltip-arrow-width-light;
  58 + border-left-color: #fff;
  59 + bottom: -@tooltip-arrow-width-light;
  60 + }
  61 + }
23 62
24 &-inner{ 63 &-inner{
25 max-width: @tooltip-max-width; 64 max-width: @tooltip-max-width;
@@ -46,4 +85,20 @@ @@ -46,4 +85,20 @@
46 border-color: transparent; 85 border-color: transparent;
47 border-style: solid; 86 border-style: solid;
48 } 87 }
  88 +
  89 + &-light {
  90 + .@{tooltip-arrow}{
  91 + &:after{
  92 + display: block;
  93 + width: 0;
  94 + height: 0;
  95 + position: absolute;
  96 + border-color: transparent;
  97 + border-style: solid;
  98 + content: "";
  99 + border-width: @tooltip-arrow-width-light;
  100 + }
  101 + border-width: @tooltip-arrow-outer-width-light;
  102 + }
  103 + }
49 } 104 }
50 \ No newline at end of file 105 \ No newline at end of file