vue3：分享-保存图片二维码到相册

最新推荐文章于 2024-08-07 10:37:13 发布

早日退休！

最新推荐文章于 2024-08-07 10:37:13 发布

阅读量1k

点赞数

分类专栏：前端文章标签：前端 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_48894212/article/details/128641892

版权

本文分享了在Vue3中如何将图片和二维码保存到用户相册的实现过程，涉及到了.vue文件的使用，以及ShareSheet和Bill6两个组件的应用。

摘要由CSDN通过智能技术生成

.vue文件

<template>
    <div class="wrap">
        <div class="collection_bottom-item" @click="handleShare">
            <span><img src="../../assets/icon_certifies1.png" />分享</span>
        </div>

        <!-- 分享组件 -->
        <ShareSheet
            v-if="showShareSheet && billImg"
            :name="data?.name"
            :image="data?.cover_url"
            :show="showShare"
            :url="pathUrl"
            :billImg="billImg"
            :canvas="billCanvas"
            bill-title="分享"
            @handleCancel="showShare = false"
            @onSelect="handleSelectShare"
        />
        <Bill6
            :name="data?.name"
            :url="pathUrl"
            :issuer_name="data?.issuer_name"
            :nick-name="userInfo.nickName"
            :uuid="
                isGuoList === '1'
                    ? data?.zsw_id
                    : data?.detail?.uuid
                    ? data?.detail?.uuid
                    : data?.nft_detail_id
            "
            :time="
                dayjs(data?.mint_time ? data?.mint_time : data?.start_time).format(
                    'YYYY-MM-DD HH:mm:ss'
                )
            "
            @on-change="handleChangeBill"
        />
        <van-overlay class="my-overlay" :show="showoverlay" @click="showoverlay = false">
            <van-loading type="spinner">图片海报生成中</van-loading>
        </van-overlay>
    </div>
</template>

<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import { store } from '../../store'
import ShareSheet from '../../components/ShareSheet.vue'
import Bill6 from '../../components/Bill/Bill_6.vue'

const showShare = ref(false)
const pathUrl = ref(window.location.origin + '/#/home')
const billImg = ref('')
const billCanvas = ref()
const showoverlay = ref(false)
const showShareSheet = ref(false)

const init = async () => {
    await store.dispatch('home/getNeAssetDetail', id)
}
init()

const data = computed(() => store.state.home.meAssetDetail)
const userInfo = computed(() => store.state.login.userInfo)

watch(
    () => data.value,