Tooltip add maxWidth prop

This commit is contained in:
梁灏 2018-06-22 15:21:58 +08:00
parent 16e850535b
commit 6b498dd1a4
3 changed files with 27 additions and 4 deletions

View file

@ -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>

View file

@ -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();

View file

@ -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{