mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-06-12 13:19:31 +08:00
v1.0.0-beta 源码正式开源
This commit is contained in:
小莫唐尼
@@ -0,0 +1,177 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user