mirror of
https://gitee.com/durcframework/SOP.git
synced 2025-08-12 07:02:14 +08:00
84 lines
1.6 KiB
Vue
Executable File
84 lines
1.6 KiB
Vue
Executable File
<script setup lang="ts">
|
|
// bytemd https://github.com/bytedance/bytemd.git
|
|
import { Editor, Viewer } from "@bytemd/vue-next";
|
|
import gfm from "@bytemd/plugin-gfm";
|
|
import highlight from "@bytemd/plugin-highlight";
|
|
import gemoji from "@bytemd/plugin-gemoji";
|
|
import "bytemd/dist/index.css";
|
|
import "highlight.js/styles/idea.css";
|
|
import "github-markdown-css/github-markdown.css";
|
|
import { computed, ref } from "vue";
|
|
|
|
const plugins = [gfm(), highlight(), gemoji()];
|
|
|
|
const props = defineProps({
|
|
value: {
|
|
type: String,
|
|
default: "",
|
|
required: true
|
|
},
|
|
readonly: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
});
|
|
|
|
const updateValue = ref("");
|
|
|
|
const content = computed(() => {
|
|
return updateValue.value || props.value;
|
|
});
|
|
|
|
const isEdit = computed(() => {
|
|
return !props.readonly;
|
|
});
|
|
|
|
function handleChange(v) {
|
|
updateValue.value = v;
|
|
}
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<Editor
|
|
v-if="isEdit"
|
|
:value="content"
|
|
:plugins="plugins"
|
|
@change="handleChange"
|
|
/>
|
|
<Viewer v-else :value="content" :plugins="plugins" />
|
|
</div>
|
|
</template>
|
|
<style lang="scss">
|
|
.bytemd {
|
|
height: calc(100vh - 100px);
|
|
}
|
|
.markdown-body {
|
|
box-sizing: border-box;
|
|
min-width: 200px;
|
|
max-width: 980px;
|
|
margin: 0 auto;
|
|
padding: 25px;
|
|
ol {
|
|
padding-left: 1em;
|
|
margin: 0;
|
|
list-style: decimal !important;
|
|
}
|
|
ul {
|
|
padding-left: 1em;
|
|
margin: 0;
|
|
list-style: disc !important;
|
|
}
|
|
}
|
|
.markdown-body p,
|
|
.markdown-body blockquote,
|
|
.markdown-body ul,
|
|
.markdown-body ol,
|
|
.markdown-body dl,
|
|
.markdown-body table,
|
|
.markdown-body pre,
|
|
.markdown-body details {
|
|
margin-top: 0;
|
|
margin-bottom: 16px;
|
|
}
|
|
</style>
|