vue.js 组件：如何截断组件中插槽元素中的文本？答案

【问题标题】：vue.js components : How to truncate the text in the slot element in a component?vue.js 组件：如何截断组件中插槽元素中的文本？
【发布时间】：2016-05-06 08:19:50
【问题描述】：

有没有办法对 Vue 组件中的插槽内容应用过滤器？

为了澄清，我想截断手动包含在 HTML 中的文本。例如我想改变这个：

<!-- In the view -->
<my-component>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, 
laboriosam quasi rerum obcaecati dignissimos autem laudantium error 
quas voluptatibus debitis?
</my-component>

进入这个：

<!-- Generated component -->
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing ...
</div

我似乎无法在文档中找到此信息。

谢谢。

【问题讨论】：

标签： vue.js

【解决方案1】：

类似的方式可以是：

在您的 main.js 文件中：

var filter = function(text, length, clamp){
    clamp = clamp || '...';
    var node = document.createElement('div');
    node.innerHTML = text;
    var content = node.textContent;
    return content.length > length ? content.slice(0, length) + clamp : content;
};

Vue.filter('truncate', filter);

在您的模板中：

{{data.content | truncate(300, '...')}}

【讨论】：

这个确切的代码也可以通过这里的 NPM 包获得 npmjs.com/package/vue-truncate
谢谢！完美运行！
为什么添加到div 节点之后只是为了获取textContent？没有这种舞蹈，它实际上也可以工作。

【解决方案2】：

您可以使用filter 截断它。

//credit to @Bill Criswell for this filter
Vue.filter('truncate', function (text, stop, clamp) {
    return text.slice(0, stop) + (stop < text.length ? clamp || '...' : '')
})

然后给过滤器你希望字符串的长度

<my-component>
    {{'Lorem ipsum dolor sit amet, consectetur adipisicing' | truncate 50 }}
</my-component>

在子组件中，来自插槽的内容按原样传递，并且不能作为可以从子端截断的变量使用。

【讨论】：

与我要建议的答案非常相似。您将其包装在 div 中是有原因的吗？做了这个快速测试用例，效果很好：jsfiddle.net/crswll/q3L78cst
完全没有理由，我从快速谷歌上抓取了过滤器。认为有人已经完成了截断过滤器的工作。用更简单的版本更新了答案。
{{ 数据 |截断(50) }}
如何在 v-model 中使用这个过滤器？（在 vuejs 2 中）
@Jeff 也许你可以帮助我。看看这个：stackoverflow.com/questions/52584451/…

【解决方案3】：

@community 答案的一个小修复：

在组件内：

export default {
    data: () => {
        return {}
    },
    created() {
    },
    filters: {
        truncate: function (text, length, suffix) {
            if (text.length > length) {
                return text.substring(0, length) + suffix;
            } else {
                return text;
            }
        },
    }
}

或全局：

/** Vue Filters Start */
Vue.filter('truncate', function (text, length, suffix) {
    if (text.length > length) {
        return text.substring(0, length) + suffix;
    } else {
        return text;
    }
});
/** Vue Filters End */

还是可以这样用的：

<div id="app">
  <span>{{ text | truncate(10, '...') }}</span>
</div>

【讨论】：

【解决方案4】：

你也可以这样做：

export default {
    data: () => {
      return { 
      }
    },
    created(){
    },
    filters: {
        truncate: function (text, length, suffix) {
            if (text.length > length) {
                return text.substring(0, length) + suffix;
            } else {
                return text;
            }
        },
    }
}

或

Vue.filter('truncate', function (text, length, suffix) {
    if (text.length > length) {
        return text.substring(0, length) + suffix;
    } else {
        return text;
    }
});

然后像这样使用它：

<div id="app">
  <span>{{ text | truncate(10, '...') }}</span>
</div>

如果你想了解更多vue过滤器，我建议你阅读这个：How to Create Filters in Vue.js with Examples

【讨论】：

【解决方案5】：

您可以只使用切片 js 方法指示字符串的begin 和end 位置。 More info

<my-component>{{ lorem.slice(0, 180) }}...</my-component>

<script>
export default {
  data() {
    return {
      lorem:
        "Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu justo aeque torquatos."
    };
  }
};
</script>

【讨论】：

这很好，但不是最好的解决方案，因为它只会分割字符串。结果字符串不会让您知道还有更多信息。建议添加 '...' 让用户知道字符串已被截断
没关系。刚刚看到您在切片后添加了“...”。太棒了。

【解决方案6】：

对于 nuxt 应用程序，这对我有用：

 <div v-html="$options.filters.truncate(post.body)"></div>

这是我的过滤器

 filters: {
    truncate: function (text, length) {
      if (text.length > 30) {
        return text.substring(0, 30) + '...'
      } else {
        return text
      }
    },
  },

【讨论】：