zhongshen_project/addon/mobileshop/source/os/components/uni-grid/uni-grid.vue

<template>
	<view>
		<view :id="elId" :class="{ border: showBorder }" :style="{ 'border-left': showBorder ? '1px ' + borderColor + ' solid' : 'none' }" class="uni-grid"><slot /></view>
	</view>
</template>

<script>
export default {
	name: 'UniGrid',
	props: {
		// 每列显示个数
		column: {
			type: Number,
			default: 3
		},
		// 是否显示边框
		showBorder: {
			type: Boolean,
			default: true
		},
		// 是否显示边框
		borderColor: {
			type: String,
			default: '#e5e5e5'
		},
		// 全局标记水平方向移动距离 ，起点为中心，负数为左移动，正数为右移动
		hor: {
			type: Number,
			default: 0
		},
		// 全局标记垂直方向移动距离 ，起点为中心，负数为上移动，正数为下移动
		ver: {
			type: Number,
			default: 0
		},
		// 是否正方形显示,默认为 true
		square: {
			type: Boolean,
			default: true
		},
		highlight: {
			type: Boolean,
			default: true
		}
	},
	provide() {
		return {
			grid: this
		};
	},
	data() {
		const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`;
		return {
			index: 0,
			elId
		};
	},
	created() {
		this.index = 0;
		this.childrens = [];
		this.pIndex = this.pIndex ? this.pIndex++ : 0;
	},
	methods: {
		change(e) {
			this.$emit('change', e);
		},
		_getSize(fn) {
			uni.createSelectorQuery()
				.in(this)
				.select(`#${this.elId}`)
				.boundingClientRect()
				.exec(ret => {
					if (!ret[0]) {
						setTimeout(this._getSize(fn));
						return;
					}
					let width = parseInt(ret[0].width / this.column) - 1 + 'px';
					typeof fn === 'function' && fn(width);
				});
		}
	}
};
</script>

<style>
@charset "UTF-8";

.uni-grid {
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	border-left: 1px #e5e5e5 solid;
}
</style>