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