chat/src/pages/cardHolder/labelManage.vue

<template>
  <div class="cx-labelManage">
    <movable-area class="moveMenuBox">
      <movable-view class="moveMenuCont" :x="tran" :y="vert" direction="all" damping="30" friction="5" @change="handleChange">
        <img class="moveMenuPic" src="/static/images/buoy.png" @click="newLabel()">
      </movable-view>
      <div class="labelBox" v-for="(item, index) in labelData" :key="index">
        <p class="text">{{item.text}}({{item.num}})</p>
        <div class="optionsSet">
          <a class="delete text">删除</a>
          <div class="separate">|</div>
          <a class="update text">编辑</a>
          <div class="separate">|</div>
          <a class="moveDown text" @click="moveUps(index)" v-if="index == labelData.length - 1">上移</a>
          <a class="moveDown text" @click="moveDowns(index)" v-else>下移</a>
        </div>
        <div class="empty">&nbsp; </div>
      </div>
      
    </movable-area>

    <!--新建标签-->
    <div class="newLabelDiv" v-if="newLabelDivFlag">
      <div class="newLabelBox">
        <p class="title">新建标签</p>
        <input class="newLabelName" v-text="inputText" type="text" placeholder="请输入分组名称，不超过10个字">
        <div class="confirmBox">
          <button class="cancel" @click="newLabelCancel()">取消</button>
          <button class="save" @click="newLabelSave()">保存</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tran: 350,    //横轴
      vert: 500,     //纵轴
      inputText: '',  //输入框
      newLabelDivFlag: false,  //控制新建标签框展示与隐藏
      labelData: [
        {text: '重要 ', num: 8},
        {text: '朋友 ', num: 19},
        {text: '家人 ', num: 8},
        {text: '同事 ', num: 40}
      ]
    }
  },
  onLoad () {

  },
  methods: {
    handleChange(e) {
      // console.log(e);
      this.tran = e.detail.x;
      this.vert = e.detail.y;
      if (this.tran <= 188) {
        console.log('超过中间线了');
        this.tran = 0;
      } else {
        this.tran = 350;
      }
    },
    moveUps(index) {
      this.labelData[index] = this.labelData.splice(index - 1, 1, this.labelData[index])[0];
    },
    moveDowns(index) {
      this.labelData[index] = this.labelData.splice(index + 1, 1, this.labelData[index])[0];
    },
    newLabel() {
      this.newLabelDivFlag = true;
    },
    newLabelCancel() {
      this.inputText = '';
      this.newLabelDivFlag = false;
    },
    newLabelSave() {
      this.labelData.push({text: this.inputText, num: 5});
      this.newLabelDivFlag = false;
      this.inputText = '';
      console.log(this.labelData);
    }
  }
}
</script>

<style lang="less">

</style>