pd4d10/hashmd

vue3 常规引入，预览区不展示内容

kvchen95 opened this issue · 3 comments

kvchen95 commented

vue3 常规引入，预览区不展示内容
image

// package.json

"dependencies": {
    "@bytemd/plugin-gfm": "^1.20.2",
    "@bytemd/plugin-highlight": "^1.20.2",
    "@bytemd/plugin-math": "^1.20.2",
    "@bytemd/vue": "^1.20.2",
    "@bytemd/vue-next": "^1.20.2",
    "axios": "^1.3.2",
    "bytemd": "^1.20.2",
    "pinia": "^2.0.28",
    "uid": "^2.0.1",
    "vue": "^3.2.45",
    "vue-router": "^4.1.6"
  },

// md.vue

<template>
  <div>
    <!-- <Viewer :value="content" :plugins="plugins"></Viewer> -->
    <Editor v-model="content" :plugins="plugins"></Editor>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
// @ts-ignore
import { Editor, Viewer } from '@bytemd/vue-next'
import 'bytemd/dist/index.css'
import gfm from '@bytemd/plugin-gfm'
import highlight from '@bytemd/plugin-highlight'
import math from '@bytemd/plugin-math'

const content = ref('')
const plugins = [gfm(), highlight(), math()]
</script>
CPunisher commented

按照 vue3 的 example: https://github.com/bytedance/bytemd/blob/main/examples/vue3/src/App.vue
把 <Editor> 上的 v-model 改成 :value 和 @change

  • 👍1
kvchen95 commented

按照 vue3 的 example: https://github.com/bytedance/bytemd/blob/main/examples/vue3/src/App.vue 把 <Editor> 上的 v-model 改成 :value 和 @change

thanks！

darkchan commented

我单独引用Viewer组件，上面的编辑组件样式生效了，但是下方的Viewer组件样式有部分不生效（比如代码的背景色）
1687224263395
请问是怎么回事呢？源码如下图：
1687224147923