{"remainingRequest":"D:\\源码\\vue-element-admin-master\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\源码\\vue-element-admin-master\\src\\components\\DndList\\index.vue?vue&type=style&index=0&id=bf34d14a&lang=scss&scoped=true&","dependencies":[{"path":"D:\\源码\\vue-element-admin-master\\src\\components\\DndList\\index.vue","mtime":1649647926000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\css-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":499162500000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\postcss-loader\\src\\index.js","mtime":499162500000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\sass-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgouZG5kTGlzdCB7CiAgYmFja2dyb3VuZDogI2ZmZjsKICBwYWRkaW5nLWJvdHRvbTogNDBweDsKICAmOmFmdGVyIHsKICAgIGNvbnRlbnQ6ICIiOwogICAgZGlzcGxheTogdGFibGU7CiAgICBjbGVhcjogYm90aDsKICB9CiAgLmRuZExpc3QtbGlzdCB7CiAgICBmbG9hdDogbGVmdDsKICAgIHBhZGRpbmctYm90dG9tOiAzMHB4OwogICAgJjpmaXJzdC1vZi10eXBlIHsKICAgICAgbWFyZ2luLXJpZ2h0OiAyJTsKICAgIH0KICAgIC5kcmFnQXJlYSB7CiAgICAgIG1hcmdpbi10b3A6IDE1cHg7CiAgICAgIG1pbi1oZWlnaHQ6IDUwcHg7CiAgICAgIHBhZGRpbmctYm90dG9tOiAzMHB4OwogICAgfQogIH0KfQoKLmxpc3QtY29tcGxldGUtaXRlbSB7CiAgY3Vyc29yOiBwb2ludGVyOwogIHBvc2l0aW9uOiByZWxhdGl2ZTsKICBmb250LXNpemU6IDE0cHg7CiAgcGFkZGluZzogNXB4IDEycHg7CiAgbWFyZ2luLXRvcDogNHB4OwogIGJvcmRlcjogMXB4IHNvbGlkICNiZmNiZDk7CiAgdHJhbnNpdGlvbjogYWxsIDFzOwp9CgoubGlzdC1jb21wbGV0ZS1pdGVtLWhhbmRsZSB7CiAgb3ZlcmZsb3c6IGhpZGRlbjsKICB0ZXh0LW92ZXJmbG93OiBlbGxpcHNpczsKICB3aGl0ZS1zcGFjZTogbm93cmFwOwogIG1hcmdpbi1yaWdodDogNTBweDsKfQoKLmxpc3QtY29tcGxldGUtaXRlbS1oYW5kbGUyIHsKICBvdmVyZmxvdzogaGlkZGVuOwogIHRleHQtb3ZlcmZsb3c6IGVsbGlwc2lzOwogIHdoaXRlLXNwYWNlOiBub3dyYXA7CiAgbWFyZ2luLXJpZ2h0OiAyMHB4Owp9CgoubGlzdC1jb21wbGV0ZS1pdGVtLnNvcnRhYmxlLWNob3NlbiB7CiAgYmFja2dyb3VuZDogIzRBQjdCRDsKfQoKLmxpc3QtY29tcGxldGUtaXRlbS5zb3J0YWJsZS1naG9zdCB7CiAgYmFja2dyb3VuZDogIzMwQjA4RjsKfQoKLmxpc3QtY29tcGxldGUtZW50ZXIsCi5saXN0LWNvbXBsZXRlLWxlYXZlLWFjdGl2ZSB7CiAgb3BhY2l0eTogMDsKfQo="},{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2GA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA","file":"index.vue","sourceRoot":"src/components/DndList","sourcesContent":["<template>\n <div class=\"dndList\">\n <div :style=\"{width:width1}\" class=\"dndList-list\">\n <h3>{{ list1Title }}</h3>\n <draggable :set-data=\"setData\" :list=\"list1\" group=\"article\" class=\"dragArea\">\n <div v-for=\"element in list1\" :key=\"element.id\" class=\"list-complete-item\">\n <div class=\"list-complete-item-handle\">\n {{ element.id }}[{{ element.author }}] {{ element.title }}\n </div>\n <div style=\"position:absolute;right:0px;\">\n <span style=\"float: right ;margin-top: -20px;margin-right:5px;\" @click=\"deleteEle(element)\">\n <i style=\"color:#ff4949\" class=\"el-icon-delete\" />\n </span>\n </div>\n </div>\n </draggable>\n </div>\n <div :style=\"{width:width2}\" class=\"dndList-list\">\n <h3>{{ list2Title }}</h3>\n <draggable :list=\"list2\" group=\"article\" class=\"dragArea\">\n <div v-for=\"element in list2\" :key=\"element.id\" class=\"list-complete-item\">\n <div class=\"list-complete-item-handle2\" @click=\"pushEle(element)\">\n {{ element.id }} [{{ element.author }}] {{ element.title }}\n </div>\n </div>\n </draggable>\n </div>\n </div>\n</template>\n\n<script>\nimport draggable from 'vuedraggable'\n\nexport default {\n name: 'DndList',\n components: { draggable },\n props: {\n list1: {\n type: Array,\n default() {\n return []\n }\n },\n list2: {\n type: Array,\n default() {\n return []\n }\n },\n list1Title: {\n type: String,\n default: 'list1'\n },\n list2Title: {\n type: String,\n default: 'list2'\n },\n width1: {\n type: String,\n default: '48%'\n },\n width2: {\n type: String,\n default: '48%'\n }\n },\n methods: {\n isNotInList1(v) {\n return this.list1.every(k => v.id !== k.id)\n },\n isNotInList2(v) {\n return this.list2.every(k => v.id !== k.id)\n },\n deleteEle(ele) {\n for (const item of this.list1) {\n if (item.id === ele.id) {\n const index = this.list1.indexOf(item)\n this.list1.splice(index, 1)\n break\n }\n }\n if (this.isNotInList2(ele)) {\n this.list2.unshift(ele)\n }\n },\n pushEle(ele) {\n for (const item of this.list2) {\n if (item.id === ele.id) {\n const index = this.list2.indexOf(item)\n this.list2.splice(index, 1)\n break\n }\n }\n if (this.isNotInList1(ele)) {\n this.list1.push(ele)\n }\n },\n setData(dataTransfer) {\n // to avoid Firefox bug\n // Detail see : https://github.com/RubaXa/Sortable/issues/1012\n dataTransfer.setData('Text', '')\n }\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.dndList {\n background: #fff;\n padding-bottom: 40px;\n &:after {\n content: \"\";\n display: table;\n clear: both;\n }\n .dndList-list {\n float: left;\n padding-bottom: 30px;\n &:first-of-type {\n margin-right: 2%;\n }\n .dragArea {\n margin-top: 15px;\n min-height: 50px;\n padding-bottom: 30px;\n }\n }\n}\n\n.list-complete-item {\n cursor: pointer;\n position: relative;\n font-size: 14px;\n padding: 5px 12px;\n margin-top: 4px;\n border: 1px solid #bfcbd9;\n transition: all 1s;\n}\n\n.list-complete-item-handle {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n margin-right: 50px;\n}\n\n.list-complete-item-handle2 {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n margin-right: 20px;\n}\n\n.list-complete-item.sortable-chosen {\n background: #4AB7BD;\n}\n\n.list-complete-item.sortable-ghost {\n background: #30B08F;\n}\n\n.list-complete-enter,\n.list-complete-leave-active {\n opacity: 0;\n}\n</style>\n"]}]}
|
