refactor(projects): 优化路由导入页面写法,页面路由调整

This commit is contained in:
Soybean
2021-11-28 12:19:00 +08:00
parent d683894beb
commit 0b10b5056e
36 changed files with 303 additions and 197 deletions

View File

@ -0,0 +1,46 @@
<template>
<div>
<n-card title="markdown插件" class="shadow-sm rounded-16px">
<div ref="domRef"></div>
<template #footer>
<github-link link="https://github.com/Vanessa219/vditor" />
</template>
</n-card>
</div>
</template>
<script setup lang="ts">
import { ref, watch, onMounted } from 'vue';
import { NCard } from 'naive-ui';
import Vditor from 'vditor';
import 'vditor/src/assets/scss/index.scss';
import { useThemeStore } from '@/store';
import { GithubLink } from '@/components';
const theme = useThemeStore();
const vditor = ref<Vditor | null>(null);
const domRef = ref<HTMLElement | null>(null);
function renderVditor() {
vditor.value = new Vditor(domRef.value!, {
minHeight: 400,
theme: theme.darkMode ? 'dark' : 'classic',
icon: 'material',
cache: { enable: false }
});
}
watch(
() => theme.darkMode,
newValue => {
const themeMode = newValue ? 'dark' : 'classic';
vditor.value?.setTheme(themeMode);
}
);
onMounted(() => {
renderVditor();
});
</script>
<style scoped></style>