Tooltip add maxWidth prop
This commit is contained in:
parent
16e850535b
commit
6b498dd1a4
3 changed files with 27 additions and 4 deletions
|
@ -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>
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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{
|
||||
|
|
Loading…
Add table
Reference in a new issue