vue实现弹窗卡片表单变标签功能

vue实现弹窗卡片表单变标签功能

功能描述

1. 在主页面点击按钮显示弹窗（采用的是element）
2. 在弹窗中，点击左上的添加会添加一个表单，每次只能添加一个表单。
3. 填写表单会自动变成标签。

card.vue

<template>
  <div>
    <el-button type="text" @click="centerDialogVisible = true">点击打开 Dialog</el-button>

    <el-dialog
      title="添加标签"
      :visible.sync="centerDialogVisible"
      width="46%"
      top="20vh"
      center
    >
      <div class="butBox">
        <div class="addCard" @click="addcCard()" />
        <div v-for="(item, index) in labelarr" :key="index" class="addCardCenter">
          <div class="cardCenter">
            <div class="title">
              {{ item[0].cars }}
            </div>
            <div class="Ftitle">
              <label>姓名:</label>
              {{ item[0].one }}
            </div>
            <div class="Ftitle">
              <label>姓名:</label>
              {{ item[0].two }}
            </div>
            <div class="Ftitle">
              <label>姓名:</label>
              {{ item[0].tree }}
            </div>
            <div class="Ftitle">
              <label>姓名:</label>
              {{ item[0].five }}
            </div>
          </div>
          <div class="spanclose" @click="removeitem(index, item)" />
        </div>
        <div v-if="fromClose" key="index" class="addCardCenter">
          <form id="addCardCenter" action="#">
            <label for="">姓名:</label>
            <select name="cars" class="valueCare">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="fiat">Fiat</option>
              <option value="audi">Audi</option>
            </select>
            <label for="">姓名:</label>
            <input type="text" name="one" class="valueCare">
            <label for="">简介:</label>
            <input type="text" name="two" class="valueCare">
            <label for="">简介:</label>
            <input type="text" name="tree" class="valueCare">
            <label for="">简介:</label>
            <input type="text" name="five" class="valueCare">
          </form>
          <div class="but">
            <div class="butSum" @click="butSum">提交</div>
            <div class="butExit" @click="butExit">取消</div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    parentarr: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      centerDialogVisible: false,
      card: 0,
      fromData: null,
      fromClose: false,
      labelarr: [],
      sumCard: null
    }
  },
  watch: {
    labelarr(old, cur) {
      this.$emit('on-change', this.labelarr)
    },
    parentarr() {
      if (this.parentarr.length > 0) {
        this.labelarr = []
        for (let i = 0; i < this.parentarr.length; i++) {
          this.labelarr.push(this.parentarr[i])
        }
      } else {
        this.labelarr = []
      }
    }
  },
  mounted() {

  },
  methods: {
    addcCard() {
      console.log(this.labelarr.length)
      // eslint-disable-next-line eqeqeq
      // eslint-disable-next-line no-undef
      if (this.labelarr.length < 5) {
        // eslint-disable-next-line no-undef
        this.fromClose = true
        // eslint-disable-next-line eqeqeq
      } else {
        this.$message.error('只能添加5个哦')
      }
    },
    removeitem(index, item) {
      this.labelarr.splice(index, 1)
    },
    addlabel() {
      const count = this.labelarr.indexOf(this.fromData)
      if (count === -1) {
        this.labelarr.push(this.fromData)
      }
      this.fromData = ''
      this.fromClose = false
    },
    butSum() {
      const from = document.getElementById('addCardCenter')
      const tagElements = from.getElementsByClassName('valueCare') // 这里我把所有我要获取值得属性都使用了同一个类来标识；
      const json = {}
      const formData = []
      // eslint-disable-next-line no-const-assign
      for (let j = 0; j < tagElements.length; j++) {
        const name = tagElements[j].name // 这里就是要获取得name属性，将此name属性作为json对象得key；
        const value = tagElements[j].value
        json[name] = value 	// 注意这里必须要使用这种方式给json赋值。如果使用json.name=value得话你会发现你所有的key都是一个字符串name，而不是name代表的值
      }
      if (json != null) {
        formData.push(json)
      }
      this.fromData = formData
      if (this.card > 5) {
        this.$message.error('只能添加5个哦')
      // eslint-disable-next-line no-empty
      } else {
        this.addlabel()
        // this.sumCard = this.card
        // console.log(this.sumCard)
      }
    },
    butExit() {
      this.fromClose = false
      // this.card--
      console.log('已取消')
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-dialog{
  height: 58vh;
}
.butBox{
  width: 100%;
  height: 46vh;
  border: 1px solid #DCDFE6;
  .addCard{
    width: 32%;
    height: 21vh;
    border: 1px solid #DCDFE6;
    margin-left: 1%;
    margin-top: 1%;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .cardCenter{
    width: 100%;
    height: 20vh;
    margin-top: 1vh;
    .title{
      width: 100%;
      height: 3.5vh;
      text-align: center;
      line-height: 3.5vh;
    }
    .Ftitle{
      width: 65%;
      height: 3.5vh;
      line-height: 3.5vh;
      margin-left: 20%;
      margin-top: 0.5vh;
    }
  }
  .addCard:after {
    font-family: 'element-icons';
    font-size: 9vw;
    color: #DCDFE6;
    content: "\E6D9";
  }
  .addCardCenter{
  width: 32%;
  height: 21vh;
  border: 1px solid #DCDFE6;
  margin-left: 1%;
  margin-top: 1%;
  float: left;
  .but{
    width: 100%;
    height: 3vh;
    display: flex;
    justify-content: center;
    div{
      width: 25%;
      height: 2.5vh;
      border: 1px solid #DCDFE6;
      border-radius: 3px;
      line-height: 2.5vh;
      text-align: center;
      margin-left: 1%;
      cursor: pointer;
    }
    .butSum{
      color: white;
      background-color: #1890FF;
    }
  }
  form{
    display: block;
    width: 100%;
    height: 18vh;
    label{
      margin-left: 2%;
    }
    select{
      width: 80%;
      margin-top: 1vh;
      margin-left: 2%;
    }
    input{
      width: 80%;
      margin-top: 1vh;
      margin-left: 2%;
    }
  }
}
}
.dialog-footer{
  display: flex;
  justify-content: center;
  margin-top: 10px;
  /deep/ .el-button:nth-of-type(2){
    margin-left: 2vw !important;
  }
}

.spanclose:after {
  font-family: 'element-icons';
  position: relative;
  top: -20vh;
  left: 86%;
  font-size: 20px;
  content: "\E6DB";
  cursor: pointer;
}
</style>

效果图