diff --git a/examples/routers/tooltip.vue b/examples/routers/tooltip.vue index 19ea27d..791ff63 100644 --- a/examples/routers/tooltip.vue +++ b/examples/routers/tooltip.vue @@ -7,7 +7,7 @@ <Button @click="handleChange">change</Button> </Tooltip> <Button @click="handleChange">change</Button> - <Poptip title="Title" transfer width="250" content="我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长"> + <Poptip title="Title" transfer width="250" word-wrap content="我的文本超级,无敌,长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长"> <Button>Click</Button> </Poptip> </div> diff --git a/src/components/poptip/poptip.vue b/src/components/poptip/poptip.vue index d4b0c71..22b3bfb 100644 --- a/src/components/poptip/poptip.vue +++ b/src/components/poptip/poptip.vue @@ -38,7 +38,7 @@ <div :class="[prefixCls + '-inner']" v-if="!confirm"> <div :class="[prefixCls + '-title']" v-if="showTitle" ref="title"><slot name="title"><div :class="[prefixCls + '-title-inner']">{{ title }}</div></slot></div> <div :class="[prefixCls + '-body']"> - <div :class="[prefixCls + '-body-content']"><slot name="content"><div :class="[prefixCls + '-body-content-inner']">{{ content }}</div></slot></div> + <div :class="contentClasses"><slot name="content"><div :class="[prefixCls + '-body-content-inner']">{{ content }}</div></slot></div> </div> </div> </div> @@ -100,6 +100,10 @@ }, popperClass: { type: String + }, + wordWrap: { + type: Boolean, + default: false } }, data () { @@ -149,6 +153,14 @@ } else { return this.cancelText; } + }, + contentClasses () { + return [ + `${prefixCls}-body-content`, + { + [`${prefixCls}-body-content-word-wrap`]: this.wordWrap + } + ]; } }, methods: { diff --git a/src/styles/components/poptip.less b/src/styles/components/poptip.less index 68a5154..8ff28d1 100644 --- a/src/styles/components/poptip.less +++ b/src/styles/components/poptip.less @@ -43,6 +43,11 @@ &-content{ overflow: auto; + &-word-wrap{ + white-space: pre-wrap; + text-align: justify; + } + &-inner{ color: @text-color; } -- libgit2 0.21.4