Commit 6b498dd1a419ca2109b8fc351cfbdeef632eccd8
1 parent
16e85053
Tooltip add maxWidth prop
Showing
3 changed files
with
27 additions
and
4 deletions
Show diff stats
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{ |