发布文章（三）01-封面组件-分析功能 & 基础布局-radio单选框组件-图片按钮：dialog对话框组件-tabs标签页组件

03-发布文章-封面组件-分析功能

• 组件的结构：
  • 图片按钮
  • 对话框
    • 素材库
      • 素材列表
      • 分页
      • 全部收藏切换
      • 选中图片功能
    • 上传图片
      • 上传组件
      • 上传成功后，预览。
  • 确认图片
    • 如果选的是素材库，使用选中的图
    • 如果选的是上传图片，使用上传的图片
    • 做为封面图，在图片按钮显示。
• 支持v-model

04-发布文章-封面组件-基础布局

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

• 图片按钮
• 对话框

dialog对话框组件-基本用法模式：
https://element.eleme.cn/#/zh-CN/component/dialog

tabs标签页组件-选项卡样式：
https://element.eleme.cn/#/zh-CN/component/tabs

定义了一个组件：components/my-image.vue

<template>
  <div class="container">
    <!-- 按钮图片，绑定事件进行对话框的弹出 -->
    <div class="btn_img" @click="openDialog">
      <img src="../assets/images/default.png" alt />
    </div>
    <!-- 对话框 -->
    <el-dialog :visible.sync="dialogVisible" width="750px">
       <!-- tabs标签页-选项卡样式 -->
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="素材库" name="image">素材库内容</el-tab-pane>
        <el-tab-pane label="上传图片" name="upload">上传图片内容</el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
    //组件命名
  name: 'my-image',
  data () {
    return {
      dialogVisible: false,  //默认隐藏模式
      // 选项卡name属性的值  默认选中某一个选项卡，只需要值等于name属性值即可。
      activeName: 'image'
    }
  },
  methods: {
    openDialog () {
      this.dialogVisible = true   //点击后转化为显示模式
    }
  }
}
</script>

<style scoped lang='less'>
.btn_img {
  width: 160px;
  height: 160px;
  border: 1px dashed #ddd;
  img {
    width: 100%;
    height: 100%;
    display: block;
  }
}
.dialog-footer{
    //对话框居中
  width: 100%;
  display: block;
  text-align: center;
}
</style>

组成组件：components/index.js

//导入组件
import MyImage from '@/components/my-image'
//Vue是import Vue from 'vue' 对象
//是个插件怎么使用插件  main.js使用Vue.use（插件）调用install函数传入Vue对象
//把components下的组件  注册成全局组件
//Vue.component（'组件名称' ,  '组件配置对象'）

//注册组件
Vue.component(MyImage.name, MyImage)

使用组件：vies/publish/index.vue

<!-- 封面选择组件 -->
<my-image></my-image>