ocpview-pro 0.1.3 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ocpview-pro",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "title": "ocpviewPlus",
   "description": "A high quality Service UI components Library with Vue.js",
   "homepage": "",

package/src/components/label/showtext.vue

@@ -1,95 +1,162 @@
-<template> 
-    <Tooltip transfer  :content="labeltext" :disabled="!showTooltip" :max-width="maxWidth" class="ivu-table-cell-tooltip" >
-            <template v-if="textLink">
-                <a  href="#"  style="text-decoration:underline" @click.prevent="linkTo"><span ref="content"  class="ivu-table-cell-tooltip-content" v-html="showText" :style="'text-align:'+ contentAlign" @mouseenter="handleTooltipIn" @mouseleave="handleTooltipOut"/> </a>
-            </template>
-            <template v-else>
-                  <span ref="content"  class="ivu-table-cell-tooltip-content" v-html="showText" :style="'text-align:'+ contentAlign" @mouseenter="handleTooltipIn" @mouseleave="handleTooltipOut"/>
-            </template>
-    </Tooltip>
+<template>
+    <component
+        :is="showTooltip ? 'Tooltip' : 'div'"
+        v-bind="showTooltip ? { transfer: true, content: labeltext, maxWidth: maxWidth, disabled: tooltipDisabled } : {}"
+        class="ivu-table-cell-tooltip"
+    >
+        <template v-if="showTooltip" #content>
+            <span class="showtext-tooltip-content">{{ labeltext }}</span>
+        </template>
+        <span
+            ref="content"
+            class="ivu-table-cell-tooltip-content"
+            :class="{ 'showtext-link': textLink }"
+            v-html="displayText"
+            :style="{ textAlign: contentAlign, width: '100%' }"
+            v-on="hasOverflow ? { mouseenter: handleTooltipIn, mouseleave: handleTooltipOut } : {}"
+            @click.prevent="textLink && linkTo()"
+        />
+    </component>
 </template>
 <script>
-    export default {
-        name: 'showText',
-        data () {
-            return {
-                showTooltip:false,
-                labeltext: '',
-                showIcon:false,
-                iconWidth:0,
-                textLink:false
-            };
+export default {
+    name: "showText",
+    data() {
+        return {
+            showTooltip: false,
+            tooltipDisabled: true,
+            tooltipTimer: null,
+            hasOverflow: false,
+        };
+    },
+    props: {
+        label: {
+            type: [String, Number],
+            default: "",
         },
-        props:{
-            label:{
-                type: [String,Number],
-                default: ''
-            },
-            maxWidth:{
-                type: [String,Number],
-                default: 300
-            },
-            contentAlign: {
-                type: String,
-                default: 'center'
-            },
-            resetText: {
-                type: Function,
-                default: null
-            },
-            config: {
-                type: Object,
-                default: () => {},
-            },
-            rowIndex: {
-                type: [String,Number],
-                default: ''
+        maxWidth: {
+            type: [String, Number],
+            default: 300,
+        },
+        contentAlign: {
+            type: String,
+            default: "center",
+        },
+        resetText: {
+            type: Function,
+            default: null,
+        },
+        config: {
+            type: Object,
+            default: () => ({}),
+        },
+        rowIndex: {
+            type: [String, Number],
+            default: "",
+        },
+    },
+    computed: {
+        labeltext() {
+            return this.label;
+        },
+        textLink() {
+            return !!(this.config && this.config.textLink);
+        },
+        displayText() {
+            if (this.resetText) {
+                return this.resetText(
+                    this.doSpecialSymbols(this.label),
+                    this.label
+                );
+            }
+            return this.doSpecialSymbols(this.label);
+        },
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.checkOverflow();
+            this.setupResizeObserver();
+        });
+    },
+    beforeUnmount() {
+        if (this.tooltipTimer) {
+            clearTimeout(this.tooltipTimer);
+            this.tooltipTimer = null;
+        }
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+        if (this.checkOverflowDebounced) {
+            this.checkOverflowDebounced.cancel();
+            this.checkOverflowDebounced = null;
+        }
+    },
+    methods: {
+        checkOverflow() {
+            const content = this.$refs.content;
+            this.hasOverflow = !!(
+                content && content.scrollWidth > content.offsetWidth
+            );
+        },
+        setupResizeObserver() {
+            const content = this.$refs.content;
+            if (!content || !window.ResizeObserver) return;
+            this.checkOverflowDebounced = this.$utils.debounce(
+                this.checkOverflow, 150
+            );
+            this.resizeObserver = new ResizeObserver(
+                this.checkOverflowDebounced
+            );
+            this.resizeObserver.observe(content.parentElement);
+        },
+        handleTooltipIn() {
+            if (this.tooltipTimer) {
+                clearTimeout(this.tooltipTimer);
+                this.tooltipTimer = null;
             }
+            this.showTooltip = true;
+            this.tooltipTimer = setTimeout(() => {
+                this.tooltipDisabled = false;
+                this.tooltipTimer = null;
+            }, 300);
         },
-        created() {
-            if (this.config && this.config.textLink !== undefined) {
-                this.textLink = this.config.textLink;
+        handleTooltipOut() {
+            if (this.tooltipTimer) {
+                clearTimeout(this.tooltipTimer);
+                this.tooltipTimer = null;
             }
+            this.tooltipDisabled = true;
+            this.tooltipTimer = setTimeout(() => {
+                this.showTooltip = false;
+                this.tooltipTimer = null;
+            }, 300);
         },
-        methods:{
-            handleTooltipIn () {
-                const $content = this.$refs.content;
-                this.showTooltip = $content.scrollWidth > $content.offsetWidth;  
-            },
-            handleTooltipOut () {
-                this.showTooltip = false;  
-            },
-            doSpecialSymbols(str) {
-                if (str) {
-                    str = str + '';
-                    //替换所有的换行符
-                    str = str.replace(/\r\n/g,'<br>');
-                    str = str.replace(/\n/g,'<br>');
-                    //替换所有的空格（中文空格、英文空格都会被替换）
-                    str = str.replace(/\s/g,'&nbsp;');
-                }
-                return str; 
-            },
-            linkTo() {
-                if (this.config.onLinkTo) {
-                    let obj = this.$Method.copy(this.config);
-                    obj.rowIndex = this.rowIndex;
-                    this.config.onLinkTo(obj);
-                }
+        doSpecialSymbols(str) {
+            if (str) {
+                str = str + "";
+                str = str.replace(/\r\n/g, "<br>");
+                str = str.replace(/\n/g, "<br>");
+                str = str.replace(/\s/g, "&nbsp;");
             }
+            return str;
         },
-        watch:{
-            label: {
-                handler (data) {
-                    this.labeltext = data;
-                    if (this.resetText) {
-                        this.showText = this.resetText(this.doSpecialSymbols(data),data);
-                    } else {
-                        this.showText = this.doSpecialSymbols(data);
-                    }
-                },
-                immediate: true
+        linkTo() {
+            if (this.config && this.config.onLinkTo) {
+                let obj = this.$Method.copy(this.config);
+                obj.rowIndex = this.rowIndex;
+                this.config.onLinkTo(obj);
             }
-        }
-    };
-</script>
+        },
+    },
+};
+</script>
+<style scoped>
+.showtext-tooltip-content {
+    white-space: pre-wrap;
+}
+.showtext-link {
+    text-decoration: underline;
+    cursor: pointer;
+}
+</style>