1 line
3.8 KiB
JSON
1 line
3.8 KiB
JSON
{"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":[]} |