mirror of https://github.com/alibaba/arthas.git
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
73 lines
1.4 KiB
Vue
73 lines
1.4 KiB
Vue
<template>
|
|
<a class="my-badge" :href="URL" target="_blank">
|
|
<component :is="comp" />
|
|
|
|
<span>{{ number }}</span>
|
|
</a>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useThemeLocaleData } from "@vuepress/theme-default/lib/client/composables";
|
|
import { ref } from "vue";
|
|
|
|
const props = defineProps({
|
|
comp: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
data: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const number = ref(0);
|
|
|
|
// add number to number until number is equal to data
|
|
var t = setInterval(() => {
|
|
number.value += 234;
|
|
if (number.value >= props.data) {
|
|
number.value = props.data;
|
|
clearInterval(t);
|
|
}
|
|
}, 1);
|
|
|
|
const themeData = useThemeLocaleData();
|
|
const repoURL = `https://github.com/${themeData.value.repo}`;
|
|
const repoStarsURL = repoURL;
|
|
const repoForksURL = `${repoURL}/fork`;
|
|
|
|
let URL = repoURL;
|
|
switch (props.comp.name) {
|
|
case "Star":
|
|
URL = repoStarsURL;
|
|
break;
|
|
case "Fork":
|
|
URL = repoForksURL;
|
|
break;
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.my-badge {
|
|
width: fit-content;
|
|
width: -webkit-fit-content;
|
|
width: -moz-fit-content;
|
|
padding: 5px;
|
|
margin: 0 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 5px;
|
|
color: var(--c-text);
|
|
background-color: rgba(89, 95, 101, 0.2);
|
|
user-select: none;
|
|
}
|
|
|
|
@media (max-width: 719px) {
|
|
.my-badge {
|
|
margin: 0 5px;
|
|
}
|
|
}
|
|
</style>
|