You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
6.3 KiB
1 line
6.3 KiB
{"remainingRequest":"/Users/linhuakun/Downloads/nodejs/codewhy/node_modules/babel-loader/lib/index.js!/Users/linhuakun/Downloads/nodejs/codewhy/node_modules/cache-loader/dist/cjs.js??ref--0-0!/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:aW1wb3J0ICJjb3JlLWpzL21vZHVsZXMvZXMuYXJyYXkuY29uY2F0IjsKaW1wb3J0ICJjb3JlLWpzL21vZHVsZXMvZXMubnVtYmVyLmNvbnN0cnVjdG9yIjsKLy8KLy8KLy8KLy8KLy8KLy8KZXhwb3J0IGRlZmF1bHQgewogIG5hbWU6ICJHcmlkVmlldyIsCiAgcHJvcHM6IHsKICAgIGNvbHM6IHsKICAgICAgdHlwZTogTnVtYmVyLAogICAgICBkZWZhdWx0OiAyCiAgICB9LAogICAgaE1hcmdpbjogewogICAgICB0eXBlOiBOdW1iZXIsCiAgICAgIGRlZmF1bHQ6IDgKICAgIH0sCiAgICB2TWFyZ2luOiB7CiAgICAgIHR5cGU6IE51bWJlciwKICAgICAgZGVmYXVsdDogOAogICAgfSwKICAgIGl0ZW1TcGFjZTogewogICAgICB0eXBlOiBOdW1iZXIsCiAgICAgIGRlZmF1bHQ6IDgKICAgIH0sCiAgICBsaW5lU3BhY2U6IHsKICAgICAgdHlwZTogTnVtYmVyLAogICAgICBkZWZhdWx0OiA4CiAgICB9CiAgfSwKICBtb3VudGVkOiBmdW5jdGlvbiBtb3VudGVkKCkgewogICAgc2V0VGltZW91dCh0aGlzLl9hdXRvTGF5b3V0LCAyMDApOwogIH0sCiAgdXBkYXRlZDogZnVuY3Rpb24gdXBkYXRlZCgpIHsKICAgIHRoaXMuX2F1dG9MYXlvdXQoKTsKICB9LAogIG1ldGhvZHM6IHsKICAgIF9hdXRvTGF5b3V0OiBmdW5jdGlvbiBfYXV0b0xheW91dCgpIHsKICAgICAgLy8gMS7ojrflj5ZncmlkRWzlkoxjaGlsZHJlbgogICAgICAvLyDms6g6IOi/memHjOS4uuS7gOS5iOS4jeeUqGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3LlkaI/CiAgICAgIC8vIOetlDog5Zug5Li65aaC5p6c5Zyo6aG555uu5LitLCDlpJrlpITpg73nlKjliLDkuoZncmlkLXZpZXcsIOmCo+S5iOi/memHjOWwseS4jeehruWumuiOt+WPlueahOaYr+WTquS4gOS4quS6hi4KICAgICAgdmFyIGdyaWRFbCA9IHRoaXMuJHJlZnMuZ3JpZFZpZXc7CiAgICAgIHZhciBjaGlsZHJlbiA9IGdyaWRFbCAmJiBncmlkRWwuY2hpbGRyZW47IC8vIDIu6K6+572uZ3JpZEVs55qE5YaF6L656LedCgogICAgICBncmlkRWwuc3R5bGUucGFkZGluZyA9ICIiLmNvbmNhdCh0aGlzLnZNYXJnaW4sICJweCAiKS5jb25jYXQodGhpcy5oTWFyZ2luLCAicHgiKTsgLy8gMy7orqHnrpdpdGVt55qE5a695bqmCgogICAgICB2YXIgaXRlbVdpZHRoID0gKGdyaWRFbC5jbGllbnRXaWR0aCAtIDIgKiB0aGlzLmhNYXJnaW4gLSAodGhpcy5jb2xzIC0gMSkgKiB0aGlzLml0ZW1TcGFjZSkgLyB0aGlzLmNvbHM7CgogICAgICBmb3IgKHZhciBpID0gMDsgaSA8IGNoaWxkcmVuLmxlbmd0aDsgaSsrKSB7CiAgICAgICAgdmFyIGl0ZW0gPSBjaGlsZHJlbltpXTsKICAgICAgICBpdGVtLnN0eWxlLndpZHRoID0gaXRlbVdpZHRoICsgJ3B4JzsKCiAgICAgICAgaWYgKChpICsgMSkgJSB0aGlzLmNvbHMgIT09IDApIHsKICAgICAgICAgIGl0ZW0uc3R5bGUubWFyZ2luUmlnaHQgPSB0aGlzLml0ZW1TcGFjZSArICdweCc7CiAgICAgICAgfQoKICAgICAgICBpZiAoaSA+PSB0aGlzLmNvbHMpIHsKICAgICAgICAgIGl0ZW0uc3R5bGUubWFyZ2luVG9wID0gdGhpcy5saW5lU3BhY2UgKyAncHgnOwogICAgICAgIH0KICAgICAgfQogICAgfQogIH0KfTs="},{"version":3,"sources":["GridView.vue"],"names":[],"mappings":";;;;;;;;AAOA,eAAA;AACA,EAAA,IAAA,EAAA,UADA;AAEA,EAAA,KAAA,EAAA;AACA,IAAA,IAAA,EAAA;AACA,MAAA,IAAA,EAAA,MADA;AAEA,MAAA,OAAA,EAAA;AAFA,KADA;AAKA,IAAA,OAAA,EAAA;AACA,MAAA,IAAA,EAAA,MADA;AAEA,MAAA,OAAA,EAAA;AAFA,KALA;AASA,IAAA,OAAA,EAAA;AACA,MAAA,IAAA,EAAA,MADA;AAEA,MAAA,OAAA,EAAA;AAFA,KATA;AAaA,IAAA,SAAA,EAAA;AACA,MAAA,IAAA,EAAA,MADA;AAEA,MAAA,OAAA,EAAA;AAFA,KAbA;AAiBA,IAAA,SAAA,EAAA;AACA,MAAA,IAAA,EAAA,MADA;AAEA,MAAA,OAAA,EAAA;AAFA;AAjBA,GAFA;AAwBA,EAAA,OAAA,EAAA,mBAAA;AACA,IAAA,UAAA,CAAA,KAAA,WAAA,EAAA,GAAA,CAAA;AACA,GA1BA;AA2BA,EAAA,OAAA,EAAA,mBAAA;AACA,SAAA,WAAA;AACA,GA7BA;AA8BA,EAAA,OAAA,EAAA;AACA,IAAA,WAAA,EAAA,uBAAA;AACA;AACA;AACA;AACA,UAAA,MAAA,GAAA,KAAA,KAAA,CAAA,QAAA;AACA,UAAA,QAAA,GAAA,MAAA,IAAA,MAAA,CAAA,QAAA,CALA,CAOA;;AACA,MAAA,MAAA,CAAA,KAAA,CAAA,OAAA,aAAA,KAAA,OAAA,gBAAA,KAAA,OAAA,QARA,CAUA;;AACA,UAAA,SAAA,GAAA,CAAA,MAAA,CAAA,WAAA,GAAA,IAAA,KAAA,OAAA,GAAA,CAAA,KAAA,IAAA,GAAA,CAAA,IAAA,KAAA,SAAA,IAAA,KAAA,IAAA;;AACA,WAAA,IAAA,CAAA,GAAA,CAAA,EAAA,CAAA,GAAA,QAAA,CAAA,MAAA,EAAA,CAAA,EAAA,EAAA;AACA,YAAA,IAAA,GAAA,QAAA,CAAA,CAAA,CAAA;AACA,QAAA,IAAA,CAAA,KAAA,CAAA,KAAA,GAAA,SAAA,GAAA,IAAA;;AACA,YAAA,CAAA,CAAA,GAAA,CAAA,IAAA,KAAA,IAAA,KAAA,CAAA,EAAA;AACA,UAAA,IAAA,CAAA,KAAA,CAAA,WAAA,GAAA,KAAA,SAAA,GAAA,IAAA;AACA;;AACA,YAAA,CAAA,IAAA,KAAA,IAAA,EAAA;AACA,UAAA,IAAA,CAAA,KAAA,CAAA,SAAA,GAAA,KAAA,SAAA,GAAA,IAAA;AACA;AACA;AACA;AAvBA;AA9BA,CAAA","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"],"sourceRoot":"src/components/common/gridView"}]} |