工作记录2

1. 要实现y轴超出部分滚动的效果,可以这样写

<div style="max-height: 384px; overflow-y: auto;">
</div>

2. 当后端接口还没好的时候,可以自己模拟一下接口返回的数据

export const getCommodityDetail = (id) => Promise.resolve({id: '11111',name: 'xiongxinyu',age: 18})

3. 标签可能会只有父级标签,也有可能会有父级标签和子级标签(子级标签可能有一个或多个),因为存在父级标签和子级标签的区别,所以操作上就会有所不同,这一点可以通过接口返回的层级数据来判断,如果record.parentId==0,说明它是父级,那么就让这一行多一个“新增子项”的操作。

<template #action="{ record }"><TableAction :action="getActions(record)" />
</template>
function getActions(record) {let actions = [{label: '编辑',onClick: handleEdit.bind(null,record),}{label: '删除',popConfrim:{title:'是否确认删除',confirm: handleDelete.bind(null, record),}}]if(record.parentId == '0') {actions.unshift({label: '新增子项',onClick: handleAddSub.bind(null,record)})}return actions;
}

4. 展开或折叠树形表格

<a-button @click="expandAll">展开全部</a-button>

<a-button @click="collapseAll">折叠全部</a-button>

setup(){const expandedRowKeys = ref<string>([]);const [registerTable, { expandAll, collapseAll, reload}] = useTable({isTreeTable: true,expandedRowKeys: expandedRowKeys.value,onExpand: (expande, record) => {if(expande){if(!expandedRowKeys.value.includes(record.id)){expandedRowKeys.value.push(record.id);}}else{let index = expandedRowKeys.value.indexOf(record.id);expandedRowKeys.value.splice(index,1);}}})
}

5. 利用微信schema从app跳转到小程序

本来是可以前端自己去生成schemaUrl的,但是生成的链接有时效性,然后最新的那种明文码它好多设备不支持,所以最后决定让后端生成。前端把想要到时候在小程序页面拿到的参数在此时传递给后端,后端返回schemaUrl。

const res = await getwxScheme(channelId,projectId);
Linking.openURL(res)

因为生成这个链接的时候后端是拿了我们传的参数去生成的,所以返回的链接的信息里其实是携带了这些参数的,那么我们在用这个链接跳转到小程序的某个页面的时候,就可以在这个页面拿到这个参数了,就正常在onLoad里面的option拿就行。

onLoad(option){console.log(option.projectId,option.channelId);
}

5. 联系在线客服

首先通过调用接口获取机构在机构端对客服的一些配置,可以选择配置客服的方式(有h5和js客服),选择配置h5客服的话,就必须得填写客服链接,选择配置js客服的话,就必须得填写JS客服代码,如果获取到接口返回的信息表示机构配置的是h5客服,那就直接用window.opend打开当时填的客服链接即可,但如果是js客服的话,就可以调用螳螂客服的一些api来实现了。

