Jeecg-Boot 2.2.0 版本发布 | 重磅升级

ant-design-vue-jeecg/src/components/Ellipsis/Ellipsis.vue

@@ -1,31 +1,20 @@
 <script>
-  import Tooltip from 'ant-design-vue/es/tooltip'
   import { cutStrByFullLength, getStrFullLength } from '@/components/_util/StringUtil'
-/*
-  const isSupportLineClamp = document.body.style.webkitLineClamp !== undefined;
-
-  const TooltipOverlayStyle = {
-    overflowWrap: 'break-word',
-    wordWrap: 'break-word',
-  };
-*/
 
   export default {
     name: 'Ellipsis',
-    components: {
-      Tooltip
-    },
     props: {
       prefixCls: {
         type: String,
         default: 'ant-pro-ellipsis'
       },
       tooltip: {
-        type: Boolean
+        type: Boolean,
+        default: true,
       },
       length: {
         type: Number,
-        required: true
+        default: 25,
       },
       lines: {
         type: Number,
@@ -36,28 +25,25 @@
         default: false
       }
     },
-    methods: {
-      getStrDom (str) {
-        return (
-          <span>{ cutStrByFullLength(str, this.length) + '...' }</span>
-        )
-      },
-      getTooltip ( fullStr) {
-        return (
-          <Tooltip>
-            <template slot="title">{ fullStr }</template>
-            { this.getStrDom(fullStr) }
-          </Tooltip>
-        )
-      }
-    },
-    render () {
+    methods: {},
+    render() {
       const { tooltip, length } = this.$props
-      let str = this.$slots.default.map(vNode => vNode.text).join("")
-      const strDom = tooltip && getStrFullLength(str) > length ? this.getTooltip(str) : this.getStrDom(str);
-      return (
-        strDom
-      )
+      let text = ''
+      // 处理没有default插槽时的特殊情况
+      if (this.$slots.default) {
+        text = this.$slots.default.map(vNode => vNode.text).join('')
+      }
+      // 判断是否显示 tooltip
+      if (tooltip && getStrFullLength(text) > length) {
+        return (
+          <a-tooltip>
+            <template slot="title">{text}</template>
+            <span>{cutStrByFullLength(text, this.length) + '…'}</span>
+          </a-tooltip>
+        )
+      } else {
+        return (<span>{text}</span>)
+      }
     }
   }
 </script>