Question

<template id="my-component">
  <div>
    <h2>My component</h2>
    <pre style="border:1px black solid"><slot></slot></pre>
  </div>
</template>

<script>
Vue.component('my-component', {
  template: '#my-component',
});

new Vue({
  el: '#app',
});
</script>

my-component如何删除插槽中的空白行？我希望该组件以以下两种方式使用并以相同的方式显示。

<div id="app">
  <my-component>


  Component instance 1



  </my-component>

  <my-component>Component instance 2</my-component>
</div>

这是玩弄的小提琴。 https://jsfiddle.net/m2spzwt0/1/

Answer 1

您可以通过处理$slots.default中的数据来删除空白行。这是可行的，但我不太确定这是执行此操作的好方法。

https://jsfiddle.net/3s8k4fph/

Vue.component('my-component', {
  template: '#my-component',
  mounted() {
    if(this.$slots.default)
    {
      const defaultSlot = this.$slots.default[0].elm;
      defaultSlot.textContent = defaultSlot.textContent.replace(/^(\s*[\r\n])+/g,'');

      const defaultSlot2 = this.$slots.default[this.$slots.default.length-1].elm;
      defaultSlot2.textContent = defaultSlot2.textContent.replace(/([\r\n]\s)+$/g,'');
    }
  }
});

将操作应用于插槽

1 个答案: