{"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"]}]}