128 lines
2.7 KiB
Vue
128 lines
2.7 KiB
Vue
<template>
|
|
<ciy-anipop v-model="popsh" maskbg="#00000055" @change="popclose">
|
|
<view class="_menu">
|
|
<view class="_title" v-if="title">{{title}}</view>
|
|
<slot name="list" :data="{items:items, rowcount:rowcount}">
|
|
<view class="_list" :class="rowcount<=1?'_flex':'_grid'" :style="'grid-template-columns: repeat('+rowcount+', 1fr);'">
|
|
<template v-for="(item,index) in items" :key="index">
|
|
<view v-if="item.br" style="grid-column: 1 / -1;"></view>
|
|
<view v-else-if="item.line" style="grid-column: 1 / -1;height: 3px;width: 100%;background: linear-gradient(90deg, transparent, var(--bg5), transparent);"></view>
|
|
<view v-else class="_item" @tap="selitem(index)">
|
|
<view class="_icon" v-if="item.icon"><ciy-svgimg :src="item.icon"></ciy-svgimg></view>
|
|
<view class="_name" :style="item.style" v-if="item.name">{{lang(item.name)}}</view>
|
|
<view class="_sub" v-if="item.sub">{{item.sub}}</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
<view style="height:2em;"></view>
|
|
</slot>
|
|
</view>
|
|
</ciy-anipop>
|
|
</template>
|
|
|
|
<style scoped>
|
|
._menu {
|
|
background: var(--bg2);
|
|
border-top: 1px solid var(--bg6);
|
|
}
|
|
|
|
._title {
|
|
text-align: center;
|
|
font-size: 1.2rem;
|
|
padding: 0.5rem 0;
|
|
font-weight: bold;
|
|
background: var(--bg1);
|
|
}
|
|
|
|
._list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
._list._flex {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
overflow: auto;
|
|
text-align: left;
|
|
}
|
|
|
|
._list._flex ._item {
|
|
padding: 1em;
|
|
text-align: center;
|
|
width: 100%;
|
|
border-top: 1px solid var(--bg4);
|
|
}
|
|
|
|
._list._grid {
|
|
display: grid;
|
|
width: 100%;
|
|
overflow: auto;
|
|
text-align: center;
|
|
}
|
|
|
|
._list._grid ._item {
|
|
padding: 1em 1em;
|
|
width: 100%;
|
|
}
|
|
|
|
._list ._icon {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
display: inline-block;
|
|
}
|
|
|
|
._list ._name {
|
|
color: var(--txt7);
|
|
}
|
|
|
|
._list ._sub {
|
|
font-size:0.7em;
|
|
color: var(--txt1);
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
export default {
|
|
props: {},
|
|
data() {
|
|
return {
|
|
items: [],
|
|
rowcount: 0,
|
|
title: '',
|
|
popsh: false
|
|
};
|
|
},
|
|
watch: {},
|
|
mounted() {},
|
|
methods: {
|
|
Open(opn) {
|
|
return new Promise(async (resolve, reject) => {
|
|
opn = opn || {};
|
|
if(!opn.items || opn.items.length == 0)
|
|
return;
|
|
if(opn.one && opn.items.length == 1){
|
|
resolve({...opn.items[0]});
|
|
return;
|
|
}
|
|
this.resolvecb = resolve;
|
|
this.items = opn.items;
|
|
this.rowcount = opn.rowcount;
|
|
this.title = opn.title;
|
|
this.popsh = true;
|
|
}).catch(e => {
|
|
});
|
|
},
|
|
selitem(idx) {
|
|
this.popsh = false;
|
|
this.resolvecb({...this.items[idx]});
|
|
},
|
|
popclose(e) {
|
|
if(!e.value)
|
|
this.resolvecb({close:true});
|
|
},
|
|
}
|
|
}
|
|
</script> |