实现添加更多功能

实现添加更多功能

1.【更多功能】区域中。点击绿色“+”号，会自动添加到【老客户】区域中

2.【老客户】区域中，点击红色“-”号，会自动添加到【跟多功能】区域中

实现方式

1.通过数组的push和splice方法实现

<template>
  <!-- 业务功能配置 -->
  <div>
    <!-- 客户 -->
    <div class="custom"> 老客户 </div>
    
    <div class="pic_total">
      <div v-for="(item, index) in cardApplyList" :key="index" class="item">
        <div class="pic">
          <img :src="item.src" />
          <img src="@/assets/images/home/del.png" class="del" @click="remove(index)"/>
        </div>
        <div class="itemtxt">{{ item.process_name }}</div>
      </div>
    </div>

    <!-- 更多功能 -->
    <div class="custom"> 更多功能 </div>
    
    <div class="pic_total">
      <div v-for="(item, index) in cardApplyList1" :key="index" class="item">
        <div class="pic">
          <img :src="item.src" />
          <img src="@/assets/images/home/add.png" class="add" @click="add(index)"/>
        </div>
        <div class="itemtxt">{{ item.process_name }}</div>
      </div>
    </div>
    
    
    <!-- 底部 -->
    <div class="buttom">
      <div class="cancel">取消</div>
      <div class="finish">完成</div>
    </div>
  </div>
</template>

   data() {
    return {
      cardApplyList: [
        {
          src: require("@/assets/images/home/apply.png"),
          process_name: "卡片申请",
        },
        {
          src: require("@/assets/images/home/live.png"),
          process_name: "卡片激活",
        },
        {
          src: require("@/assets/images/home/apply.png"),
          process_name: "卡片申请",
        },
        {
          src: require("@/assets/images/home/live.png"),
          process_name: "卡片激活",
        },
        {
          src: require("@/assets/images/home/apply.png"),
          process_name: "卡片申请",
        },
        {
          src: require("@/assets/images/home/live.png"),
          process_name: "卡片激活",
        },
        {
          src: require("@/assets/images/home/apply.png"),
          process_name: "卡片申请",
        },
        {
          src: require("@/assets/images/home/live.png"),
          process_name: "卡片激活",
        },
      ],
      
      cardApplyList1: [
        {
          src: require("@/assets/images/home/apply.png"),
          process_name: "卡片申请",
        },
        {
          src: require("@/assets/images/home/live.png"),
          process_name: "卡片激活",
        },
        {
          src: require("@/assets/images/home/apply.png"),
          process_name: "卡片申请",
        },
        {
          src: require("@/assets/images/home/live.png"),
          process_name: "卡片激活",
        },
        {
          src: require("@/assets/images/home/apply.png"),
          process_name: "卡片申请",
        },
        {
          src: require("@/assets/images/home/live.png"),
          process_name: "卡片激活",
        },
        {
          src: require("@/assets/images/home/apply.png"),
          process_name: "卡片申请",
        },
        {
          src: require("@/assets/images/home/live.png"),
          process_name: "卡片激活",
        },
      ],
    };
  },
  
// 移除事件
remove(index) {
  let item = this.cardApplyList[index];
  this.cardApplyList.splice(index, 1);
  this.cardApplyList1.push(item);
},

//点击添加事件
add(index) {
  let item = this.cardApplyList[index];
  this.cardApplyList.push(item);
  this.cardApplyList1.splice(index, 1);
},