From 6b498dd1a419ca2109b8fc351cfbdeef632eccd8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Fri, 22 Jun 2018 15:21:58 +0800
Subject: [PATCH] Tooltip add maxWidth prop

---
 examples/routers/tooltip.vue       |  6 +++---
 src/components/tooltip/tooltip.vue | 20 +++++++++++++++++++-
 src/styles/components/tooltip.less |  5 +++++
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/examples/routers/tooltip.vue b/examples/routers/tooltip.vue
index 453c0cfa..4e1bc2c9 100644
--- a/examples/routers/tooltip.vue
+++ b/examples/routers/tooltip.vue
@@ -1,9 +1,9 @@
 <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>
diff --git a/src/components/tooltip/tooltip.vue b/src/components/tooltip/tooltip.vue
index 030b731f..c85e52bf 100644
--- a/src/components/tooltip/tooltip.vue
+++ b/src/components/tooltip/tooltip.vue
@@ -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();
diff --git a/src/styles/components/tooltip.less b/src/styles/components/tooltip.less
index 6fc994cd..d0704358 100644
--- a/src/styles/components/tooltip.less
+++ b/src/styles/components/tooltip.less
@@ -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{