You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
1.2 KiB
60 lines
1.2 KiB
2 weeks ago
|
<template>
|
||
|
|
<div class="equip-menu">
|
||
|
|
<li v-for="item in items" @click="item.onClick">{{ item.label }}</li>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { useStore } from "vuex";
|
||
|
|
import { reactive, onMounted, ref } from "vue";
|
||
|
|
import { useI18n } from "vue3-i18n";
|
||
|
|
class PopoverMenuItem {
|
||
|
|
label: string;
|
||
|
|
onClick: Function;
|
||
|
|
constructor(label: string, onClick: Function) {
|
||
|
|
this.label = label;
|
||
|
|
this.onClick = onClick;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const { t } = useI18n();
|
||
|
|
const { state, commit, dispatch } = useStore();
|
||
|
|
|
||
|
|
const prop = defineProps({
|
||
|
|
items: {
|
||
|
|
type: Array<PopoverMenuItem>(),
|
||
|
|
default: []
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
onMounted(() => { });
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.equip-menu {
|
||
|
|
margin: 0;
|
||
|
|
background: #000;
|
||
|
|
border: 1px solid #fff;
|
||
|
|
// z-index: 3000;
|
||
|
|
// position: absolute;
|
||
|
|
list-style-type: none;
|
||
|
|
border-radius: 4px;
|
||
|
|
font-size: 12px;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #fff;
|
||
|
|
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
|
||
|
|
|
||
|
|
li {
|
||
|
|
margin: 0;
|
||
|
|
padding: 9px 16px;
|
||
|
|
cursor: pointer;
|
||
|
|
border-top: 1px solid #ccc;
|
||
|
|
margin-top: -1px;
|
||
|
|
font-size: 14px;
|
||
|
|
letter-spacing: 6px;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
color: #ccc;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|