当前位置: 首页 > news >正文

2023/08/10

文章目录

    • 一、计算属性传参
    • 二、小程序、h5跳转其他平台授权
    • 三、封装popup弹窗
    • 四、实现保存海报
    • 五、下载图片和复制分享链接

一、计算属性传参

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

下面我分别使用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标签
},

相关文章:

2023/08/10

文章目录 一、计算属性传参二、小程序、h5跳转其他平台授权三、封装popup弹窗四、实现保存海报五、下载图片和复制分享链接 一、计算属性传参 计算属性的值往往通过一个回调函数返回&#xff0c;但是这个回调函数是无法传递参数的&#xff0c;要想实现计算属性传参可以通过闭包…...

LeetCode 1289. 下降路径最小和 II:通俗易懂地讲解O(n^2) + O(1)的做法

【LetMeFly】1289.下降路径最小和 II&#xff1a;通俗易懂地讲解O(n^2) O(1)的做法 力扣题目链接&#xff1a;https://leetcode.cn/problems/minimum-falling-path-sum-ii/ 给你一个 n x n 整数矩阵 arr &#xff0c;请你返回 非零偏移下降路径 数字和的最小值。 非零偏移下…...

Coin Change

一、题目 Suppose there are 5 types of coins: 50-cent, 25-cent, 10-cent, 5-cent, and 1-cent. We want to make changes with these coins for a given amount of money. For example, if we have 11 cents, then we can make changes with one 10-cent coin and one 1-c…...

2023 8 -14链表OJ

&#x1f495;人面只今何处去&#xff0c;桃花依旧笑春风&#x1f495; 作者&#xff1a;Mylvzi 文章主要内容&#xff1a;详解链表OJ题 题目一&#xff1a;环形链表&#xff08;判断链表是否带环&#xff09; 题目描述&#xff1a; 画图分析&#xff1a; 代码实现&#x…...

大数据必回之LSM树

LSM树&#xff08;Log-Structured-Merge-Tree&#xff09;并不像B、红黑树一样是一颗严格的树状数据结构&#xff0c;它其实是一种存储结构&#xff0c;像HBase、RocksDB这些NoSQL存储都是采用LSM树。它是一种分层、有序、面向磁盘的数据结构&#xff0c;核心思想是顺序写性能远…...

Vue中的Object.defineProperty详解

Vue中的Object.defineProperty是一个比较重要的方法&#xff0c;它是可以定义对象中属性的一个方法&#xff0c;相比于在对象中直接定义的对象&#xff0c;它更具有灵活性。 直接定义对象中的属性是这样的&#xff1a; let person {name:张三,address:广东,age:12,} 而Object.…...

MySQL高阶知识点(一)一条SQL【更新】语句是如何执行的

一条SQL【更新】语句是如何执行的 首先&#xff0c;可以确定的说&#xff0c;【查询】语句的那一套流程&#xff0c;【更新】语句也是同样会走一遍&#xff0c;与查询流程不一样的是&#xff0c; 更新语句涉及到【事务】&#xff0c;就必须保证事务的四大特性&#xff1a;ACID&…...

threejs实现模型gltf的动画效果

确保加载模型后模型有animations属性。加载完模型后&#xff0c;在模型中定义mixer的变量值。 // 4、加入加载器 const loader new GLTFLoader(); loader.load("./model/gltf/RobotExpressive/RobotExpressive.glb", function (gltf) {// 赋值动画给mixermixer ne…...

Harmony创建项目ohpm报错

Harmony创建FA模型的项目时报如下错&#xff1a; The registry is empty - edit .ohpmrc file or use "ohpm config set registry your_registry" command to set registry.解决方法&#xff1a; File -> Settings -> Build,Execution,Deployment -> Ohpm …...

44 | 酒店预订及取消的数据分析

1.背景介绍 数据集来自Kaggle网站上公开的Hotel booking demand项目 该数据集包含了一家城市酒店和一家度假酒店的预订信息,包括预订时间、入住时间、成人、儿童或婴儿数量、可用停车位数量等信息。 数据集容量约为12万32 本次数据分析主要包含如下内容: 总览数据,完成对…...

物联网和不断发展的ITSM

物联网将改变社会&#xff0c;整个技术行业关于对机器连接都通过嵌入式传感器、软件和收集和交换数据的电子设备每天都在更新中。Gartner 预测&#xff0c;全球将有4亿台互联设备投入使用。 无论企业采用物联网的速度如何&#xff0c;连接设备都将成为新常态&#xff0c;IT服务…...

加了ComponentScan,但是feign接口无法注入的原因

正文 正确的注入 如果发现无法注入&#xff1a;看看启动类Application是否有加入注解&#xff1a;EnableFeignClients(AppConstant.BASE_PACKAGES) 注意&#xff1a;EnableFeignClients和ComponentScan是两个独立的扫描&#xff0c;所以&#xff0c;如果只配置了ComponentSca…...

C#Winform中DataGridView控件显示行号实例

