wardrobe/tm-vuetify/components/tm-grid/tm-grid.vue

<template>
	<view class="tm-grid ">
		<tm-row :custom-class="border ? '  border-grey-lighten-4-a-1 round-5 overflow ' +(black_tmeme?' bk ':'') : ''">
			<tm-col
				:maxCol="maxGrid"
				:custom-class="(border ? ((index+1)<=(colNum-1)*grid?'border-grey-lighten-4-b-1 ':'') + ((index + 1) % grid ? 'border-grey-lighten-4-r-1 ' : ' ') : '') + (black_tmeme?' bk ':'')"
				 v-for="(item, index) in listData" :key="index" :grid="col" justify="center"
				align="middle"
				:color="bgColor"
				>
				<view @click.stop="onclick(index,item)" class="tm-grid-hover flex-center flex-col "  :style="{height:height_s+'px'}">
					
					<view class=" pb-6 flex-shrink px-10 " style="">
						<view class="tm-grid-icon flex-shrink"  v-if="item.dot" >
							
							<tm-badges  :color="item.color?item.color:color_tmeme" @click="clickDot(index,item)"  v-if="item.dotIcon" :offset="[10,0]" :dot="false" :icon="item.dotIcon" ></tm-badges>
							<tm-badges  @click="clickDot(index,item)" v-if="!item.dotIcon" :offset="[10,0]" :dot="true"  ></tm-badges>
							
							
						</view>
						<tm-icons :prefx="item['prefx']?item['prefx']:''" :color="item.color?item.color:color_tmeme" :size="item.iconSize?item.iconSize:iconSize"
							:name="item.icon?item.icon:''"></tm-icons>
					</view>
					<view class="flex-center fulled">
						<text class="text-size-s  text-align-center"
							:class="[item.fontColor?'text-'+item.fontColor:'text-'+fontColor]">{{ item.text?item.text:'' }}</text>
					</view>
				</view>
			</tm-col>

		</tm-row>
	</view>
</template>

<script>
	/**
	 * 九宫格
	 * @description 九宫格,快速建立宫格列表，如果想要个性化推荐tm-row tm-col建立。
	 * @property {Boolean} border = [] 默认：false,是否显示边框
	 * @property {Boolean} black = [] 默认：null,暗黑模式
	 * @property {String} color = [] 默认：primary,图标主题色。
	 * @property {String} bg-color = [grey-lighten-5] 默认：'',宫格背景主题色。
	 * @property {String} font-color = [] 默认：grey-darken-1,文字颜色
	 * @property {Number} icon-size = [] 默认：40,图标大小
	 * @property {Number} height = [] 默认：140,高度，单位upx
	 * @property {Number} maxGrid = [] 默认：12,布局的列表，比如我想一行5个，就可以用到此属性，设置为10，然后grid=2即可。
	 * @property {Number} grid = [] 默认：4,一行几个。
	 * @property {Array} list = [] 默认：[],列表数据。
	 * @property {Function} change 项目被点击，返回的参数：{index:索引,data:项目的数据}
	 * @property {Function} click-dot 右上角的角标被点击触发。
	 * @example <tm-grid :list="[{ text: '应用配置', icon: 'icon-aliwangwang' , size:40 }]"></tm-grid>
	 */
	
	import tmRow from "@/tm-vuetify/components/tm-row/tm-row.vue"
	import tmCol from "@/tm-vuetify/components/tm-col/tm-col.vue"
	import tmBadges from "@/tm-vuetify/components/tm-badges/tm-badges.vue"
	import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
	export default {
		components:{tmRow,tmCol,tmBadges,tmIcons},
		name: 'tm-grid',
		props: {

			black:{
				type:String|Boolean,
				default:null
			},
		
			// 是否显示边框。
			border: {
				type: Boolean,
				default: false
			},
			// 主题色。
			color: {
				type: String,
				default: 'primary'
			},
			// 背景主题色。
			bgColor: {
				type: String,
				default: ''
			},
			fontColor: {
				type: String,
				default: 'grey-darken-1'
			},
			// 一行几个。
			grid: {
				type: Number,
				default: 4
			},
			iconSize: {
				type: Number,
				default: 40
			},
			height: {
				type: Number,
				default: 140
			},
			list: {
				type: Array,
				default: () => {
					return [];
				}
			},
			// 跟随主题色的改变而改变。
			fllowTheme:{
				type:Boolean|String,
				default:true
			},
			//默认计算方式是12列布局。
			maxGrid:{
				type:Number,
				default:12
			}

		},
		computed: {
			black_tmeme: function() {
				if (this.black !== null) return this.black;
				return this.$tm.vx.state().tmVuetify.black;
			},
			color_tmeme:function(){
				if(this.$tm.vx.state().tmVuetify.color!==null&&this.$tm.vx.state().tmVuetify.color && this.fllowTheme){
					return this.$tm.vx.state().tmVuetify.color;
				}
				return this.color;
			},
			col: function() {
				return isNaN(this.maxGrid / this.grid) ? 4 : this.maxGrid / this.grid;
			},
			listData: function() {
				let gs = this.grid - Math.floor(this.list.length / this.grid);
				return this.list;
			},
			gridNum:function(){
				return this.grid;
			},
			colNum:function(){
				let ts = parseInt(this.listData.length/this.grid);
				ts = this.listData.length/this.grid>ts?ts+1:ts;
				return ts;
			},
			height_s:function(){
				return uni.upx2px(this.height)||70
			}
		},
		data() {
			return {
				hoverClass: ''
			};
		},
		methods: {
			onclick(index, item) {
				this.$emit('change', {
					index: index,
					data: item
				})
			},
			clickDot(index, item) {
				this.$emit('click-dot', {
					index: index,
					data: item
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
.tm-grid{
	.tm-grid-icon{
		
		
	}
}
</style>