10-文章列表

1.1-页面布局

• el-form表单一行显示

  • :inline="true"

<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>文章列表</span>
      </div>
      <!-- 搜索区域 -->
      <div class="search-box">
        <el-form :inline="true">
          <el-form-item label="文章分类">
            <el-select placeholder="请选择分类" size="small">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发布状态" style="margin-left: 15px;">
            <el-select  placeholder="请选择状态" size="small">
              <el-option label="已发布" value="已发布"></el-option>
              <el-option label="草稿" value="草稿"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small">筛选</el-button>
            <el-button type="info" size="small">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 发表文章的按钮 -->
        <el-button type="primary" size="small" class="btn-pub">发表文章</el-button>
      </div>
​
      <!-- 文章表格区域 -->
​
      <!-- 分页区域 -->
    </el-card>
  </div>
</template>
​
<script>
export default {
  name: 'ArtList',
  data() {
    return {
    }
  }
}
</script>
​
<style lang="less" scoped>
.search-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  .btn-pub {
    margin-top: 5px;
  }
}
​
/deep/ .ql-editor {
  min-height: 300px;
}
​
// 设置图片封面的宽高
.cover-img {
  width: 400px;
  height: 280px;
  object-fit: cover;
}
​
.el-pagination {
  margin-top: 15px;
}
​
.title {
  font-size: 24px;
  text-align: center;
  font-weight: normal;
  color: #000;
  margin: 0 0 10px 0;
}
​
.info {
  font-size: 12px;
  span {
    margin-right: 20px;
  }
}
​
// 修改 dialog 内部元素的样式，需要添加样式穿透
/deep/ .detail-box {
  img {
    width: 500px;
  }
}
</style>
​

1.2-发表文章01（布局）

• el-dialog对话框全屏显示

  • fullscreen

<!-- 发表文章对话框 -->
<el-dialog title="发表文章" :visible.sync="dialogVisible" fullscreen>
  <!-- 对话框内容 -->
  <el-form label-width="100px">
    <!-- 1.文章标题 -->
    <el-form-item label="文章标题">
      <el-input placeholder="请输入标题"></el-input>
    </el-form-item>
    <!-- 2.文章分类 -->
    <el-form-item label="文章分类">
      <el-select placeholder="请选择分类" style="width: 100%;" value="">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <!-- 3.文章内容 -->
    <!-- 4.文章封面 -->
    <el-form-item label="文章封面">
      <!-- 用来显示封面的图片 -->
      <img src="@/assets/images/cover.jpg" alt="" class="cover-img" ref="imgRef"/>
      <br />
      <!-- 文件选择框，默认被隐藏 -->
      <input type="file" style="display: none;" accept="image/*" ref="iptFile"/>
      <!-- 选择封面的按钮 -->
      <el-button type="text">+ 选择封面</el-button>
    </el-form-item>
    <!-- 5.底部按钮 -->
    <el-form-item>
      <el-button type="primary">发布</el-button>
      <el-button type="info">存为草稿</el-button>
    </el-form-item>
  </el-form>
</el-dialog>

1.3-发表文章02（富文本编辑器插件）

基于 vue-quill-editor 实现富文本编辑器：www.npmjs.com/package/vue…

• 1.下载插件

  • npm i vue-quill-editor@3.0.6 -S

• 2.导入组件（写在main.js就是全局可用，写在页面就是当前页面可用）

  • // 导入富文本编辑器
    import VueQuillEditor from 'vue-quill-editor'
    // 导入富文本编辑器的样式
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    //导入vue(在main.js中这行可以省略。 )
    import Vue from 'vue'
    // 全局注册富文本编辑器
    Vue.use(VueQuillEditor)
    ​
    

• 3.使用组件

  • <el-form-item label="文章内容">
      <quill-editor></quill-editor>
    </el-form-item>
    

1.5-发表文章03(双向绑定表单数据)

• 1.给data添加数据（属性名与接口文档一致）

• data() {
      return {
        //控制对话框显示/隐藏
        dialogVisible: false,
        //发布文章数据
        pubForm: {
          // 文章的标题
          title: '',
          // 所属的分类 Id
          cate_id: '',
          // 文章的内容
          content: '',
          // 选中的封面的文件（null 表示没有选中任何封面文件）
          cover_img: null,
          // 文章的发布状态，可选值只有（草稿、已发布）
          state: ''
        },
      };
    }
  

• 2.绑定数据(标题、分类、内容)