51 lines
1.3 KiB
Vue
51 lines
1.3 KiB
Vue
<template>
|
|
<view class="menu-grid">
|
|
<view
|
|
v-for="m in menus"
|
|
:key="m.id"
|
|
class="menu-card"
|
|
@click="$emit('select', m)"
|
|
>
|
|
<view class="menu-icon" :class="toneClass(m)" :style="iconBoxStyle(m)">
|
|
<VanIcon :name="m.icon" :color="iconFg(m)" size="52rpx" />
|
|
</view>
|
|
<text class="menu-title">{{ m.title }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import VanIcon from './van-icon/van-icon.vue'
|
|
import { resolveMenuIconColors } from '../utils/menu-icon-colors.js'
|
|
|
|
export default {
|
|
name: 'MenuGrid',
|
|
components: { VanIcon },
|
|
props: {
|
|
menus: { type: Array, default: () => [] }
|
|
},
|
|
emits: ['select'],
|
|
methods: {
|
|
colors(m) {
|
|
return resolveMenuIconColors(m)
|
|
},
|
|
iconFg(m) {
|
|
return this.colors(m).iconFg || ''
|
|
},
|
|
iconBoxStyle(m) {
|
|
const { iconBg, iconFg } = this.colors(m)
|
|
const style = {}
|
|
if (iconBg) style.background = iconBg
|
|
if (iconFg) style.color = iconFg
|
|
return style
|
|
},
|
|
/** 有自定义色时不再套 tone-*，避免绿底覆盖 */
|
|
toneClass(m) {
|
|
const { iconBg, iconFg } = this.colors(m)
|
|
if (iconBg || iconFg) return ''
|
|
return m.tone || ''
|
|
}
|
|
}
|
|
}
|
|
</script>
|