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

同样的方式可以是：

你的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 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>

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

Answer 3

您也可以这样：

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

或

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

然后像这样使用它：

<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

对于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
      }
    },
  },

Answer 6

您可以只使用slice js方法来指示字符串的Hello和begin位置。 More info

end

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

6 个答案: