课程发布表单-步骤导航

一 配置路由

1 添加vue组件

组件开发的场景

• 业务逻辑独立

• 组件可复用

• 组件过于庞大可拆分为子组件

2 添加路由

// 课程管理
  {
    path: '/course',
    component: Layout,
    redirect: '/course/list',
    name: 'Course',
    meta: { title: '课程管理' },
    children: [
      {
        path: 'list',
        name: 'CourseList',
        component: () => import('@/views/course/list'),
        meta: { title: '课程列表' }
      },
      {
        path: 'info',
        name: 'CourseInfo',
        component: () => import('@/views/course/form'),
        meta: { title: '发布课程' }
      },
      {
        path: 'info/:id',
        name: 'CourseInfoEdit',
        component: () => import('@/views/course/form'),
        meta: { title: '编辑课程' },
        hidden: true
      }
    ]
  },

二 整合步骤导航

组件开发的步骤

step1：创建组件文件（*.vue）

step2：在父组件中引入组件  import

step3：注册组件 components

step4：使用组件 <组件名>

1 表单页面

form.vue

<template>
  <div class="app-container">
    <!-- 步骤导航 -->
    <h2 style="text-align: center;">发布新课程</h2>
    <!-- active:当前激活步骤
    finish-status：结束步骤的状态 wait / process / finish / error / success
    simple：是否应用简洁风格
     -->
    <el-steps :active="active" finish-status="success" simple style="margin-bottom: 40px">
      <el-step title="填写课程基本信息" />
      <el-step title="创建课程大纲" />
      <el-step title="发布课程" />
    </el-steps>
    <!-- step1：填写课程基本信息 -->
    <info v-if="active === 0" />

    <!-- step2：创建课程大纲 -->
    <chapter v-if="active === 1" />

    <!-- step3：发布课程 -->
    <publish v-if="active === 2 || active === 3" />
  </div>
</template>

<script>
// 引入子组件
import Info from '@/views/course/components/Info'
import Chapter from '@/views/course/components/Chapter' // 找Chapter.vue 或 Chapter/Index.vue
import Publish from '@/views/course/components/Publish'

export default {
  components: { Info, Chapter, Publish }, // 注册子组件
  data() {
    return {
      active: 0,
      courseId: null
    }
  }
}
</script>

2 课程信息页面

components/info.vue

<template>
  <div class="app-container">
    <!-- 课程信息表单 TODO -->
    <div style="text-align:center">
      <el-button :disabled="saveBtnDisabled" type="primary" @click="saveAndNext()">保存并下一步</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      saveBtnDisabled: false // 按钮是否禁用
    }
  },
  methods: {
    // 保存并下一步
    saveAndNext() {
      this.saveBtnDisabled = true   
      this.$parent.active = 1
    }
  }
}
</script>

3 课程大纲页面

components/Chapter/index.vue

<template>
  <div class="app-container">
    Chapter Index
    <!-- 章节列表 -->
    <div style="text-align:center">
      <el-button type="primary" @click="prev()">上一步</el-button>
      <el-button type="primary" @click="next()">下一步</el-button>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    // 上一步，即跳到第一个步骤
    prev() {
      this.$parent.active = 0
    },
    // 下一步，即跳到第三个步骤
    next() {
      this.$parent.active = 2
    }
  }
}
</script>

4 课程发布页面

<template>
  <div class="app-container">
    <!--课程预览 -->   
    <div style="text-align:center">
      <el-button type="primary" @click="prev()">上一步</el-button>
      <el-button :disabled="publishBtnDisabled" type="primary" @click="publish()">发布课程</el-button>
    </div>
  </div>
</template>

<script>
export default {

  data() {
    return {
      publishBtnDisabled: false // 按钮是否禁用
    }
  },

  methods: {
    // 上一步
    prev() {
      this.$parent.active = 1
    },

    // 下一步
    publish() {
      this.publishBtnDisabled = true   
      this.$parent.active = 3
    }
  }
}
</script>

三 测试