课程发布表单-步骤导航

心已赠人 2021-07-25 01:55 288阅读 0赞

# 一 配置路由 #

## 1 添加vue组件 ##

组件开发的场景

*  业务逻辑独立
 *  组件可复用
 *  组件过于庞大可拆分为子组件

![20201204201310680.png][]

## 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>
        
        <el-steps :active="active" finish-status="success" simple style="margin-bottom: 40px">
          <el-step title="填写课程基本信息" />
          <el-step title="创建课程大纲" />
          <el-step title="发布课程" />
        </el-steps>
        
        <info v-if="active === 0" />
    
        
        <chapter v-if="active === 1" />
    
        
        <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">
        
        <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>

# 三 测试 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

[20201204201310680.png]: /images/20210724/a0ab987c888143e59c6536fccc910e34.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/cf9b4232a713411cb56a39738b67d90c.png