瞎做 记录 还有很多不好的地方

微信截图_20211201110751.png

初始数据data.js
数据格式 [ { arr: [ {} ] } ] 数组对象数组对象格式

const datalist = [
    {
        id: 1,
        arr: [
            {
                text: "七里香",
            },
            {
                text: "一路向北",
            },
            {
                text: "晴天",
            },
            {
                text: "花海",
            },
            {
                text: "等你下课",
            },
        ],
    },
    {
        id: 1,
        arr: [
            {
                text: "曹操",
            },
            {
                text: "关键词",
            },
            {
                text: "江南",
            },
            {
                text: "修炼爱情",
            },
        ],
    },
    {
        id: 1,
        arr: [
            {
                a: 1,
                text: "光年之外",
            },
            {
                text: "泡沫",
            },
            {
                text: "喜欢你",
            },
            {
                text: "桃花诺"
            },
        ],
    },
];

export {
    datalist
}

html

<template>
  <div class="content">
    <!-- <inputs @click="gogo()"></inputs> -->
    <div class="add">
      <button @click="add()">添加音乐数据</button>
    </div>
    <div v-for="(item, index) in datalist" :key="index" class="big">
      <div class="addbtn" @click="additem(index + 1, item.arr)">+</div>
      <div class="downbtn" @click="downitem(index)">-</div>
      <h2>第{{ index + 1 }}组音乐数据</h2>
      <div v-for="(item1, index1) in item.arr" :key="index1" class="big_con">
        <input
          class="sort"
          v-model="item1.sorts"
          @blur="blurs(item, index, item1, index1)"
        />
        <span v-show="item1.flag"> {{ item1.text }}</span>
        <input class="texts" v-show="!item1.flag" v-model="item1.text" />
        <div>
          <button class="del" @click="del(index, index1)">删除</button>
          <button v-show="item1.flag" class="edit" @click="edit(index, index1)">
            编辑
          </button>
          <button
            class="save"
            v-show="!item1.flag"
            @click="save(index, index1)"
          >
            完成
          </button>
        </div>
      </div>
    </div>
    <div class="back" v-show="backshow" @click="backtop()">返回</div>
  </div>
</template>

script

<script>
import { datalist } from "./data.js";
export default {
  data() {
    return {
      datalist,
      show: false,
      indnum: "",
      backshow: false,
    };
  },
  mounted() {
    window.addEventListener("scroll", this.scrollToTop);
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollToTop);
  },
  created() {
    // 遍历数组push单个元素
    this.datalist.map((it) => {
      it.arr.map((item, index) => {
        it.arr[index].sorts = index + 1;
        it.arr[index].flag = true;
        return;
      });
    });
  },
  methods: {
    scrollToTop() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      scrollTop > 50 && (this.backshow = true);
      scrollTop <= 50 && (this.backshow = false);
    },
    // 返回顶部
    backtop() {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },
    // 焦点失去进行排序
    blurs(item, index, item1, index1) {
      this.datalist.map((mapit, mapin) => {
        if (index == mapin) {
          mapit.arr.sort((q, w) => {
            return q.sorts - w.sorts;
          });
        }
      });
    },
    // 删除某一条
    del(ind, ind1) {
      this.datalist.map((item, index) => {
        if (ind == index) {
          item.arr.map((item1, index1) => {
            if (ind1 == index1) {
              item.arr.splice(ind1, 1);
            }
          });
          return;
        }
      });
    },
    caozuo(ind, ind1, flag) {
      this.datalist.forEach((item, index) => {
        if (ind == index) {
          item.arr.forEach((item1, index1) => {
            if (ind1 == index1) {
              if (!flag) {
                item1.flag = false;
              } else {
                item1.flag = true;
              }
            }
          });
        }
      });
      this.$forceUpdate();
    },
    edit(ind, ind1) {
      this.caozuo(ind, ind1, false);
    },
    save(ind, ind1) {
      this.caozuo(ind, ind1, true);
    },
    add() {
      this.datalist.push({
        arr: [],
      });
    },
    additem(index, arr) {
      arr.push({ sorts: arr.length + 1 });
    },
    downitem(index) {
      this.datalist.splice(index, 1);
    },
    gogo() {
      this.$router.push({ path: "/m/link" });
    },
  },
};
</script>

css

<style lang="less">
.back {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  text-align: center;
  line-height: 50px;
}
.aa {
  margin-top: 20px;
}
.text {
  margin: 0 auto;
  text-align: center;
  margin-top: 20px;
  line-height: 30px;
}
.content {
  // 解决ios滑动不流畅
  -webkit-overflow-scrolling: touch;
  transition-duration: 300ms;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  padding-bottom: 50px;
  .add {
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    > span {
      line-height: 35px;
      margin-left: 20px;
    }
    > button {
      width: 100px;
      height: 35px;
      color: #fff;
      background: royalblue;
      outline: none;
      border: 0;
      border-radius: 10px;
    }
  }
  .big {
    width: 85%;
    margin: 0 auto;
    border: 3px solid #ccc;
    border-radius: 8px;
    margin-top: 10px;
    padding: 20px 10px;

    > div {
      border-radius: 5px;
    }
    .addbtn {
      float: right;
      width: 30px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30px;
      background: #ccc;
      margin-left: 8px;
    }
    .downbtn {
      float: right;
      width: 30px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30px;
      color: #fff;
      background: rgb(241, 46, 46);
    }
    .big_con {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      > input {
        border-radius: 8px;
        border: 0;
        outline: none;
        background: rgb(209, 208, 208);
        color: #333;
        height: 20px;
        line-height: 20px;
      }
      > .sort {
        width: 60px;
        text-align: center;
      }
      > .texts {
        width: 100px;
        text-align: center;
      }
      button {
        color: #fff;
        outline: none;
        padding: 3px 5px;
        border-radius: 5px;
        border: 0;
      }
      .del {
        background: rgb(241, 46, 46);
      }
      .edit {
        background: royalblue;
      }
      .save {
        background: rgb(2, 189, 2);
      }
    }
  }
}
.sel {
  outline: none;
  border: 0;
  width: 200px;
  height: 50px;
}
</style>