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

发布于04月28日

要应用内容过滤器的插槽中是否有内容过滤器？

为了澄清，我想截断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

我似乎在文件中找不到这个信息.

非常感谢.

推荐答案

同样的事情，以类似的方式可以是:

在你的主要.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);

在模板中: