这是在vue文件中引入的element代码块:
<template>
<div class="publish_container">
<el-card class="box-card">
<div slot="header" class="clearfix">
<!-- 面包屑 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>发布文章</el-breadcrumb-item>
</el-breadcrumb>
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
</div>
<el-form ref="form" :model="form" label-width="50px">
<el-form-item label="标题">
<el-input v-model="article.title"></el-input>
</el-form-item>
<el-form-item label="内容">
<el-input type="textarea" v-model="article.content"></el-input>
</el-form-item>
<el-form-item label="封面">
<el-radio-group v-model="form.resource">
<el-radio label="单图"></el-radio>
<el-radio label="三图"></el-radio>
<el-radio label="无图"></el-radio>
<el-radio label="自动"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="频道">
<el-select v-model="form.region" placeholder="请选择频道">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">发表</el-button>
<el-button>存入草稿</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</template>
这是在网页上展示的效果图:
有大哥能帮忙看看嘛,万分感谢!!!!
页面路由都是基于layout这个路由下面的
{
path:'/',
// 有默认子路由的时候,不需要给父路由起名字
// name:'',
component:Layout,
children:[
{
path:'', //path为空会默认作为子路由
name:'home',
component:Home
},
//内容管理页面路由
{
path:'/content_admin',
name:'content_admin',
component:ContentAdmin
},
//素材管理页面路由
{
path:'/material_admin',
name:'material_admin',
component:MaterialAdmin
},
//发布文章页面路由
{
path:'/publish_art',
name:'publist_art',
component:PublishArt
},
//评论管理页面路由
{
path:'/comment_admin',
name:'comment_admin',
component:CommentAdmin
},
//粉丝管理页面路由
{
path:'/fans_admin',
name:'fans_admin',
component:FansAdmin
},
//个人设置页面路由
{
path:'/person_setting',
name:'person_setting',
component:PersonSetting
}
]
},