mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-14 09:38:13 +08:00
🎨 现在 post 跟 anno 也能等 share 了,虽然实现丑了点x
This commit is contained in:
@@ -1,4 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<ToLoading v-model="loading" title="正在生成分享图片" :subtitle="`${props.title}.png`" />
|
||||||
<div class="share-box">
|
<div class="share-box">
|
||||||
<div class="share-btn" @click="shareContent()">
|
<div class="share-btn" @click="shareContent()">
|
||||||
<v-icon style="color: var(--theme-switch-icon)"> mdi-share-variant </v-icon>
|
<v-icon style="color: var(--theme-switch-icon)"> mdi-share-variant </v-icon>
|
||||||
@@ -6,9 +7,15 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
// vue
|
||||||
|
import { ref, onMounted } from "vue";
|
||||||
|
import ToLoading from "../overlay/to-loading.vue";
|
||||||
// utils
|
// utils
|
||||||
import { generateShareImg } from "../../utils/TGShare";
|
import { generateShareImg } from "../../utils/TGShare";
|
||||||
|
|
||||||
|
// loading
|
||||||
|
const loading = ref<boolean>();
|
||||||
|
|
||||||
interface TShareBtnProps {
|
interface TShareBtnProps {
|
||||||
modelValue: HTMLElement;
|
modelValue: HTMLElement;
|
||||||
title: string;
|
title: string;
|
||||||
@@ -16,8 +23,12 @@ interface TShareBtnProps {
|
|||||||
|
|
||||||
const props = defineProps<TShareBtnProps>();
|
const props = defineProps<TShareBtnProps>();
|
||||||
|
|
||||||
|
onMounted(() => (loading.value = false));
|
||||||
|
|
||||||
async function shareContent() {
|
async function shareContent() {
|
||||||
|
loading.value = true;
|
||||||
await generateShareImg(props.title, props.modelValue);
|
await generateShareImg(props.title, props.modelValue);
|
||||||
|
loading.value = false;
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="css" scoped>
|
<style lang="css" scoped>
|
||||||
|
|||||||
Reference in New Issue
Block a user