Vue Steps步骤组件用法

简介: Vue Steps步骤组件用法

组件位置:@/components/Steps/Steps.vue


1.引入

//步骤名称-状态
<Steps :active="stepActive" finish-status="success" style="padding: 0 100px;width: 100%;margin: 0 auto">
   <Step v-for="(item, index) in stepList" :key="index" :title="item" icon="el-icon-success" />
</Steps>

//组件内容区
<div class="step-content">
   <component :is="currentStepComponent" ref="component" />
</div>


//底部按钮-上一步-下一步
<el-button type="primary" icon="el-icon-arrow-left" :disabled="stepActive === 0 || saveLoading" @click="prevStep">上一步</el-button>
<el-button type="primary" :disabled="stepActive === stepList.length - 1" @click="nextStep">下一步<i class="el-icon-arrow-right el-icon--right" /></el-button>
<el-button v-if="stepActive === stepList.length - 1" :loading="saveLoading" type="primary" @click="savePage">保存</el-button>

2.data

//data里面定义
stepActive: 0, //默认组件状态
componentsList: [
 require('./steps/BaseInfo').default,
 require('./steps/MedicalInfo').default,
 require('./steps/SetlInfo').default,
 require('./steps/DiagnoseInfo').default,
 require('./steps/OperationInfo').default,
 require('./steps/GraveInfo').default
],

3.computed



computed:{
  currentStepComponent() {
      return this.componentsList[this.stepActive]
  },
  stepList() {
      if (this.$store.getters.medicalType === '1') {
        return ['基础信息', '就医信息', '结算信息', '住院诊断', '手术操作信息', '重症监护信息']
      } else {
        return ['基础信息', '就医信息', '结算信息', '门诊诊断', '手术操作信息']
      }
  },
}
  

4.methods

 //  上一步
prevStep() {
  if (this.stepActive > 0) this.stepActive--
},
    //  下一步
nextStep() {
      if (this.$store.getters.billingDetail.baseInfo.setlId === '') {
        this.$msgWarning('请先查询结算信息')
      } else {
        this.$refs.component.doNext(() => {
          if (this.stepActive < this.stepList.length - 1) this.stepActive++
        })
      }
},

5.子组件里面定义校验规则

//子组件
 doNext(callback) {
  // 校验处理
 callback()
},
相关文章
|
3天前
|
存储 缓存 JavaScript
谈谈你对vue的了解
谈谈你对vue的了解
14 3
|
4天前
|
JavaScript API
Vue axjx 跨域请求
Vue应用中解决跨域问题可通过配置代理服务器。方法一是设置`devServer.proxy`到目标服务器端口,如`http://localhost:3000`,然后使用axios发送请求。方法二是为多个代理配置,如`/api`和`/api2`,分别指向不同端口,利用`pathRewrite`重写路径。请求时需加上相应前缀,如`/api/index`。
13 1
|
4天前
|
JavaScript 前端开发 Java
JavaSE精选-Vue
JavaSE精选-Vue
7 1
|
4天前
|
JavaScript
Vue父子组件传值
<!-- 父组件向子组件传地值 -->
14 2
|
5天前
|
JavaScript Java
Vue : v-if, v-show
Vue : v-if, v-show
13 0
Vue : v-if, v-show
|
存储 前端开发 JavaScript
为什么我不再用Vue,改用React?
当我走进现代前端开发行业的时候,我做了一个每位开发人员都要做的决策:选择一个合适的框架。当时正逢 jQuery 被淘汰,前端开发者们不再用它编写难看的、非结构化的老式 JavaScript 程序了。
|
11天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
30 0
|
12天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
5天前
|
JavaScript 前端开发
Vue : 监视属性
Vue : 监视属性
9 0
|
5天前
|
缓存 JavaScript
Vue: 事件修饰符, 键盘事件, 鼠标事件,计算属性
Vue: 事件修饰符, 键盘事件, 鼠标事件,计算属性
22 2