Tooltip add maxWidth prop

梁灏
1 parent 16e85053
Showing 3 changed files with 27 additions and 4 deletions Show diff stats
examples/routers/tooltip.vue
src/components/tooltip/tooltip.vue
src/styles/components/tooltip.less
 <template>
-    <div>
-        <Tooltip always placement="top" transfer :content="text" :delay="1000" theme="light">
+    <div style="margin: 200px;">
+        <Tooltip always placement="top-end" transfer :content="text" :delay="1000" theme="light">
             <Button @click="disabled = true">延时1秒显示</Button>
         </Tooltip>
-        <Tooltip placement="top" transfer :content="text">
+        <Tooltip always transfer :max-width="200" content="我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长">
             <Button @click="handleChange">change</Button>
         </Tooltip>
         <Button @click="handleChange">change</Button>
@@ -14,7 +14,7 @@
                 v-transfer-dom>
                 <div :class="[prefixCls + '-content']">
                     <div :class="[prefixCls + '-arrow']"></div>
-                    <div :class="[prefixCls + '-inner']"><slot name="content">{{ content }}</slot></div>
+                    <div :class="innerClasses" :style="innerStyles"><slot name="content">{{ content }}</slot></div>
                 </div>
             </div>
         </transition>
@@ -67,6 +67,9 @@
                     return oneOf(value, ['dark', 'light']);
                 },
                 default: 'dark'
+            },
+            maxWidth: {
+                type: Number
             }
         },
         data () {
@@ -74,6 +77,21 @@
                 prefixCls: prefixCls
             };
         },
+        computed: {
+            innerStyles () {
+                const styles = {};
+                if (this.maxWidth) styles['max-width'] = `${this.maxWidth}px`;
+                return styles;
+            },
+            innerClasses () {
+                return [
+                    `${prefixCls}-inner`,
+                    {
+                        [`${prefixCls}-inner-with-width`]: !!this.maxWidth
+                    }
+                ];
+            }
+        },
         watch: {
             content () {
                 this.updatePopper();
@@ -71,6 +71,11 @@
         border-radius: @border-radius-small;
         box-shadow: @shadow-base;
         white-space: nowrap;
+
+        &-with-width{
+            white-space: pre-wrap;
+            text-align: justify;
+        }
     }
  
     &-light &-inner{