nonebot2/docs/.vuepress/components/PublishCard.vue
2021-03-05 16:27:43 +08:00

85 lines
1.6 KiB
Vue

<template>
<v-card>
<v-card-title>
{{ name }}
<v-spacer></v-spacer>
<a
class="repo-link"
v-if="repoLink(link)"
rel="noopener noreferrer"
target="_blank"
:title="link"
:href="repoLink(link)"
>
<v-icon>fab fa-github</v-icon>
</a>
</v-card-title>
<v-card-text>{{ desc }}</v-card-text>
<v-card-text>
<template v-if="id">
<v-icon x-small>fa-fingerprint</v-icon>
{{ id }}
</template>
<v-icon x-small class="ml-2">fa-user</v-icon>
{{ author }}
</v-card-text>
<v-card-actions v-if="showCommand">
<v-btn block depressed class="btn-copy" @click="copyCommand()">
{{ text }}
<v-icon right small>fa-copy</v-icon>
</v-btn>
<v-snackbar v-model="snackbar">Copied!</v-snackbar>
</v-card-actions>
</v-card>
</template>
<script>
import copy from "copy-to-clipboard";
export default {
props: {
name: String,
desc: String,
id: String,
author: String,
link: String,
text: String,
command: String
},
data() {
return {
snackbar: false
};
},
computed: {
showCommand() {
return this.text && this.command;
}
},
methods: {
repoLink(repo) {
if (repo) {
return /^https?:/.test(repo) ? repo : `https://github.com/${repo}`;
}
return null;
},
copyCommand() {
copy(this.command, {
format: "text/plain"
});
this.snackbar = true;
}
}
};
</script>
<style scoped>
.repo-link {
text-decoration: none !important;
display: inline-block;
}
.repo-link:hover i {
color: #ea5252;
}
</style>