{"ast":null,"code":"import { vModelText as _vModelText, createElementVNode as _createElementVNode, withDirectives as _withDirectives, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, TransitionGroup as _TransitionGroup, withCtx as _withCtx, createVNode as _createVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from \"vue\";\nconst _withScopeId = n => (_pushScopeId(\"data-v-5752faac\"), n = n(), _popScopeId(), n);\nconst _hoisted_1 = {\n  id: \"demo\"\n};\nconst _hoisted_2 = {\n  span: \"9\"\n};\nconst _hoisted_3 = {\n  class: \"demo-input\"\n};\nconst _hoisted_4 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/_createElementVNode(\"div\", {\n  span: \"15\"\n}, [/*#__PURE__*/_createElementVNode(\"span\")], -1 /* HOISTED */));\nconst _hoisted_5 = {\n  class: \"demo-input remove-btn\"\n};\nconst _hoisted_6 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/_createElementVNode(\"h3\", null, \"数据展示区:\", -1 /* HOISTED */));\nconst _hoisted_7 = [\"onClick\"];\nexport function render(_ctx, _cache, $props, $setup, $data, $options) {\n  return _openBlock(), _createElementBlock(\"div\", _hoisted_1, [_createElementVNode(\"div\", null, [_createElementVNode(\"div\", _hoisted_2, [_createElementVNode(\"div\", _hoisted_3, [_withDirectives(_createElementVNode(\"input\", {\n    \"onUpdate:modelValue\": _cache[0] || (_cache[0] = $event => $data.value = $event),\n    maxlength: \"10\",\n    \"show-word-limit\": \"\",\n    clearable: \"\",\n    placeholder: \"请输入添加项...\",\n    style: {\n      \"width\": \"200px\"\n    }\n  }, null, 512 /* NEED_PATCH */), [[_vModelText, $data.value]]), _createElementVNode(\"button\", {\n    class: \"add-btn\",\n    type: \"success\",\n    onClick: _cache[1] || (_cache[1] = (...args) => $options.handleAdd && $options.handleAdd(...args))\n  }, \" 添加 \")])]), _hoisted_4]), _createElementVNode(\"div\", _hoisted_5, [_hoisted_6, _createVNode(_TransitionGroup, {\n    name: \"myfade\",\n    tag: \"ul\"\n  }, {\n    default: _withCtx(() => [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList($data.dataList, item => {\n      return _openBlock(), _createElementBlock(\"li\", {\n        key: item.id\n      }, [_createTextVNode(_toDisplayString(item.label) + \" \" + _toDisplayString(item.id) + \" \", 1 /* TEXT */), _createElementVNode(\"button\", {\n        type: \"text\",\n        onClick: $event => $options.handleRemove(item)\n      }, \"remove\", 8 /* PROPS */, _hoisted_7)]);\n    }), 128 /* KEYED_FRAGMENT */))]),\n\n    _: 1 /* STABLE */\n  })])]);\n}","map":{"version":3,"names":["id","span","class","_createElementVNode","_createElementBlock","_hoisted_1","_hoisted_2","_hoisted_3","$data","value","$event","maxlength","clearable","placeholder","style","type","onClick","_cache","args","$options","handleAdd","_hoisted_4","_hoisted_5","_hoisted_6","_createVNode","_TransitionGroup","name","tag","_Fragment","_renderList","dataList","item","key","label","_toDisplayString","handleRemove","_hoisted_7"],"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":";;;EACOA,EAAE,EAAC;AAAM;;EAELC,IAAI,EAAC;AAAG;;EACNC,KAAK,EAAC;AAAY;gEAczBC,mBAAA,CAAkC;EAA7BF,IAAI,EAAC;AAAI,I,aAACE,mBAAA,CAAa,Q;;EAEzBD,KAAK,EAAC;AAAuB;gEAChCC,mBAAA,CAAe,YAAX,QAAM;;;uBApBdC,mBAAA,CA4BM,OA5BNC,UA4BM,GA3BJF,mBAAA,CAiBM,cAhBJA,mBAAA,CAcM,OAdNG,UAcM,GAbJH,mBAAA,CAYM,OAZNI,UAYM,G,gBAXJJ,mBAAA,CAOE;+DANSK,KAAA,CAAAC,KAAK,GAAAC,MAAA;IACdC,SAAS,EAAC,IAAI;IACd,iBAAe,EAAf,EAAe;IACfC,SAAS,EAAT,EAAS;IACTC,WAAW,EAAC,WAAW;IACvBC,KAAoB,EAApB;MAAA;IAAA;iDALSN,KAAA,CAAAC,KAAK,E,GAOhBN,mBAAA,CAES;IAFDD,KAAK,EAAC,SAAS;IAACa,IAAI,EAAC,SAAS;IAAEC,OAAK,EAAAC,MAAA,QAAAA,MAAA,UAAAC,IAAA,KAAEC,QAAA,CAAAC,SAAA,IAAAD,QAAA,CAAAC,SAAA,IAAAF,IAAA,CAAS;KAAE,MAE1D,E,KAGJG,UAAkC,C,GAEpClB,mBAAA,CAQM,OARNmB,UAQM,GAPJC,UAAe,EACfC,YAAA,CAKmBC,gBAAA;IALDC,IAAI,EAAC,QAAQ;IAACC,GAAG,EAAC;;sBAC9B,MAAwB,E,kBAA5BvB,mBAAA,CAGKwB,SAAA,QAAAC,WAAA,CAHcrB,KAAA,CAAAsB,QAAQ,EAAhBC,IAAI;2BAAf3B,mBAAA,CAGK;QAHyB4B,GAAG,EAAED,IAAI,CAAC/B;4CACnC+B,IAAI,CAACE,KAAK,IAAG,GAAC,GAAAC,gBAAA,CAAGH,IAAI,CAAC/B,EAAE,IAAG,GAC9B,iBAAAG,mBAAA,CAA+D;QAAvDY,IAAI,EAAC,MAAM;QAAEC,OAAK,EAAAN,MAAA,IAAES,QAAA,CAAAgB,YAAY,CAACJ,IAAI;SAAG,QAAM,iBAAAK,UAAA,E"},"metadata":{},"sourceType":"module","externalDependencies":[]}