发布文章（一）-基础布局-button按钮组件-radio单选框组件-display转块元素使用-使用封装好的频道组件

最新推荐文章于 2025-03-20 02:05:04 发布

viceen

最新推荐文章于 2025-03-20 02:05:04 发布

阅读量474

点赞数

CC 4.0 BY-SA版权

分类专栏：项目-vue-PC端文章标签： vue css html

本文链接：https://blog.csdn.net/weixin_44867717/article/details/104358465

项目-vue-PC端专栏收录该内容

53 篇文章

订阅专栏

本文介绍如何使用Element UI的组件设计一个发布文章的表单界面，包括按钮、单选框、输入框等组件的应用，以及表单的布局结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

01-发布文章-基础布局

button按钮组件-默认和主要模式——网址：button按钮组件-默认和主要模式
https://element.eleme.cn/#/zh-CN/component/button

radio单选框组件-单选框组模式——网址：radio单选框组件-单选框组模式
https://element.eleme.cn/#/zh-CN/component/radio

基础布局：views/publish/index.vue

<template>
  <div class='container'>
    <el-card>
      <div slot="header">
        <my-bread>发布文章</my-bread>
      </div>
      <!-- 表单 -->
      <el-form label-width="120px">
        <el-form-item label="标题：">
          <el-input v-model="articleForm.title" style="width:400px"></el-input>
        </el-form-item>
        <el-form-item label="内容：">
          富文本
        </el-form-item>
        <el-form-item label="封面：">
            //单选框组件-单选框组模式
          <el-radio-group v-model="articleForm.cover.type">
            <el-radio :label="1">单图</el-radio>
            <el-radio :label="3">三图</el-radio>
            <el-radio :label="0">无图</el-radio>
            <el-radio :label="-1">自动</el-radio>
          </el-radio-group>
          <!-- 选择封面图按钮 -->
          <div class="btn_img">
            <img src="../../assets/images/default.png" alt="">
          </div>
        </el-form-item>
        <el-form-item label="频道：">
            //双向绑定后台数据-使用封装好的频道组件
          <my-channel v-model="articleForm.channel_id"></my-channel>
        </el-form-item>
        <el-form-item >
            //主要按钮和默认按钮模式
          <el-button type="primary">发表</el-button>
          <el-button>存入草稿</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      articleForm: {
        title: '',
        cover: {
          type: 1
        },
        channel_id: null
      }
    }
  }
}
</script>

<style scoped lang='less'>
.btn_img{
  width: 160px;
  height: 160px;
  border: 1px dashed #ddd;
    //总结
//1.display:inline;//将块级元素转化为行级元素，这时块级元素设置的宽高无效
//2.display:block;//将行级元素转块级元素，这时原本的行级元素会变成块级元素独占一行，同时可以设置宽高
//3.display:inline-block;//将行级元素转块级元素，不会独占一行，可以设置宽高
  img{
    width: 100%;
    height: 100%;
    display: block;
  }
}
</style>