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 = '抖音'breakcase 4:name = '快手'breakdefault: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 = '快手'breakcase 5:name = '抖音'breakdefault: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返回图片的imageDatathis.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 // 将链接赋给inputdocument.body.appendChild(oinput);  // 渲染input标签oinput.select();  // 选择input标签document.execCommand('copy');  // 调用copyuni.showToast({title: '复制成功',duration: 500});document.body.removeChild(oinput);  // 移除input标签
},