Vue实现步骤条（el-step）+Popover弹出框

最新推荐文章于 2024-09-02 15:43:05 发布

夜阑卧听风吹雨，铁马冰河入梦来

最新推荐文章于 2024-09-02 15:43:05 发布

阅读量444

点赞数 6

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

本文链接：https://blog.csdn.net/lingxiyizhi_ljx/article/details/141721405

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1、实现效果

hover到每一个步骤条上时，如果当前有未完成情况（unFinishedMe不为空），就使用popover显示出来，如果没有hover时就不显示

2、实现思路

循环app信息列表显示多个进度条使用el-steps

循环步骤列表，显示多个步骤使用el-step

使用el-popover，进行未完成情况的展示

3、页面代码

主要点：

el-popover使用v-model绑定一个变量来控制el-poppver的显示与隐藏

要在列表中每一个步骤节点加一个showPopover字段控制el-poppver的显示与隐藏

trigger使用方式要使用manual，自己写代码来控制显示与隐藏

使用@mouseenter和@mouseleave方法控制鼠标移动时el-poppver的显示与隐藏

方法参数需要是列表的索引

<el-row>
      <div v-for="(item,index0) in appVersionInfoList" :key="index0">
        <el-col :span="4" style="margin-left: 80px;margin-top: 50px">
          <div>{{ item.appName }}</div>
        </el-col>
        <el-col :span="20" style="margin-left: 250px;margin-top: 0px">
          <el-steps finish-status="success" style="margin: 20px" :active="1" space="450px">
            <el-step  v-for="(phaseInfo, index) in item.phaseInfoList" :key="index">
              <template slot="description" width="150px" >
                <el-popover
                  :key="index"
                  v-model="phaseInfo.showPopover"
                  placement="right"
                  trigger= "manual">
                  <span style="font-size: 15px;font-weight: bold">未完成情况</span>
                  <el-divider ></el-divider>
                  <ul>
                    <li style="text-align: left" v-for="unfinishName in phaseInfo.unFinishedMe">{{ unfinishName }}</li>
                  </ul>
                  <div slot="reference" style="width: 120px" @mouseenter="handleMouseEnter(index0,index)"
                        @mouseleave="handleMouseLeave(index0,index)" >
                    <div style="margin-top: 30px;font-size: 20px">{{ phaseInfo.phaseName }}</div>
                    <div style="margin-top: 10px;font-size: 15px">{{ phaseInfo.phaseTime }}</div>
                  </div>
                </el-popover>
              </template>
            </el-step>
          </el-steps>
        </el-col>
      </div>
    </el-row>

4、数据结构+方法

appVersionInfoList: [
        {
          appName: "百度App 1.1.1",
          phaseInfoList: [
            {
              phaseName: "需求开发测试",
              phaseTime: "2019-04-11",
              unFinishedMe: [
                "张三",
                "李四",
                "王五",
                "赵六"
              ],
              showPopover:false
            },
            {
              phaseName: "需求集成阶段",
              phaseTime: "2020-04-11",
              unFinishedMe: [
              ],
              showPopover:false
            },
            {
              phaseName: "灰度阶段",
              phaseTime: "2020-04-11",
              unFinishedMe: [
                "张三",
                "李四",
                "王五",
                "赵六"
              ],

              showPopover:false
            }
          ]
        }, {
          appName: "抖音App 1.1.1",
          phaseInfoList: [
            {
              phaseName: "需求开发测试",
              phaseTime: "2019-04-11",
              unFinishedMe: [
              ],
              showPopover:false
            },
            {
              phaseName: "需求集成阶段",
              phaseTime: "2020-04-11",
              unFinishedMe: [
              ],
              showPopover:false
            }
          ]
        }
      ]


    handleMouseEnter(index0,index) {
      var phaseInfoListElement = this.appVersionInfoList[index0].phaseInfoList[index];
      if(phaseInfoListElement.unFinishedMe.length>0){
        phaseInfoListElement.showPopover=true;
      }
    },

    handleMouseLeave(index0,index) {

      this.appVersionInfoList[index0].phaseInfoList[index].showPopover=false;
    }