SOURCE

const TipText = Vue.component('TipText', {
    // 你的代码
    template: `
        <div :title="title">{{formatText}}<div>
    `,
    props: ['maxLength'],
    computed: {
        textProp() {
            const d = this.$slots.default
            if (d) {
                return d[0].text
            }
            return ''
        },
        formatText() {
            if (!this.textProp) {
                return ''
            }
            if (this.maxLength) {
                const tLen = this.textProp.length
                if (this.maxLength >= tLen) {
                    return this.textProp
                } else {
                    const fText = this.textProp.slice(0, this.maxLength)
                    return `${fText}...`
                }
            } else {
                return this.textProp
            }
        },
        title(){
            if(this.maxLength && this.textProp){
                if(this.maxLength < this.textProp.length){
                    return this.textProp
                } else {
                    return ''
                }
            } else {
                return ''
            }
        }
    }
})


const app = new Vue({
    el: '#app',
    components: { TipText },
    template: `<div class="app">
        <TipText maxLength="8">第一个按照文字数截取</TipText>
        <TipText>第二个不截取</TipText>
    </div>`
})

<div id="app"></div>