Markdown

markdown

// 左侧markdown
<textarea :ref="editor" :value="content" @input="update" />
// 右侧 解析
<div v-html="compiledContent"></div>

data() {
  return {
    content: `# 请求
        * 问问
        * 嗯嗯
        * 让人
      `
  }
},
computed: {
  compiledContent() {
    return marked(this.content, {})
  }
}，
mounted： {
  this.timer: null;
  this.bindEvent();
}，
methods: {
  bindEvent() {
    this.$refs.editor.addEventListener('paste', async e => {
      const files = e.clipboardData.files
      
    })
  },

  update(e) {
    clearTimeout(this.timer)
    this.timer = setTimeout(() => {
      this.content = e.target.value
    }, 350)
  }
}

//  marked的用法
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <script>
    document.getElementById('content').innerHTML =
      marked('# Marked in the browser\n\nRendered by **marked**.');
  </script>

特点：

1. 并没有使用v-model，防抖节流

2. 引入marked , lodash

3. 样式直接用100vh ， 满屏

4. lodash 的防抖

5. 定义个timer属性来做防抖，放在mounted中，不放data中，防止被添加到监控中

6. 通过dom 监听函数 监听两个 值，“paste”和“drop”