0

我正在一个网站上显示有关一项运动的基本信息。我将（小）规则手册保存为rulebook.md. 我的项目正在使用 webpack 和最新的 vue-cli 和 yarn。

要导入我使用的规则手册raw-loader，并将内容传递给一个名为 Vue 的组件markdown，该组件需要 markdown 并使用showdown模块对其进行格式化。

@/components/Markdown.vue

<template>
  <div id="markdown">
    {{ source }}
    {{ converted }}
  </div>
</template>

<script>
import * as showdown from 'showdown'
const converter = new showdown.Converter()
converter.setOption('simpleLineBreaks', true)

export default {
  name: 'markdown',
  props: ['source'],
  data () {
    return {
      converted: converter.makeHtml(this.source)
    }
  }
}
</script>

<style lang="scss" scoped>
.markdown {
  white-space: pre-line;
  word-wrap: break-word;
}
</style>

@/views/punchies/Rulebook.vue

<template>
  <div id="punchies-rulebook" class="container">
    ...
    <markdown ... :source="source"></markdown>
  </div>
</template>

<script>
import Markdown from '@/components/Markdown.vue'
// eslint-disable-next-line
import source from 'raw-loader!@/views/punchies/misc/rulebook.md'

export default {
  name: 'rulebook',
  components: {
    'markdown': Markdown
  },
  data () {
    return {
      source
    }
  }
}
</script>

...

我试图设置showdown使用换行符并告诉 CSS 呈现换行符。只需执行console.log(source)即可显示规则手册，其中没有任何换行符。在搜索此问题后，raw-loadergithub 显示了一个问题，其中解释说raw-loader确实保留了换行符。

4

1 回答 1

0

在 Markdown.vue 中

<template>
    <p>{{source}}</p>
    <p v-html="converted"></p>
</template>
于 2019-05-24T10:40:53.350 回答