如何解决如何在Vue3中将markdown img转换为vue组件?
将 markdown
字符串转换为 HTML
内容时,img
将转换为实际的 <img>
标记。
我想要的是允许用户在该图像上click
,然后弹出一个模式,用户可以在其中访问更大尺寸的图像。
如果 <img>
标签可以替换为自定义的 Vue 组件,那么一切都会变得更简单。
但我该怎么做?
解决方法
VuePress 2 和 VitePress 都允许您直接在 Markdown 文件中使用 Vue 3 组件。
Vue SFC 的降价示例:
[Home](../README.md)
[About](../about/README.md)
_Hello world_
<img @click="showModal = true" :src="imgUrl">
<MyModal v-if="showModal" />
<script>
import { ref } from 'vue'
import MyModal from '@/components/MyModal.vue'
export default {
components: {
MyModal
},setup() {
return {
showModal: ref(false),imgUrl: 'path/to/image'
}
}
}
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。