浅入深出Vue：文章编辑

若羽

发布于 2019-07-17 22:15:33

6910

发布于 2019-07-17 22:15:33

文章被收录于专栏：Code思维奇妙屋Code思维奇妙屋

登录与注册功能都已经实现，现在是时候来开发文章编辑功能了。

这里咱们就使用 markdown 作为编辑语言吧，简洁通用。那么我们就需要找一下 markdown 的编辑器组件了，而且还要支持 vue噢。

若羽这里找到的一个是 mavonEditor，在 github 上有2k+ 的 star。文档也都是中文的，比较友好。

mavonEditor地址

添加组件 && 新建编辑组件

首先来安装一下编辑器：

npm install mavon-editor --save

然后在 main.js 中引入组件：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.use(mavonEditor)

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

接下来新建我们的编辑组件了，Edit.vue:

<template>
    <div></div>
</template>

<script>
    export default {
        name: "Edit"
    }
</script>

<style scoped>

</style>

然后为它添加路由对象：

{
    path: '/edit',
    name: 'edit',
    component: () => import('./views/Edit.vue')
}

编写视图代码

首先一篇文章有哪些要素：

标题
内容

最基本是需要这两个要素的。

data 中定义这两个要素：

data() {
    return {
        model: {
            title: '',
            content: '',
        }
    }
}

在布局上我们依旧延续之前的简约风，使用 ElementUI 进行布局。但这里我们不居中了，直接填满全屏就好。

代码：

<template>
    <div>
        <el-row>
            <el-form>
                <el-form-item label="文章标题">
                    <el-col :span="6">
                        <el-input v-model="model.title"></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item>
                    <el-col>
                        <mavon-editor v-model="model.content"></mavon-editor>
                    </el-col>
                </el-form-item>

                <el-form-item>
                    <el-col>
                        <el-button type="primary" size="small" @click="submit">发表</el-button>
                    </el-col>
                </el-form-item>
            </el-form>
        </el-row>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: "Edit",
        data() {
            return {
                model: {
                    title: '',
                    content: '',
                }
            }
        },
        methods: {
            submit() {
                 axios.post('https://451ece6c-f618-436b-b4a2-517c6b2da400.mock.pstmn.io/publish', this.model)
                     .then(res => {
                         if(res.data.Code === 200) {
                             this.$message.success('发布成功');
                         }
                     })
            }
        }
    }
</script>

效果如下：

写在后面

这个页面也还确实了一部分功能，在发布完成后，应该是要跳转到文章列表的页面去查看所有的文章。

因为列表页面还没有做，所以这里暂时先挖个坑放着~

本篇博文使用了第三方组件，也是在演示如何使用第三方组件来为自己提高开发效率，毕竟不可能所有的东西都自己来从0实现，那多累，还不一定能保证完善。部分第三方组件无法满足的功能就可以考虑自己来实现了。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019-07-16 ，如有侵权请联系 cloudcommunity@tencent.com 删除

markdown

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

markdown

登录后参与评论

0 条评论

热度