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