From 6b498dd1a419ca2109b8fc351cfbdeef632eccd8 Mon Sep 17 00:00:00 2001
From: 梁灏 <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 453c0cf..4e1bc2c 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 030b731..c85e52b 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 6fc994c..d070435 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{
--
libgit2 0.21.4