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
3.2 KiB
1 line
3.2 KiB
{"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"]}]} |