const openChatModal = async () => {if(customerSet.customerType == 1){window.open(customerSet.customerLink, "_blank");return;}else{chartCode();}
}const chartCode = () => {if(window.mantis && window.mantis.requestChat) {window.mantis.requestChat();}else {const scriptDom = stringToDom(customerSet.customerCode);document.head.appendChild(scriptDom);// 设置轮询,避免查不到let num = 0;let timerId = setInterval(() => {num++;// 轮询10s没有初始化关闭if(num >20){clearInterval(timerId);}// 获取到requestChatif(window.mantis && window.mantis.requestChat) {window.mantis.requestChat();clearInterval(timerId);}},500);}
}
const stringToDOM = (str:string) => {if(str.includes("script")){var parser = new DOMParser();// 使用DOMParser的parseFromString方法来转换字符串到DOMvar doc = parser.parseFromString(str,"text/html");// 获取转换后的DOM对象var dom: any = doc.body.firstChild || doc.head.firstChild;const script1:any = document.createElement("script");script1.src = dom.src;return script1;}else {const script1:any = document.createElement("script");script1.src = str;return script1;}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/860397.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL入门学习-连接查询.复杂连接

复杂连接是指涉及多个表之间的连接操作&#xff0c;通过使用条件和连接类型来组合和关联这些表的数据。 一、常见的复杂连接类型及其特点、使用方法和示例代码&#xff1a; 1. INNER JOIN&#xff08;内连接&#xff09;&#xff1a; - 特点&#xff1a;返回两个表中满足连接…

构建实用的Flutter文件列表:从简到繁的完美演进

前言&#xff1a;为什么我们需要文件列表&#xff1f; 在现代科技发展迅速的时代&#xff0c;我们的电脑、手机、平板等设备里积累了大量的文件&#xff0c;这些文件可能是我们的照片、文档、音频、视频等等。然而&#xff0c;当文件数量增多时&#xff0c;我们如何快速地找到…

HTML(20)——定位

定位 作用&#xff1a;灵活的改变盒子在网页中的位置 实现&#xff1a; 定位模式&#xff1a;position边偏移&#xff1a;设置盒子的位置 leftrighttopbottom 相对定位 position&#xff1a;relative 改变位置的参照物是自己原来的位置&#xff0c;并且不脱标占位&#x…

程序员是干嘛的?程序员在职场中的重要性

程序员是干嘛的&#xff1f;程序员在职场中的重要性 随着科技的飞速发展&#xff0c;计算机技术得到了广泛应用&#xff0c;程序员也成为了当今职场中不可或缺的一部分。那么&#xff0c;程序员究竟是干什么的呢&#xff1f;他们为什么如此重要&#xff1f;下面我们来详细探讨一…

驾校预约管理系统

摘 要 随着驾驶技术的普及和交通安全意识的增强&#xff0c;越来越多的人选择参加驾校培训&#xff0c;以获取驾驶执照。然而&#xff0c;驾校管理面临着日益增长的学员数量和繁琐的预约管理工作。为了提高驾校的管理效率和服务质量&#xff0c;驾校预约管理系统成为了必不可少…

微信app支付没上架开通方法

对于许多商家来说&#xff0c;特别是那些经营游戏、商城等拥有自己APP的商家&#xff0c;接入微信支付无疑是一个重要的步骤&#xff0c;它能让用户更方便地进行支付操作&#xff0c;提升购物体验。然而&#xff0c;随着微信支付政策的调整&#xff0c;现在开通APP支付并不像以…

Java抽象类:深入理解与应用

一、引言 在Java的面向对象编程中&#xff0c;抽象类&#xff08;Abstract Class&#xff09;是一个非常重要的概念。它允许我们定义一个类&#xff0c;该类中包含一些抽象方法和非抽象方法&#xff0c;但自己不能被实例化。抽象类主要用于创建类的层次结构&#xff0c;并为子…

单片机练习题6

一、填空 1&#xff0e;如果采用晶振的频率为3MHz&#xff0c;定时器/计数器Tx&#xff08;x0,1&#xff09;工作在方式0、1、2下&#xff0c;其方式0的最大定时时间为 &#xff0c;方式1的最大定时时间为 &#xff0c;方式2的最大定时时间为 。 答…

手机照片压缩到20k以内免费,这几款心动软件快收好!

在数字化时代&#xff0c;手机拍照已成为我们记录生活的重要方式之一。然而&#xff0c;高清的照片也意味着占用着越来越多的手机存储空间。如果你正在为手机内存告急而烦恼&#xff0c;那么这几款手机照片压缩神器或许能成为你的救星&#xff01;它们不仅可以将照片轻松压缩至…

【Linux】多线程的相关知识点

一、线程安全 1.1 可重入 VS 线程安全 1.1.1 概念 线程安全&#xff1a;多个线程并发执行同一段代码时&#xff0c;不会出现不同的结果。常见对全局变量或者静态变量进行操作&#xff0c;并且没有锁的保护的情况下&#xff0c;会出现问题。重入&#xff1a;同一个函数被不同…

vue3通过vue-video-player实现视频倍速、默认全屏、拖拽进度条等功能

效果图&#xff1a; 1、场景&#xff1a; js原生的video标签在不同浏览器及不同型号手机上都展示的不一样&#xff0c;一部分没有倍速&#xff0c;一部分没有全屏等功能&#xff0c;为了统一视频播放的交互功能&#xff0c;使用vue-video-player插件来完成&#xff0c;vue-vid…

Java面试题:讨论事务的ACID属性,并解释在Java中如何管理事务

事务是数据库管理系统中的一组操作&#xff0c;这些操作要么全部成功&#xff0c;要么全部失败&#xff0c;事务的ACID属性确保了数据库系统的可靠性和一致性。ACID是指&#xff1a; Atomicity&#xff08;原子性&#xff09;&#xff1a;事务中的所有操作要么全部完成&#xf…

轻松打造分班查询系统,这个工具助您一臂之力!

新学期伊始&#xff0c;老师们知道该如何快捷制作并发布分班查询系统吗&#xff1f;面对繁杂的学生名单和班级分配&#xff0c;无疑是一项巨大的麻烦。传统的纸质通知效率低下&#xff0c;容易出错&#xff0c;更别提在信息传递过程中可能出现的混乱和误解了。 现在有一个工具可…

【工具推荐】ONLYOFFICE 桌面编辑器 8.1:引入全新功能,提升文档处理体验

ONLYOFFICE 桌面编辑器 8.1 现已发布&#xff1a;功能完善的 PDF 编辑器、幻灯片版式、改进从右至左显示、新的本地化选项等 【工具推荐】ONLYOFFICE 桌面编辑器 8.1&#xff1a;引入全新功能&#xff0c;提升文档处理体验 一、什么是ONLYOFFICE&#xff1f; ONLYOFFICE 是…

tomcat设置Context不生效的问题反思(粗心错误)

近日一个兄弟在设置tomcat的Host时&#xff0c;发生了设置"context"后&#xff0c;没有生效的问题&#xff0c;以下是发生问题的配置文件部分截取&#xff1a; <Host name"www.test.com" appBase"/data/myapps" unpackWARs"true" …

Kotlin 中的内联函数

1 inline 内联函数&#xff1a;消除 Lambda 带来的运行时开销。 举例来说&#xff1a; fun main() {val num1 100val num2 80val result num1AndNum2(num1, num2) { n1, n2 ->n1 n2} }fun num1AndNum2(num1: Int, num2: Int, operation: (Int, Int) -> Int): Int …

一个项目学习Vue3---NVM和NPM安装

内容资源下载&#xff1a;关注公众号(资小库)回复vue下载本内容资源 1.Windows安装NVM包管理工具 公众号回复&#xff1a;nvm 获取nvm下载地址 步骤1&#xff1a;删除本机Node.js 设置->应用->安装的应用->搜索node.js->删除 清理目录文件 C:\Program Files…

微型导轨:手术机器人的高精度“骨骼”

微型导轨精度高&#xff0c;摩擦系数小&#xff0c;自重轻&#xff0c;结构紧凑&#xff0c;被广泛应用在医疗器械中&#xff0c;尤其是在手术机器人中的应用&#xff0c;通过手术机器人&#xff0c;外科医生可以远离手术台操纵机器人进行手术。可以说&#xff0c;是当之无愧的…

Unity2D - 碰撞检测及边界检测

1. 地面检测 1.1 地面检测的逻辑及代码 一般情况下&#xff0c;对于手人物进行事件处理或动作处理时&#xff0c;我们需要判定人物是否在地面上&#xff0c;这个时候最好的方式是设定地面碰撞器&#xff0c;只有角色在地面时才可以进行跳跃; 我们可以想象物体的重心向地面延伸…

uniapp或安卓对接扫码枪

背景介绍 最近老板又随便丢过来一个扫码枪让我研究快速上线&#xff0c;我心想着又是什么串口通信吗&#xff0c;结果发现是usb的&#xff0c;我想着是不是有什么协议&#xff0c;结果直接插上电脑或者手机 均可在输入框直接输入&#xff0c;不用任何的代码编写 但结合了一下…