VUE.js 下 。首页，可手动添加功能性跳转按钮

• 可手动新增动态跳转功能性按钮

效果图：

点击新增：

 

 

主要思路：前台操作，动态改变数组元素，从而改变页面渲染。

新增弹窗分两部分：

　　　　上方：为可以新添的连接按钮。（可以添加的按钮）

　　　　下方：效果图中的快捷入口展示按钮（总的按钮）

 

功能效果：

　　1. 点击上方的按钮，会在下方新增上方对应点击的按钮。下方按钮改变，直接影响首页重新渲染对应模块.

　　2. 点击下方按钮， 会在上方新增对应点击的按钮，下方被点击的按钮消失

 

点击上方：我要查验-->新增效果：

 

　　

 

　　

 预设两个数组控制：

Entrys：存储展示按钮的集合【可预设元素，作为初始化页面时的默认显示按钮】。

EntrysAdd：存储可以新增的按钮。

data() {
      return {
        Entrys:[
          {id:5,imgUrl:require("../assets/img/home/快捷入口_我要邮寄.png"),content:"我要邮寄"},
          {id:6,imgUrl:require("../assets/img/home/快捷入口_我要邮寄.png"),content:"我要邮寄"},
          {id:7,imgUrl:require("../assets/img/home/快捷入口_我要邮寄.png"),content:"我要邮寄"},
        ],
        EntrysAdd:[
          {id:1,imgUrl:require("../assets/img/home/快捷入口_发票采集.png"),content:"发票采集"},
          {id:2,imgUrl:require("../assets/img/home/快捷入口_我要查验.png"),content:"我要查验"},
          {id:3,imgUrl:require("../assets/img/home/快捷入口_我要认证.png"),content:"我要认证"},
          {id:4,imgUrl:require("../assets/img/home/快捷入口_我要邮寄.png"),content:"我要邮寄"},
        ]
    }
}

首页效果HTML:

<div class="shortcut_list">
            <div class="shortcut_item" v-for="item in Entrys" :key="item.id">
              <img class="item_img" :src="item.imgUrl" alt="">
              <span class="item_title">{{item.content}}</span>
            </div>
            <!-- 新增扭 -->
            <div class="shortcut_itemLast" @click="addWay">
              <img src="../assets/img/home/快捷入口_添加.png" alt="">
              <span>新增</span>
            </div>
          </div>

 

点击新增：弹窗HTML:

<!-- 新增弹窗 -->
    <el-dialog
      title="添加"
      id="addroad"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-card class="box-card">
        <div class="shortcut_item" v-for="item in EntrysAdd" :key="item.id">
          <img class="item_img" :src="item.imgUrl" alt="" @click="appendAdd(item.id)">  //传递id 进行筛选
          <span class="item_title">{{item.content}}</span>
        </div>
      </el-card>
      <br>
      
      <el-card class="box-card">
        <div class="shortcut_item" v-for="item in Entrys" :key="item.id">
          <img class="item_img" :src="item.imgUrl" alt="" @click="appendDele(item.id)">
          <span class="item_title">{{item.content}}</span>
        </div>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeMainArr">确 定</el-button>
      </span>
    </el-dialog>

 

CSS样式：

#addroad{
    .el-dialog{
      width: 100%;
      .box-card{
        width: 100%;
        /deep/.el-card__body{
          display: flex;
          justify-content: space-between;
          align-items: center;
          .shortcut_item{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            img{
              cursor: pointer;
            }
          }
        }
      }
    }
  }

JS:

　　　　
　　//点击上方图标，将这个用id标记的按钮新增到存储下方按钮的数组中

EntrysAdd，并在存储上方按钮的数组Entrys中移除这个元素。【此处要注意要先加入到下方数组中，如果先移除会导致EntrysAdd[i]代表的并非是满足if条件的元素，splice改变了数组的长度】

　　appendAdd(mark){
        console.log(mark,"标记id")
        var i = 0;
        while(i < this.EntrysAdd.length){
          if(this.EntrysAdd[i].id == mark){
            this.Entrys.push(this.EntrysAdd[i]);
            this.EntrysAdd.splice(i,1);
          }
          i++;
        }
      },
      appendDele(mark){
        var i = 0;
        while(i < this.Entrys.length){
          if(this.Entrys[i].id == mark){
            this.EntrysAdd.push(this.Entrys[i]);
            this.Entrys.splice(i,1);
          }
          i++;
        }
      },

 

此外要加入对应的跳转路由功能：只需要在数组中添加一个属性:储存对应路由路径，此处便不再说明。