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

Question

有没有办法对 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

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

谢谢你。

原文由 PierreB 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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, '...')}}

原文由 Filip Ajdačić 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用 过滤器 截断它。

 //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>

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

原文由 Jeff 发布，翻译遵循 CC BY-SA 4.0 许可协议