添加文章列表与新增文章

master
liuyx 2 years ago
parent 56990946ac
commit a72a80d58f

@ -0,0 +1,36 @@
<template>
<el-card>
<el-form>
<el-form-item>
<el-row :gutter="20" style="width: 100%">
<el-col :span="20">
<span style="box-shadow: 1 0 1px #c0c4cc"
><el-input v-model="blog.title" placeholder="请输入博客标题"
/></span>
</el-col>
<el-col :span="4">
<el-button color="#626aef" style="width: 100%; height: 100%">发布文章</el-button>
</el-col>
</el-row>
</el-form-item>
<el-form-item>
<v-md-editor
v-model="blog.article"
height="calc(100vh - 270px)"
placeholder="在vuepress主题中, 您可以使用tip功能噢~"
/>
</el-form-item>
</el-form>
</el-card>
</template>
<script setup>
import { ref } from 'vue'
const blog = ref({
title: '',
article: ''
})
</script>
<style lang="scss" scoped></style>

@ -0,0 +1,50 @@
<template>
<el-card>
<el-table :data="articleList" style="width: 100%">
<!-- 多选 -->
<el-table-column type="selection" width="55" />
<el-table-column prop="cover" label="文章图片">
<template #default="scope">
<el-image
class="article-cover"
:src="
scope.row.cover
? scope.row.cover
: 'https://static.talkxj.com/articles/c5cc2b2561bd0e3060a500198a4ad37d.png'
"
/>
</template>
</el-table-column>
<el-table-column prop="title" label="文章标题" />
<el-table-column prop="category" label="分类" />
<el-table-column prop="tags" label="标签" />
<el-table-column prop="views" label="浏览量" />
<el-table-column prop="type" label="类型" />
<el-table-column prop="createTime" label="发表时间" />
<el-table-column prop="updateTime" label="更新时间" />
<el-table-column label="操作">
<template #default="scope">
<el-button type="primary" @click="handleUpdate(scope.$index, scope.row)">修改</el-button>
<el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</template>
<script setup>
const articleList = [
{
cover: 'https://typora-lyx.oss-cn-guangzhou.aliyuncs.com/typora/wallhaven-6dqemx.jpg',
title: '测试',
category: '分类1',
tags: '标签1',
views: 0,
type: '原创',
createTime: '2022-11-17',
updateTime: '2022-11-17'
}
]
</script>
<style lang="scss" scoped></style>
Loading…
Cancel
Save