网站商城建设员招聘,网络运营课程培训视频,厦门企业网站制作,高德地图海外能用吗文章目录 一、计算属性传参二、小程序、h5跳转其他平台授权三、封装popup弹窗四、实现保存海报五、下载图片和复制分享链接 一、计算属性传参
计算属性的值往往通过一个回调函数返回#xff0c;但是这个回调函数是无法传递参数的#xff0c;要想实现计算属性传参可以通过闭包… 文章目录 一、计算属性传参二、小程序、h5跳转其他平台授权三、封装popup弹窗四、实现保存海报五、下载图片和复制分享链接 一、计算属性传参
计算属性的值往往通过一个回调函数返回但是这个回调函数是无法传递参数的要想实现计算属性传参可以通过闭包的方式实现。
下面我分别使用vue2和vue3实现给计算属性传入参数typetype5时返回’抖音’4时返回’快手’
Vue3版
templatediv{{ platName(num) }}/divbutton clicknum/button
/templatescript 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}
})
/scriptstyle langscss scoped
/styleVue2版
templatedivdiv{{platName(num)}}/divbutton clicknum/button/div
/templatescript
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}}}
}
/scriptstyle
/style都能得到如下效果 可以看到计算属性成功传递参数并且返回的结果也是响应式的。
二、小程序、h5跳转其他平台授权
实现小程序、h5跳转其他平台授权的思路是【抖音举例】 往往需要调用一个跳转其他平台的接口此接口传递的参数往往包含一个授权完成的返回地址接口调用成功后会返回一个其他平台授权的页面地址使用window.location.href页面地址实现强制跳转授权页在授权页授权完成后自动返回通过参数传递的授权完成返回地址这样就完成授权了。
三、封装popup弹窗
封装popup弹窗时可以使用具名插槽如 slot namecontent/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标签
},
