{"ast":null,"code":"import \"core-js/modules/es.array.push.js\";\nexport default {\n  name: \"demoPage\",\n  data() {\n    return {\n      value: \"\",\n      dataList: []\n    };\n  },\n  methods: {\n    //添加子项\n    handleAdd() {\n      this.dataList.push({\n        id: new Date().getTime(),\n        label: this.value\n      });\n      this.value = \"\";\n      console.log(this.dataList);\n    },\n    //删除子项\n    handleRemove(row) {\n      console.log(row.id);\n      this.dataList = this.dataList.filter(item => item.id != row.id);\n      console.log(\"删除操作\", this.dataList);\n    }\n  }\n};","map":{"version":3,"names":["name","data","value","dataList","methods","handleAdd","push","id","Date","getTime","label","console","log","handleRemove","row","filter","item"],"sources":["/Users/li/Desktop/work/work2/OG/GamePortrait/src/views/test.vue"],"sourcesContent":["<template>\n  <div id=\"demo\">\n    <div>\n      <div span=\"9\">\n        <div class=\"demo-input\">\n          <input\n            v-model=\"value\"\n            maxlength=\"10\"\n            show-word-limit\n            clearable\n            placeholder=\"请输入添加项...\"\n            style=\"width: 200px\"\n          />\n          <button class=\"add-btn\" type=\"success\" @click=\"handleAdd\">\n            添加\n          </button>\n        </div>\n      </div>\n      <div span=\"15\"><span></span></div>\n    </div>\n    <div class=\"demo-input remove-btn\">\n      <h3>数据展示区:</h3>\n      <transition-group name=\"myfade\" tag=\"ul\">\n        <li v-for=\"item in dataList\" :key=\"item.id\">\n          {{ item.label }} {{ item.id }}\n          <button type=\"text\" @click=\"handleRemove(item)\">remove</button>\n        </li>\n      </transition-group>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: \"demoPage\",\n  data() {\n    return {\n      value: \"\",\n      dataList: []\n    }\n  },\n  methods: {\n    //添加子项\n    handleAdd() {\n      this.dataList.push({\n        id: new Date().getTime(),\n        label: this.value\n      })\n      this.value = \"\"\n      console.log(this.dataList)\n    },\n    //删除子项\n    handleRemove(row) {\n      console.log(row.id)\n      this.dataList = this.dataList.filter((item) => item.id != row.id)\n      console.log(\"删除操作\", this.dataList)\n    }\n  }\n}\n</script>\n\n<style scoped>\n#demo {\n  background: #fff;\n}\n.demo-input {\n  padding: 20px 10px;\n}\n.add-btn {\n  margin-left: 10px;\n}\n.remove-btn li {\n  width: 270px;\n  height: 30px;\n  display: flex;\n  line-height: 30px;\n  margin-bottom: 5px;\n  padding: 0 10px;\n  justify-content: space-between;\n}\n.remove-btn li:hover {\n  border: 1px solid rgba(0, 0, 0, 0.1);\n}\n.remove-btn >>> .ivu-btn-text {\n  color: #57a3f3;\n}\n.remove-btn >>> .ivu-btn-text:hover {\n  color: red;\n  background: transparent;\n}\n.remove-btn >>> .ivu-btn-text:focus {\n  box-shadow: none;\n}\n/* 效果过程 */\n.myfade-enter-active,\n.myfade-leave-active {\n  transition: all 0.8s linear;\n}\n/* 进场的瞬间与离场的效果添加 */\n.myfade-enter-from,\n.myfade-leave-to {\n  opacity: 0;\n  transform: translateX(200px);\n}\n</style>\n"],"mappings":";AAiCA,eAAe;EACbA,IAAI,EAAE,UAAU;EAChBC,IAAIA,CAAA,EAAG;IACL,OAAO;MACLC,KAAK,EAAE,EAAE;MACTC,QAAQ,EAAE;IACZ;EACF,CAAC;EACDC,OAAO,EAAE;IACP;IACAC,SAASA,CAAA,EAAG;MACV,IAAI,CAACF,QAAQ,CAACG,IAAI,CAAC;QACjBC,EAAE,EAAE,IAAIC,IAAI,EAAE,CAACC,OAAO,EAAE;QACxBC,KAAK,EAAE,IAAI,CAACR;MACd,CAAC;MACD,IAAI,CAACA,KAAI,GAAI,EAAC;MACdS,OAAO,CAACC,GAAG,CAAC,IAAI,CAACT,QAAQ;IAC3B,CAAC;IACD;IACAU,YAAYA,CAACC,GAAG,EAAE;MAChBH,OAAO,CAACC,GAAG,CAACE,GAAG,CAACP,EAAE;MAClB,IAAI,CAACJ,QAAO,GAAI,IAAI,CAACA,QAAQ,CAACY,MAAM,CAAEC,IAAI,IAAKA,IAAI,CAACT,EAAC,IAAKO,GAAG,CAACP,EAAE;MAChEI,OAAO,CAACC,GAAG,CAAC,MAAM,EAAE,IAAI,CAACT,QAAQ;IACnC;EACF;AACF"},"metadata":{},"sourceType":"module","externalDependencies":[]}