{"remainingRequest":"/Users/linhuakun/Downloads/nodejs/codewhy/node_modules/vue-loader/lib/index.js??vue-loader-options!/Users/linhuakun/Downloads/nodejs/codewhy/src/components/common/gridView/GridView.vue?vue&type=script&lang=js&","dependencies":[{"path":"/Users/linhuakun/Downloads/nodejs/codewhy/src/components/common/gridView/GridView.vue","mtime":1607666509047},{"path":"/Users/linhuakun/Downloads/nodejs/codewhy/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/nodejs/codewhy/node_modules/babel-loader/lib/index.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/nodejs/codewhy/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/nodejs/codewhy/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:Ly8KLy8KLy8KLy8KLy8KLy8KCglleHBvcnQgZGVmYXVsdCB7CgkJbmFtZTogIkdyaWRWaWV3IiwKICAgIHByb3BzOiB7CgkJICBjb2xzOiB7CgkJICAgIHR5cGU6IE51bWJlciwKICAgICAgICBkZWZhdWx0OiAyCiAgICAgIH0sCiAgICAgIGhNYXJnaW46IHsKCQkgICAgdHlwZTogTnVtYmVyLAogICAgICAgIGRlZmF1bHQ6IDgKICAgICAgfSwKICAgICAgdk1hcmdpbjogewoJCSAgICB0eXBlOiBOdW1iZXIsCiAgICAgICAgZGVmYXVsdDogOAogICAgICB9LAogICAgICBpdGVtU3BhY2U6IHsKCQkgICAgdHlwZTogTnVtYmVyLAogICAgICAgIGRlZmF1bHQ6IDgKICAgICAgfSwKICAgICAgbGluZVNwYWNlOiB7CgkJICAgIHR5cGU6IE51bWJlciwKICAgICAgICBkZWZhdWx0OiA4CiAgICAgIH0KICAgIH0sCiAgICBtb3VudGVkOiBmdW5jdGlvbiAoKSB7CgkJICBzZXRUaW1lb3V0KHRoaXMuX2F1dG9MYXlvdXQsIDIwMCkKICAgIH0sCiAgICB1cGRhdGVkOiBmdW5jdGlvbiAoKSB7CiAgICAgIHRoaXMuX2F1dG9MYXlvdXQoKQogICAgfSwKICAgIG1ldGhvZHM6IHsKCQkgIF9hdXRvTGF5b3V0OiBmdW5jdGlvbiAoKSB7CiAgICAgICAgLy8gMS7ojrflj5ZncmlkRWzlkoxjaGlsZHJlbgogICAgICAgIC8vIOazqDog6L+Z6YeM5Li65LuA5LmI5LiN55SoZG9jdW1lbnQucXVlcnlTZWxlY3RvcuWRoj8KICAgICAgICAvLyDnrZQ6IOWboOS4uuWmguaenOWcqOmhueebruS4rSwg5aSa5aSE6YO955So5Yiw5LqGZ3JpZC12aWV3LCDpgqPkuYjov5nph4zlsLHkuI3noa7lrprojrflj5bnmoTmmK/lk6rkuIDkuKrkuoYuCiAgICAgICAgbGV0IGdyaWRFbCA9IHRoaXMuJHJlZnMuZ3JpZFZpZXc7CiAgICAgICAgbGV0IGNoaWxkcmVuID0gZ3JpZEVsJiZncmlkRWwuY2hpbGRyZW47CgogICAgICAgIC8vIDIu6K6+572uZ3JpZEVs55qE5YaF6L656LedCiAgICAgICAgZ3JpZEVsLnN0eWxlLnBhZGRpbmcgPSBgJHt0aGlzLnZNYXJnaW59cHggJHt0aGlzLmhNYXJnaW59cHhgCgogICAgICAgIC8vIDMu6K6h566XaXRlbeeahOWuveW6pgogICAgICAgIGxldCBpdGVtV2lkdGggPSAoZ3JpZEVsLmNsaWVudFdpZHRoIC0gMiAqIHRoaXMuaE1hcmdpbiAtICh0aGlzLmNvbHMgLSAxKSAqIHRoaXMuaXRlbVNwYWNlKSAvIHRoaXMuY29sczsKICAgICAgICBmb3IgKGxldCBpID0gMDsgaSA8IGNoaWxkcmVuLmxlbmd0aDsgaSsrKSB7CiAgICAgICAgICBsZXQgaXRlbSA9IGNoaWxkcmVuW2ldOwogICAgICAgICAgaXRlbS5zdHlsZS53aWR0aCA9IGl0ZW1XaWR0aCArICdweCc7CiAgICAgICAgICBpZiAoKGkrMSkgJSB0aGlzLmNvbHMgIT09IDApIHsKICAgICAgICAgICAgaXRlbS5zdHlsZS5tYXJnaW5SaWdodCA9IHRoaXMuaXRlbVNwYWNlICsgJ3B4JwogICAgICAgICAgfQogICAgICAgICAgaWYgKGkgPj0gdGhpcy5jb2xzKSB7CiAgICAgICAgICAgIGl0ZW0uc3R5bGUubWFyZ2luVG9wID0gdGhpcy5saW5lU3BhY2UgKyAncHgnCiAgICAgICAgICB9CiAgICAgICAgfQogICAgICB9CiAgICB9Cgl9Cg=="},{"version":3,"sources":["GridView.vue"],"names":[],"mappings":";;;;;;;AAOA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"GridView.vue","sourceRoot":"src/components/common/gridView","sourcesContent":["<template>\n  <div class=\"grid-view\" ref=\"gridView\">\n    <slot></slot>\n  </div>\n</template>\n\n<script>\n\texport default {\n\t\tname: \"GridView\",\n    props: {\n\t\t  cols: {\n\t\t    type: Number,\n        default: 2\n      },\n      hMargin: {\n\t\t    type: Number,\n        default: 8\n      },\n      vMargin: {\n\t\t    type: Number,\n        default: 8\n      },\n      itemSpace: {\n\t\t    type: Number,\n        default: 8\n      },\n      lineSpace: {\n\t\t    type: Number,\n        default: 8\n      }\n    },\n    mounted: function () {\n\t\t  setTimeout(this._autoLayout, 200)\n    },\n    updated: function () {\n      this._autoLayout()\n    },\n    methods: {\n\t\t  _autoLayout: function () {\n        // 1.获取gridEl和children\n        // 注: 这里为什么不用document.querySelector呢?\n        // 答: 因为如果在项目中, 多处都用到了grid-view, 那么这里就不确定获取的是哪一个了.\n        let gridEl = this.$refs.gridView;\n        let children = gridEl&&gridEl.children;\n\n        // 2.设置gridEl的内边距\n        gridEl.style.padding = `${this.vMargin}px ${this.hMargin}px`\n\n        // 3.计算item的宽度\n        let itemWidth = (gridEl.clientWidth - 2 * this.hMargin - (this.cols - 1) * this.itemSpace) / this.cols;\n        for (let i = 0; i < children.length; i++) {\n          let item = children[i];\n          item.style.width = itemWidth + 'px';\n          if ((i+1) % this.cols !== 0) {\n            item.style.marginRight = this.itemSpace + 'px'\n          }\n          if (i >= this.cols) {\n            item.style.marginTop = this.lineSpace + 'px'\n          }\n        }\n      }\n    }\n\t}\n</script>\n\n<style scoped>\n  .grid-view {\n    display: flex;\n    flex-wrap: wrap;\n  }\n</style>\n"]}]}