2023/08/10

一、计算属性传参

计算属性的值往往通过一个回调函数返回，但是这个回调函数是无法传递参数的，要想实现计算属性传参可以通过闭包的方式实现。

下面我分别使用vue2和vue3实现给计算属性传入参数type，type=5时返回’抖音’=4时返回’快手’

Vue3版：

<template>
    <div>{{ platName(num) }}</div>
    <button @click="num++">++</button>
</template>
  
<script setup>
import { computed, ref } from 'vue'
let num = ref(4)
const platName = computed(() => {
    return function (type) {
        let name = ''
        switch (type) {
            case 5:
                name = '抖音'
                break
            case 4:
                name = '快手'
                break
            default:
                break
        }
        return name
    }
})
</script>
  
<style lang="scss" scoped>
</style>

Vue2版：

<template>
    <div>
        <div>{{platName(num)}}</div>
        <button @click="num++">++</button>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            num: 4
        }
    },
    computed: {
        platName: () => {
            return function (type) {
                let name = ''
                switch (type) {
                    case 4:
                        name = '快手'
                        break
                    case 5:
                        name = '抖音'
                        break
                    default:
                        break
                }
                return name
            }
        }
    }
}
</script>

<style>
</style>

都能得到如下效果

可以看到计算属性成功传递参数，并且返回的结果也是响应式的。

二、小程序、h5跳转其他平台授权

实现小程序、h5跳转其他平台授权的思路是：【抖音举例】
往往需要调用一个跳转其他平台的接口，此接口传递的参数往往包含一个授权完成的返回地址，接口调用成功后会返回一个其他平台授权的页面地址，使用window.location.href=页面地址实现强制跳转授权页，在授权页授权完成后自动返回通过参数传递的授权完成返回地址，这样就完成授权了。

三、封装popup弹窗

封装popup弹窗时可以使用具名插槽如
<slot name="content"></slot>来实现灵活展示弹窗内容，
使用<template #content>插入内容</template>插入弹窗中的内容。

四、实现保存海报

保存海报要依靠html2canvas库，写法固定

import html2canvas from 'html2canvas'
//绘制图片
drawImage() {
    if (this.poster == '') {  // 如果海报链接为空
        this.$loading()
        let dom = document.querySelector('#poster')  // 获取要下载的元素
        html2canvas(dom, {  // 利用html2canvas库生成图片链接
            width: dom.clientWidth, //dom 原始宽度
            height: 554,
            scrollY: 0,
            scrollX: 0,
            useCORS: true
        }).then((canvas) => {
            this.$hideLoading()
            //成功后调用返回canvas.toDataURL返回图片的imageData
            this.poster = canvas.toDataURL('image/png', 1)
            this.downloadFile(this.poster)  // 根据链接下载图片
        })
    } else {
        this.downloadFile(this.poster)
    }
},
downloadFile(url) {
    // h5 a标签创建
    var link = document.createElement('a');
    link.href = url;
    link.download = '分享海报.png';
    link.click();
}

五、下载图片和复制分享链接

下载图片和复制分享链接实现的思路是一个的，都是用js创建一个元素，然后操作这个元素实现功能。

下载图片：

downloadFile(url) {
    // h5 a标签创建
    var link = document.createElement('a');
    link.href = url;  // 配置下载链接
    link.download = '分享海报.png';  // 配置下载文件名
    link.click();  // 触发下载
}

复制链接

// 复制分享链接
copyUrl(url) {
    let oinput = document.createElement('input') // 创建input标签
    oinput.value = url // 将链接赋给input
    document.body.appendChild(oinput);  // 渲染input标签
    oinput.select();  // 选择input标签
    document.execCommand('copy');  // 调用copy
    uni.showToast({
        title: '复制成功',
        duration: 500
    });
    document.body.removeChild(oinput);  // 移除input标签
},