Vue写步骤条

最新推荐文章于 2024-08-30 16:43:39 发布

避坑记录

最新推荐文章于 2024-08-30 16:43:39 发布

阅读量671

点赞数

分类专栏： Vue 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_44068262/article/details/123111684

版权

Vue 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文分享了一位开发者在实现Vue.js步骤条组件时遇到的布局问题，详细介绍了组件的HTML和CSS代码。开发者指出，在设置元素显示和定位时，display:inline样式导致的宽度失效和定位问题是一个需要注意的难点。通过调整样式，最终成功创建了一个功能完备的步骤条，包括完成状态的切换。文章还提供了一个`onDone()`方法，用于更新步骤的状态。

摘要由CSDN通过智能技术生成

其实这个功能本身js方法不难，我花时间是在布局上。

<template>
  <div class="box-wrap">
      <div class="wrap">
    <div class="box" v-for="item in this.stepList" :key="item.id">
      <div class="heng icon">
         <div v-if="!item.done" class="heng numflag">{{item.id}}</div>
          <div v-else class="heng iconflag"></div>
      </div>
      <div class="tag-title">
        {{item.title}}
        <div class="border-zore" v-if="item.id !== stepList.length" :class="item.done ? 'active' : ''"></div>
      </div>
    </div>
  </div>
    <!-- 每个部分具体操作 -->
    <div class="tag-descript"></div>
    <button @click="onDone()">完成</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      stepList: [
        {
          id: 1,
          title: '填写基本信息',
          done: false,
          descript: "第一部分信息"
        },
        {
          id: 2,
          title: '设置密码',
          done: false,
          descript: "第二部分信息"
        },
        {
          id: 3,
          title: '确认信息',
          done: false,
          descript: "第三部分信息"
        },
      ],
      doneNum: 0,
    }
  },
  methods: {
    onDone() {
      let stepList = this.stepList
      if(this.doneNum <= stepList.length) {
        this.doneNum += 1
        stepList.map(item=>{
          if(this.doneNum === item.id) {
            item.title = '已完成'
            item.done = true
          }
        })
      } else {
        this.doneNum = 0
      }
    }
  }
}
</script>

在写样式的时候，

display:inline;设置的宽度失效，定位失效。（需注意使用）

<style scoped>
.box-wrap {
  width: 76%;
  margin: 0 auto;
  background-color: #d8d1d231;
}
.wrap {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  padding: 10px;
}
.box {
  width: 33%;
  display: flex;
  justify-content: start;
}
.heng {
  display: inline;
}
.icon {
  width: 30px;
  height: 30px;
}
.numflag {
  width: 100%;
  height: 100%;
  font-size: 18px;
  color: #fff;
  padding: 2px 8px;
  box-sizing: border-box;
  background-color: #c5c8ce;
  border-radius: 50%;
}
.iconflag::before {
  content: '√';
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  font-size: 18px;
  color: #2d8cf0;
  border: 1px solid #2d8cf0;
  border-radius: 50%;
  padding: 2px 6px;
}
.tag-title {
  position: relative;
  width: 100%;
  margin-left: 14px;
  height: 30px;
  font-size: 18px;
  letter-spacing: 2px;
  padding-right: 200px;
  box-sizing: border-box;
}
.border-zore {
  width: 50%;
  height: 2px;
  background-color: #c5c8ce;
  position: absolute;
  top: 12px;
  left: 36%;
}
.active {
  background-color: #2d8cf0;
}
.tag-descript {
  margin-top: 20px;
}
</style>