Компоненты 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 

Я не могу найти эту информацию в документации.

спасибо.

Answer 1

Вы можете использовать фильтр, чтобы обрезать его.

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

В рамках компонента ребенка, содержание из слота передается через, как есть, и не доступна в качестве переменной что вы можете усечь с конца ребенка.

Answer 2

То же самое по аналогичным образом может быть:

в файле 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, '...')}}