Commit 6b498dd1a419ca2109b8fc351cfbdeef632eccd8

Authored by 梁灏
1 parent 16e85053

Tooltip add maxWidth prop

examples/routers/tooltip.vue
1 <template> 1 <template>
2 - <div>  
3 - <Tooltip always placement="top" transfer :content="text" :delay="1000" theme="light"> 2 + <div style="margin: 200px;">
  3 + <Tooltip always placement="top-end" 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 always transfer :max-width="200" content="我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长">
7 <Button @click="handleChange">change</Button> 7 <Button @click="handleChange">change</Button>
8 </Tooltip> 8 </Tooltip>
9 <Button @click="handleChange">change</Button> 9 <Button @click="handleChange">change</Button>
src/components/tooltip/tooltip.vue
@@ -14,7 +14,7 @@ @@ -14,7 +14,7 @@
14 v-transfer-dom> 14 v-transfer-dom>
15 <div :class="[prefixCls + '-content']"> 15 <div :class="[prefixCls + '-content']">
16 <div :class="[prefixCls + '-arrow']"></div> 16 <div :class="[prefixCls + '-arrow']"></div>
17 - <div :class="[prefixCls + '-inner']"><slot name="content">{{ content }}</slot></div> 17 + <div :class="innerClasses" :style="innerStyles"><slot name="content">{{ content }}</slot></div>
18 </div> 18 </div>
19 </div> 19 </div>
20 </transition> 20 </transition>
@@ -67,6 +67,9 @@ @@ -67,6 +67,9 @@
67 return oneOf(value, ['dark', 'light']); 67 return oneOf(value, ['dark', 'light']);
68 }, 68 },
69 default: 'dark' 69 default: 'dark'
  70 + },
  71 + maxWidth: {
  72 + type: Number
70 } 73 }
71 }, 74 },
72 data () { 75 data () {
@@ -74,6 +77,21 @@ @@ -74,6 +77,21 @@
74 prefixCls: prefixCls 77 prefixCls: prefixCls
75 }; 78 };
76 }, 79 },
  80 + computed: {
  81 + innerStyles () {
  82 + const styles = {};
  83 + if (this.maxWidth) styles['max-width'] = `${this.maxWidth}px`;
  84 + return styles;
  85 + },
  86 + innerClasses () {
  87 + return [
  88 + `${prefixCls}-inner`,
  89 + {
  90 + [`${prefixCls}-inner-with-width`]: !!this.maxWidth
  91 + }
  92 + ];
  93 + }
  94 + },
77 watch: { 95 watch: {
78 content () { 96 content () {
79 this.updatePopper(); 97 this.updatePopper();
src/styles/components/tooltip.less
@@ -71,6 +71,11 @@ @@ -71,6 +71,11 @@
71 border-radius: @border-radius-small; 71 border-radius: @border-radius-small;
72 box-shadow: @shadow-base; 72 box-shadow: @shadow-base;
73 white-space: nowrap; 73 white-space: nowrap;
  74 +
  75 + &-with-width{
  76 + white-space: pre-wrap;
  77 + text-align: justify;
  78 + }
74 } 79 }
75 80
76 &-light &-inner{ 81 &-light &-inner{