56 lines
1.5 KiB
Vue
56 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import BackButton from '~/components/BackButton.vue';
|
|
import { MdEditor } from 'md-editor-v3';
|
|
import 'md-editor-v3/lib/style.css';
|
|
|
|
const emit = defineEmits(['articleEditFinish']);
|
|
const { baseContent, baseTitle, saveButton } = defineProps({
|
|
baseContent: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
baseTitle: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
saveButton: {
|
|
type: String,
|
|
default: '保存文章',
|
|
},
|
|
});
|
|
const content = ref(baseContent);
|
|
const title = ref(baseTitle);
|
|
|
|
async function saveArticle() {
|
|
if (title.value === '' || content.value === '') {
|
|
await MessagePlugin.error('标题和正文不能为空');
|
|
return;
|
|
}
|
|
emit('articleEditFinish', {
|
|
title: title.value,
|
|
content: content.value,
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="p-6">
|
|
<back-button class="ml-3" />
|
|
<div
|
|
class="m-2 bg-white rounded-xl p-6 border-gray-200 border-2 min-h-[300px] dark:bg-neutral-800 dark:border-zinc-600"
|
|
>
|
|
<t-form @submit="saveArticle">
|
|
<t-form-item name="title" label="标题">
|
|
<t-input v-model="title"></t-input>
|
|
</t-form-item>
|
|
<t-form-item name="content" label="正文">
|
|
<MdEditor v-model="content" :theme="useColorMode().preference"/>
|
|
</t-form-item>
|
|
<t-form-item>
|
|
<t-button theme="primary" type="submit">{{ saveButton }}</t-button>
|
|
</t-form-item>
|
|
</t-form>
|
|
</div>
|
|
</div>
|
|
</template>
|