<template>
|
<div class="menubutton" :style="{ width: props.width, height: props.height }" :onclick="onClick">
|
<div style="margin-top: 10px;">
|
<svg-icon width="30" height="30" :color="props.color" :name="props.item.icon"/>
|
</div>
|
<div style="margin-top: 10px;">
|
<p style="width: 100%; overflow: hidden;">{{ props.item.text }}</p>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {getCurrentInstance, onBeforeUnmount, onMounted, reactive, toRefs} from "vue";
|
import {useBasicInfoStore} from "@/store/basicInfo";
|
import * as elementplus from "element-plus";
|
|
export default {
|
name: "MenuButton",
|
components: {},
|
props: {
|
item: null,
|
height: "100px",
|
width: "100px",
|
color: "",
|
click: null
|
},
|
setup(props) {
|
let {proxy} = getCurrentInstance();
|
const store = useBasicInfoStore();
|
const state = reactive({
|
staticDomain: WGURL.staticDomain,
|
});
|
|
onMounted(() => {
|
Init();
|
});
|
onBeforeUnmount(() => {
|
|
});
|
|
const Init = () => {
|
|
};
|
|
const onClick = () => {
|
if (!props.click) {
|
switch (props.item.type) {
|
case "menu":
|
if (store.tags.length > store.tagUpperLimit) {
|
elementplus.ElMessageBox.alert(
|
`${proxy.$t('message.TagQuantityReachedUpperLimit')}`,
|
'',
|
{
|
confirmButtonText: 'OK',
|
type: 'warning',
|
}
|
);
|
|
return;
|
}
|
|
addTag(props.item);
|
proxy.$router.replace(props.item.link);
|
break;
|
case "link":
|
store.iframe_url = props.item.link;
|
store.iframe_dialogVisible = true;
|
store.iframe_title = props.item.text;
|
store.iframe_loading = true;
|
// window.open(props.item.link);
|
break;
|
}
|
} else {
|
props.click(props.item);
|
}
|
};
|
const addTag = (target) => {
|
let stags = store.tags.filter(tab => tab.name === target.name);
|
|
if (stags === [] || stags.length <= 0) {
|
store.tags.push({
|
name: target.name,
|
languagekey: target.languagekey,
|
closable: true,
|
icon: target.icon,
|
path: target.link
|
});
|
}
|
};
|
return {
|
...toRefs(state), props, onClick
|
}
|
},
|
}
|
</script>
|
|
<style scoped>
|
.menubutton {
|
border: 1px solid;
|
border-image: linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, var(--el-color-primary-light-6) 20%, rgba(255, 255, 255, 0) 99%) 2 2 2 2;
|
float: left;
|
text-align: center;
|
padding: 5px;
|
font-size: 12px;
|
cursor: pointer;
|
-webkit-user-select: none; /* Safari */
|
-moz-user-select: none; /* Firefox */
|
-ms-user-select: none; /* IE10+/Edge */
|
user-select: none; /* Standard syntax */
|
}
|
|
.menubutton:hover {
|
background-color: var(--el-color-primary-light-6);
|
color: white;
|
}
|
|
.menubutton:active {
|
background-color: var(--el-color-primary-light-6);
|
color: white;
|
}
|
</style>
|
