108 lines
1.9 KiB
Vue
108 lines
1.9 KiB
Vue
<!-- entranceList组件（通用组件） -->
|
||
<template>
|
||
<uni-grid class="entrance" :column="column" :showBorder="false" :highlight="false">
|
||
<uni-grid-item class="entrance-grid-item" v-for="(v, i) in list" :key="i" @click="itemClickHandle(v)">
|
||
<view class="entrance-item">
|
||
<!-- <image class="image" :style="[imgStyle]" :src="v[imageKey]" mode=""></image>
|
||
<text class="title" :style="[titleStyle]">{{ v[titleKey] }}</text> -->
|
||
<image class="image" :style="{width:v.width,height:v.height}" :src="v[imageKey]" mode=""></image>
|
||
<text class="title" :style="[titleStyle]">{{ v[titleKey] }}</text>
|
||
</view>
|
||
</uni-grid-item>
|
||
</uni-grid>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'IndexEntrance',
|
||
props: {
|
||
column: {
|
||
type: Number,
|
||
default: 4
|
||
},
|
||
list: {
|
||
type: Array,
|
||
default: function () {
|
||
return []
|
||
}
|
||
},
|
||
// 图片大小
|
||
imageH: {
|
||
type: [String, Number],
|
||
default: 60
|
||
},
|
||
imageW: {
|
||
type: [String, Number],
|
||
default: 60
|
||
},
|
||
// 单位
|
||
unit: {
|
||
type: String,
|
||
default: 'rpx'
|
||
},
|
||
imageKey: {
|
||
type: String,
|
||
default: 'image'
|
||
},
|
||
titleKey: {
|
||
type: String,
|
||
default: 'title'
|
||
},
|
||
// 设置title样式
|
||
titleStyle: {
|
||
type: Object,
|
||
default () {
|
||
return {}
|
||
}
|
||
}
|
||
},
|
||
data () {
|
||
return {
|
||
|
||
}
|
||
},
|
||
computed: {
|
||
imgStyle () {
|
||
return {
|
||
width: `${this.imageW}${this.unit}`,
|
||
height: `${this.imageH}${this.unit}`
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
itemClickHandle (item) {
|
||
this.$emit('click', item)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.entrance {
|
||
%flexCenter {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.entrance-grid-item {
|
||
@extend %flexCenter;
|
||
}
|
||
.entrance-item {
|
||
height: 100%;
|
||
width: 100%;
|
||
@extend %flexCenter;
|
||
flex-direction: column;
|
||
}
|
||
.image {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
|
||
.title {
|
||
margin-top: 15rpx;
|
||
font-size: 24rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
</style>
|