本文演示C#Winform中如何给DataGridView控件显示行号。 首先创建winform项目,添加DataGridView控件,给控件添加两列。 修改CS代码: using System.Windows.Forms;namespace DataGridviewDemo {public partial class Form1 : Form{public Form1(){InitializeComponent();//添…...

Stable Diffusion WebUI安装和使用教程(Windows)

目录 下载Stable Diffusion WebUI运行安装程序&#xff0c;双击webui.bat界面启动插件安装&#xff08;github&#xff09;模型下载(有些需要魔法&#xff09;安装过程遇到的大坑总结参考的博客 整个过程坑巨多&#xff0c;我花了一个晚上的时间才全部搞定,本教程针对有编程基础…...

LeetCode 35题:搜索插入位置

题目 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 示例 1: 输入: nums [1,3,5,6], target 5 输出: 2示例 2:…...

Linux系统中常见的几种软件包管理器

软件包管理器 DPKGAPT&#xff08;APT-GET&#xff09;RPMYUMDNF Linux软件包管理工具是一组命令的集合&#xff0c;其作用是在操作系统中提供安装、更新、删除及卸载软件的方法&#xff0c;同时提供对系统中所有软件状态信息的查询。不同的Linux发行版会有不同的包管理器&…...

python异步IO完全指南

原地址&#xff1a;https://flyingbyte.cc/post/async_io/ python异步IO完全指南 做为一种并行编程的範式&#xff0c;异步IO在Python中非常受重视&#xff0c;从Python3.4到3.7快速演进。 我们已经有多线程&#xff0c;多进程&#xff0c;并发&#xff08;concurrency&#x…...

打造企业或者个人IP引流法

打造企业或者个人IP引流法. 大家好&#xff0c;我是百收网SEO编辑&#xff1a;狂潮老师&#xff0c;今天给大家分享企业IP打造的方法 首先我们想让人知道你的企业叫什么&#xff0c;怎么找到你的企业 这个时候我们就需要去各大平台发布信息&#xff0c;客户想了解直接去搜索…...

TMC Self-Managed 提升跨多云环境安全性

作为云原生技术栈的关键技术之一&#xff0c;Kubernetes 被企业用户广泛试用并开始支撑实际业务应用运行&#xff0c;实现技术先进性带来的生产力提升。但与此同时&#xff0c;随着 Kubernetes 技术的不断广泛与深化使用&#xff0c;企业用户也开始面临诸多技术上的挑战&#x…...

并发编程 - 线程间三种常见的通信手段

线程间通信是指多个线程之间通过某种机制进行协调和交互&#xff0c;例如&#xff1a;线程等待和通知机制就是线程通讯的主要手段之一。 在 Java 中有以下三种实现线程等待的手段 &#xff1a; Object 类提供的 wait()&#xff0c;notify() 和 notifyAll() 方法&#xff1b;C…...

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

Python爬虫实战:研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

三维GIS开发cesium智慧地铁教程(5)Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

短视频矩阵系统文案创作功能开发实践,定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

Pydantic + Function Calling的结合

1、Pydantic Pydantic 是一个 Python 库&#xff0c;用于数据验证和设置管理&#xff0c;通过 Python 类型注解强制执行数据类型。它广泛用于 API 开发&#xff08;如 FastAPI&#xff09;、配置管理和数据解析&#xff0c;核心功能包括&#xff1a; 数据验证&#xff1a;通过…...

leetcode73-矩阵置零

leetcode 73 思路 记录 0 元素的位置&#xff1a;遍历整个矩阵&#xff0c;找出所有值为 0 的元素&#xff0c;并将它们的坐标记录在数组zeroPosition中置零操作&#xff1a;遍历记录的所有 0 元素位置&#xff0c;将每个位置对应的行和列的所有元素置为 0 具体步骤 初始化…...

门静脉高压——表现

一、门静脉高压表现 00:01 1. 门静脉构成 00:13 组成结构&#xff1a;由肠系膜上静脉和脾静脉汇合构成&#xff0c;是肝脏血液供应的主要来源。淤血后果&#xff1a;门静脉淤血会同时导致脾静脉和肠系膜上静脉淤血&#xff0c;引发后续系列症状。 2. 脾大和脾功能亢进 00:46 …...

Python环境安装与虚拟环境配置详解

本文档旨在为Python开发者提供一站式的环境安装与虚拟环境配置指南&#xff0c;适用于Windows、macOS和Linux系统。无论你是初学者还是有经验的开发者&#xff0c;都能在此找到适合自己的环境搭建方法和常见问题的解决方案。 快速开始 一分钟快速安装与虚拟环境配置 # macOS/…...

Qt的学习(二)

1. 创建Hello Word 两种方式&#xff0c;实现helloworld&#xff1a; 1.通过图形化的方式&#xff0c;在界面上创建出一个控件&#xff0c;显示helloworld 2.通过纯代码的方式&#xff0c;通过编写代码&#xff0c;在界面上创建控件&#xff0c; 显示hello world&#xff1b; …...