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

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

您可以使用 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>

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

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

Answer 3

你也可以这样做：

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

Answer 4

对@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>

Answer 5

你可以只使用 slice 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>

Answer 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
      }
    },
  },

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

vue.js components : How to truncate the text in the slot element in a component?

vue.js