102 lines
1.7 KiB
Vue
102 lines
1.7 KiB
Vue
<template>
|
|
<view class="menu" :style="mixinVariableStr">
|
|
<view class="menu-rows h-flex-x" v-for="(item,index) in menuList" :key="index">
|
|
<view class="menu-cols h-flex-item-grow" v-for="(item2,index2) in item" :key="index2">
|
|
<view class="icon" :class="{
|
|
'round':iconRound
|
|
}"></view>
|
|
<view class="text" v-if="showText"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import cssVariable from "../mixin/css-variable.js";
|
|
|
|
export default {
|
|
mixins:[cssVariable],
|
|
props:{
|
|
// 行数
|
|
rows:{
|
|
type: Number | String,
|
|
default:"2"
|
|
},
|
|
// 列数
|
|
cols:{
|
|
type: Number | String,
|
|
default:"4"
|
|
},
|
|
iconRound:{
|
|
type: Boolean,
|
|
default:true
|
|
},
|
|
showText:{
|
|
type: Boolean,
|
|
default:true
|
|
},
|
|
},
|
|
computed:{
|
|
menuList(){
|
|
let rows = Number(this.$props.rows) || 1;
|
|
let cols = Number(this.$props.cols) || 4;
|
|
|
|
let [rowsArr,colsArr] = [[],[]];
|
|
for(let i = 0;i<cols;i++){
|
|
colsArr.push(i);
|
|
}
|
|
|
|
for(let i = 0;i<rows;i++){
|
|
rowsArr.push(colsArr);
|
|
}
|
|
return rowsArr;
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
},
|
|
created() {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "../libs/global.scss";
|
|
|
|
.menu{
|
|
position: relative;
|
|
background-color: var(--background);
|
|
|
|
&-rows{
|
|
padding: 12rpx 0;
|
|
}
|
|
|
|
&-cols{
|
|
padding: 12rpx 0;
|
|
}
|
|
|
|
.icon{
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
background-color: var(--general);
|
|
border-radius: 4px;
|
|
margin: 0 auto;
|
|
|
|
&.round{
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.text{
|
|
width: 72rpx;
|
|
height: 6px;
|
|
background-color: var(--general);
|
|
margin: 4px auto 0 auto;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
</style>
|