update Poptip style

梁灏
1 parent ac50d539
Showing 4 changed files with 22 additions and 3 deletions Show diff stats
examples/routers/tooltip.vue
src/components/tooltip/tooltip.vue
src/styles/components/poptip.less
src/styles/components/tooltip.less
 <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>
@@ -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 () {
 @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%);
@@ -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;