Commit 130ed8894b55ef71133f2cae2884c8e9b1c23431

Authored by 梁灏
1 parent 953d02c7

Poptip add prop wordWrap

examples/routers/tooltip.vue
@@ -7,7 +7,7 @@ @@ -7,7 +7,7 @@
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>
10 - <Poptip title="Title" transfer width="250" content="我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长"> 10 + <Poptip title="Title" transfer width="250" word-wrap content="我的文本超级,无敌,长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长">
11 <Button>Click</Button> 11 <Button>Click</Button>
12 </Poptip> 12 </Poptip>
13 </div> 13 </div>
src/components/poptip/poptip.vue
@@ -38,7 +38,7 @@ @@ -38,7 +38,7 @@
38 <div :class="[prefixCls + '-inner']" v-if="!confirm"> 38 <div :class="[prefixCls + '-inner']" v-if="!confirm">
39 <div :class="[prefixCls + '-title']" v-if="showTitle" ref="title"><slot name="title"><div :class="[prefixCls + '-title-inner']">{{ title }}</div></slot></div> 39 <div :class="[prefixCls + '-title']" v-if="showTitle" ref="title"><slot name="title"><div :class="[prefixCls + '-title-inner']">{{ title }}</div></slot></div>
40 <div :class="[prefixCls + '-body']"> 40 <div :class="[prefixCls + '-body']">
41 - <div :class="[prefixCls + '-body-content']"><slot name="content"><div :class="[prefixCls + '-body-content-inner']">{{ content }}</div></slot></div> 41 + <div :class="contentClasses"><slot name="content"><div :class="[prefixCls + '-body-content-inner']">{{ content }}</div></slot></div>
42 </div> 42 </div>
43 </div> 43 </div>
44 </div> 44 </div>
@@ -100,6 +100,10 @@ @@ -100,6 +100,10 @@
100 }, 100 },
101 popperClass: { 101 popperClass: {
102 type: String 102 type: String
  103 + },
  104 + wordWrap: {
  105 + type: Boolean,
  106 + default: false
103 } 107 }
104 }, 108 },
105 data () { 109 data () {
@@ -149,6 +153,14 @@ @@ -149,6 +153,14 @@
149 } else { 153 } else {
150 return this.cancelText; 154 return this.cancelText;
151 } 155 }
  156 + },
  157 + contentClasses () {
  158 + return [
  159 + `${prefixCls}-body-content`,
  160 + {
  161 + [`${prefixCls}-body-content-word-wrap`]: this.wordWrap
  162 + }
  163 + ];
152 } 164 }
153 }, 165 },
154 methods: { 166 methods: {
src/styles/components/poptip.less
@@ -43,6 +43,11 @@ @@ -43,6 +43,11 @@
43 &-content{ 43 &-content{
44 overflow: auto; 44 overflow: auto;
45 45
  46 + &-word-wrap{
  47 + white-space: pre-wrap;
  48 + text-align: justify;
  49 + }
  50 +
46 &-inner{ 51 &-inner{
47 color: @text-color; 52 color: @text-color;
48 } 53 }