{"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=style&index=0&id=e9bb6dca&scoped=true&lang=css&","dependencies":[{"path":"/Users/linhuakun/Downloads/nodejs/codewhy/src/components/common/gridView/GridView.vue","mtime":1607666509047},{"path":"/Users/linhuakun/Downloads/nodejs/codewhy/node_modules/css-loader/dist/cjs.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/nodejs/codewhy/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/nodejs/codewhy/node_modules/postcss-loader/src/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:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKLmdyaWQtdmlldyB7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LXdyYXA6IHdyYXA7Cn0K"},{"version":3,"sources":["GridView.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA;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"]}]}