Poptip add prop wordWrap

梁灏
1 parent 953d02c7
Showing 3 changed files with 19 additions and 2 deletions Show diff stats
examples/routers/tooltip.vue
src/components/poptip/poptip.vue
src/styles/components/poptip.less
@@ -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>
@@ -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: {
@@ -43,6 +43,11 @@
         &-content{
             overflow: auto;
  
+            &-word-wrap{
+                white-space: pre-wrap;
+                text-align: justify;
+            }
+
             &-inner{
                 color: @text-color;
             }