qimall/addons/StarChain/backend/views/components/com-title.php

<template id="com-title">
    <span :class="className" v-if="isLong()">
        {{ title }}
    </span>
    <el-tooltip effect="dark" :content="title" :placement="placement" v-else>
        <span :class="className">
            {{ substrTitle() }}
        </span>
    </el-tooltip>
</template>

<script>
    Vue.component('com-title', {
        template: '#com-title',
        props: {
            title: {
                type: String,
                default: '',
            },
            className: {
                type: String,
                default: '',
            },
            max: {
                type: Number,
                default: 10,
            },
            placement: {
                type: String,
                default: 'top-start',
            },
        },
        methods: {
            isLong() {
                return !this.title.length > this.max
            },
            substrTitle() {
                return this.title.substr(0, this.max) + '...'
            },
        }
    })
</script>