各种需要使用的方法--＞vue/微信小程序/layui

news2024/11/15 11:50:11

各种需要使用的方法-->vue/微信小程序/layui

  • 1、vue里样式不起作用的方法，可以通过deep穿透的方式
  • 2、 js获取本周、上周、本月、上月日期
  • 3、ArrayBuffer Blob 格式转换
      • ArrayBuffer与Blob的区别
      • ArrayBuffer转Blob
      • Blob转ArrayBuffer需要借助fileReader对象
  • 4、使用有赞小程序组件的小程序编译成H5后报Unclosed bracket
  • 5、js根据id、pid把数据转化为树结构
  • 6、【实践】从零开始一个文件分块上传【后端为Golang】
  • 7、LayUI laydate日期选择器自定义 快捷选中今天、昨天 、本周、本月等等
  • 8、cc-comment 评论列表，回复，点赞，删除组件 vue3.2+uni-ui
  • 9、生成二维码的 jQuery 插件：jquery.qrcode.js的中文乱码问题
  • 10、PCX转PNG
  • 11、图片转文字在线
  • 12、DCloud插件市场
  • 13、Layui-Vue 框架
  • 14、jQueryUI插件
  • 15、jquery代码

1、vue里样式不起作用的方法，可以通过deep穿透的方式

vue里可以使用/deep/或者::v-deep来做穿透
1、在less里

<style lang='less' scoped>
  /deep/ 第三方组件类名{
      样式
   }
</style>

2、在scss里

<style lang='scss' scoped>
 ::v-deep 第三方组件类名{
      样式
   }
</style>

3、>>> 操作符
这是CSS中的一种深度作用选择器，如果你的CSS样式定义了scss/less等预处理器的话可能无法识别（stylus预处理器的样式可以穿透）。比如我引用了element中的el-popover组件，现在想重新定义el-popover组件中的样式。当使用普通的css样式来定义时就可以使用>>> 操作符来深度操作el-popover组件中的样式，如下所示
在这里插入图片描述

2、 js获取本周、上周、本月、上月日期

注：下述代码假定一周的第一天是周日，最后一天是周六，并且月份从0开始（0表示一月，1表示二月，依此类推）

// 获取今天的日期
var today = new Date();
// 获取本周的第一天（周日）
var firstDayOfWeek = new Date(today.setDate(today.getDate() - today.getDay()));
// 获取本周的最后一天（周六）
var lastDayOfWeek = new Date(today.setDate(today.getDate() - today.getDay() + 6));
// 获取上周的第一天（周日）
var firstDayOfLastWeek = new Date(firstDayOfWeek.setDate(firstDayOfWeek.getDate() - 7));
// 获取上周的最后一天（周六）
var lastDayOfLastWeek = new Date(lastDayOfWeek.setDate(lastDayOfWeek.getDate() - 7));
// 获取本月的第一天
var firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
// 获取本月的最后一天
var lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
// 获取上月的第一天
var firstDayOfLastMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1);
// 获取上月的最后一天
var lastDayOfLastMonth = new Date(today.getFullYear(), today.getMonth(), 0);
// 存储本周的所有日期
var datesOfWeek = [];
// 存储上周的所有日期
var datesOfLastWeek = [];
// 存储本月的所有日期
var datesOfMonth = [];
// 存储上月的所有日期
var datesOfLastMonth = [];
// 循环添加本周的所有日期到数组
for (var i = firstDayOfWeek; i <= lastDayOfWeek; i.setDate(i.getDate() + 1)) {
  datesOfWeek.push(new Date(i));
}
// 循环添加上周的所有日期到数组
for (var j = firstDayOfLastWeek; j <= lastDayOfLastWeek; j.setDate(j.getDate() + 1)) {
  datesOfLastWeek.push(new Date(j));
}
// 循环添加本月的所有日期到数组
for (var k = firstDayOfMonth; k <= lastDayOfMonth; k.setDate(k.getDate() + 1)) {
  datesOfMonth.push(new Date(k));
}
// 循环添加上月的所有日期到数组
for (var l = firstDayOfLastMonth; l <= lastDayOfLastMonth; l.setDate(l.getDate() + 1)) {
  datesOfLastMonth.push(new Date(l));
}
// 打印输出本周的所有日期
console.log("本周的所有日期：");
datesOfWeek.forEach(function(date) {
  console.log(date.toDateString());
});
// 打印输出上周的所有日期
console.log("上周的所有日期：");
datesOfLastWeek.forEach(function(date) {
  console.log(date.toDateString());
});
// 打印输出本月的所有日期
console.log("本月的所有日期：");
datesOfMonth.forEach(function(date) {
  console.log(date.toDateString());
});
// 打印输出上月的所有日期
console.log("上月的所有日期：");
datesOfLastMonth.forEach(function(date) {
  console.log(date.toDateString());
});

3、ArrayBuffer Blob 格式转换

ArrayBuffer与Blob的区别

ArrayBuffer对象：表示通用的、固定长度的原始二进制数据缓冲区。
Blob (binary large object)：表示一个不可变、原始数据的类文件对象。
blob类型只有slice方法，用于返回一个新的 Blob对象，包含了源 Blob对象中指定范围内的数据。
对比发现，ArrayBuffer的数据，是可以按照字节去操作的，而Blob的只能作为一个整的对象去处理。
所以，ArrayBuffer相比Blob更接近真实的二进制，更底层。

ArrayBuffer转Blob

// arraybuffer转blob很方便，作为参数传入即可
var buffer = new ArrayBuffer(16)
var blob = new Blob([buffer])

Blob转ArrayBuffer需要借助fileReader对象

let blob = new Blob([1,2,3,4,5]);
let reader = new FileReader();
   reader.onload = (e) => {
     let outbuffer: ArrayBuffer = e.target!.result as ArrayBuffer;
      console.log(outbuffer)；// 控制台输出的则是ArrayBuffer的数据了
   };
   reader.readAsArrayBuffer(blob);

4、使用有赞小程序组件的小程序编译成H5后报Unclosed bracket

问题描述
如题所说的那样。原工程从微信小程序转换成uni，早期的时候使用了vant的小程序组件。编译时报标题所示错误。

补充信息
解决方法很简单，只要把两个逗号换行就可以了。

更改 wxcomponents/icon/index.wxss 文件
在这里插入图片描述

5、js根据id、pid把数据转化为树结构

//格式化树数据
function toTreeData(data) {
	var pos = {};
	var tree = [];
	var i = 0;
	while(data.length != 0) {
		if(data[i].pid == null) {
			tree.push({
				id: data[i].id,
				name: data[i].text,
				children: []
			});
			pos[data[i].id] = [tree.length - 1];
			data.splice(i, 1);
			i--;
		} else {
			var posArr = pos[data[i].pid];
			if(posArr != undefined) {
 
				var obj = tree[posArr[0]];
				for(var j = 1; j < posArr.length; j++) {
					obj = obj.children[posArr[j]];
				}
 
				obj.children.push({
					id: data[i].id,
					name: data[i].text,
					children: []
				});
				pos[data[i].id] = posArr.concat([obj.children.length - 1]);
				data.splice(i, 1);
				i--;
			}
		}
		i++;
		if(i > data.length - 1) {
			i = 0;
		}
	}
	return tree;
}

6、【实践】从零开始一个文件分块上传【后端为Golang】

地址：https://juejin.cn/post/6844904159372656654#comment

7、LayUI laydate日期选择器自定义 快捷选中今天、昨天 、本周、本月等等

  1. 引入laydata插件
    　　下载 https://blog-static.cnblogs.com/files/zhangning187/laydate.js laydate.js
    　　替换laydate.js，就可以直接使用自定义快捷选中了
    2.自定义控件选取值
laydate.render({
        elem: '#freeTimeInput', //指定元素
        range: true,
        trigger: 'click', //采用click弹出
        value: '',
        extrabtns: [
            {
                id: 'today',
                text: '今天',
                range: [new Date(new Date().setDate(new Date().getDate())), new Date(new Date().setDate(new Date().getDate()))]
            },
            {
                id: 'yesterday',
                text: '昨天',
                range: [new Date(new Date().setDate(new Date().getDate() - 1)), new Date(new Date().setDate(new Date().getDate() - 1))]
            },
            {
                id: 'lastday-7',
                text: '近7天',
                range: [new Date(new Date().setDate(new Date().getDate() - 7)), new Date(new Date().setDate(new Date().getDate() - 1))]
            },
            {
                id: 'lastday-30',
                text: '近30天',
                range: [new Date(new Date().setDate(new Date().getDate() - 30)), new Date(new Date().setDate(new Date().getDate() - 1))]
            }
        ],
        done: function (val, stdate, ovdate) {
            // 确认选择事件后调用
        }
    });

在这里插入图片描述

8、cc-comment 评论列表，回复，点赞，删除组件 vue3.2+uni-ui

地址：https://ext.dcloud.net.cn/plugin?id=16266

9、生成二维码的 jQuery 插件：jquery.qrcode.js的中文乱码问题

function toUtf8(str) {
    var out, i, len, c;
    out = "";
    len = str.length;
    for (i = 0; i < len; i++) {
        c = str.charCodeAt(i);
        if ((c >= 0x0001) && (c <= 0x007F)) {
            out += str.charAt(i);
        } else if (c > 0x07FF) {
            out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
            out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
            out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
        } else {
            out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
            out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
        }
    }
    return out;
}
var str = toUtf8("钓鱼岛是中国的！");   
$('#code').qrcode(str);

10、PCX转PNG

地址： https://cn.office-converter.com/pcx-to-png

11、图片转文字在线

地址：https://web.baimiaoapp.com/

12、DCloud插件市场

地址：https://ext.dcloud.net.cn/

13、Layui-Vue 框架

地址：http://www.layui-vue.com/zh-CN/components/checkbox

14、jQueryUI插件

地址：https://www.jq22.com/jqueryUI-1-jq

15、jquery代码

地址：https://sc.chinaz.com/jiaoben/

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Java面试篇：Redis使用场景问题(缓存穿透，缓存击穿，缓存雪崩，双写一致性，Redis持久化，数据过期策略，数据淘汰策略)

Java面试篇：Redis使用场景问题(缓存穿透，缓存击穿，缓存雪崩，双写一致性，Redis持久化，数据过期策略，数据淘汰策略)

目录 1.缓存穿透解决方案一:缓存空数据解决方案二&#xff1a;布隆过滤器 2.缓存击穿解决方案一:互斥锁解决方案二:设置当前key逻辑过期 3.缓存雪崩1.给不同的Key的TTL添加随机值2.利用Redis集群提高服务的可用性3.给缓存业务添加降级限流策略4.给业务添加多级缓存 4.双写一致性…
阅读更多...
每日一练：LeeCode-21、合并两个有序链表【链表+递归+非递归】

每日一练：LeeCode-21、合并两个有序链表【链表+递归+非递归】

将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1&#xff1a; 输入&#xff1a;l1 [1,2,4], l2 [1,3,4] 输出&#xff1a;[1,1,2,3,4,4] 示例 2&#xff1a; 输入&#xff1a;l1 [], l2 [] 输出&#xff1a;[…
阅读更多...
家政服务管理平台设计与实现|SpringBoot+ Mysql+Java+ B/S结构(可运行源码+数据库+设计文档)

家政服务管理平台设计与实现|SpringBoot+ Mysql+Java+ B/S结构(可运行源码+数据库+设计文档)

本项目包含可运行源码数据库LW&#xff0c;文末可获取本项目的所有资料。 推荐阅读100套最新项目 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 2024年56套包含java&#xff0c;…
阅读更多...
阐述区块链“链游”项目3D/2D模式系统开发

阐述区块链“链游”项目3D/2D模式系统开发

随着区块链技术的不断发展&#xff0c;区块链游戏作为其应用领域之一也逐渐受到关注。在区块链游戏中&#xff0c;构建3D/2D模式系统是至关重要的&#xff0c;它决定了游戏的视觉效果、用户体验和技术实现。本文将探讨区块链游戏开发中构建3D/2D模式系统的关键要素和实现方法。…
阅读更多...
字符驱动程序-LCD驱动开发

字符驱动程序-LCD驱动开发

一、驱动程序的框架 总共分为五步&#xff1a; 1、自己设定或者系统分配一个主设备号 2、创建一个file_operations结构体 这个结构体中有操作硬件的函数&#xff0c;比如drv_open、drv_read 3、写一个注册设备驱动函数 需要register_chrdev(major,name,结构体)&#xff0…
阅读更多...
动态多态的注意事项

动态多态的注意事项

大家好&#xff1a; 衷心希望各位点赞。 您的问题请留在评论区&#xff0c;我会及时回答。 多态的基本概念 多态是C面向对象三大特性之一&#xff08;多态、继承、封装&#xff09; 多态分为两类&#xff1a; 静态多态&#xff1a;函数重载和运算符重载属于静态多态&#x…
阅读更多...
【嵌入式——QT】多语言界面

【嵌入式——QT】多语言界面

【嵌入式——QT】多语言界面 多语言页面开发步骤tr()函数 多语言页面开发步骤 第一步 在你编写的代码中添加tr()函数&#xff0c;方便之后可以精准的定位到你所需要翻译的部分。 第二步 在.pro文件中添加以下代码&#xff0c;这样会让你生成相应的.ts文件&#xff0c;ts文件是…
阅读更多...
关于RPC

关于RPC

初识RPC RPC VS REST HTTP Dubbo Dubbo 特性&#xff1a; 基于接口动态代理的远程方法调用 Dubbo对开发者屏蔽了底层的调用细节&#xff0c;在实际代码中调用远程服务就像调用一个本地接口类一样方便。这个功能和Fegin很类似&#xff0c;但是Dubbo用起来比Fegin还要简单很多&a…
阅读更多...
xcode生成静态库.a

xcode生成静态库.a

一、生成静态库 1.打开 Xcode 创建一个新的 Static Library 工程&#xff0c;取名applestudio 2.创建工程完毕后&#xff0c;简化目录结构 删除系统自动创建的同名类&#xff1a;applestudio.h和applestudio.m 把自己的代码复制进去&#xff0c;如例子&#xff1a;guiconnect.h…
阅读更多...
RSTP环路避免实验（华为）

RSTP环路避免实验（华为）

思科设备参考&#xff1a;RSTP环路避免实验&#xff08;思科&#xff09; 一&#xff0c;技术简介 RSTP (Rapid Spanning Tree Protocol) 是从STP发展而来 • RSTP标准版本为IEEE802.1w • RSTP具备STP的所有功能&#xff0c;可以兼容STP运行 • RSTP和STP有所不同 减少了…
阅读更多...
警务数据仓库的实现

警务数据仓库的实现

目录 一、SQL Server 2008 R2&#xff08;一&#xff09;SQL Server 的服务功能&#xff08;二&#xff09;SQL Server Management Studio&#xff08;三&#xff09;Microsoft Visual Studio 二、创建集成服务项目三、配置“旅馆_ETL”数据流任务四、配置“人员_ETL”数据流任…
阅读更多...
数据结构·二叉树(1)

数据结构·二叉树(1)

目录 1 树的概念及结构 1.1 树的结构 1.2 树的概念 1.3树的表示 2 二叉树的概念及结构 2.1二叉树的概念 2.2 特殊的二叉树 2.3 二叉树的存储结构 1 树的概念及结构 1.1 树的结构 前面所学到的顺序表链表等&#xff0c;都是线性的数据结构&#xff0c;今天介绍的树&am…
阅读更多...
Android Native Crash奔溃

Android Native Crash奔溃

一.Native Crash 简介 从 Android 系统全局来说&#xff0c;Crash 通常分为 App/Framework Crash&#xff0c;Native Crash&#xff0c;以及 Kernel Crash。 对于 App 层或者 Framework 层的 Crash(即 Java 层面 Crash)&#xff0c;那么往往是通过抛出未捕获异常而导致的 Cras…
阅读更多...
FPGA电平标准

FPGA电平标准

1.LVTTL&#xff1a;&#xff08;3.3v&#xff09; 2.LVCOMS&#xff1a;&#xff08;1.8v&#xff09; 3.LVDS&#xff08;1.8v&#xff09;&#xff1a;LVDS_25&#xff08;2.5v&#xff09; 4&#xff1a;如果是ddr3与fpga相连接fpga的vcco推荐&#xff08;1.5v&#xff09;…
阅读更多...
flask_restful的基本使用

flask_restful的基本使用

优势&#xff1a; Flask-Restful 是一个专门用来写 restful api 的一个插件。 使用它可以快速的集成restful api 接口功能。 在系统的纯api 的后台中&#xff0c;这个插件可以帮助我们节省很多时间。 缺点&#xff1a; 如果在普通的网站中&#xff0c;这个插件就没有优势了&…
阅读更多...
【SQL】1517. 查找拥有有效邮箱的用户（正则表达式regexp）

【SQL】1517. 查找拥有有效邮箱的用户（正则表达式regexp）

前述 sql-正则表达式SQL学习笔记 – REGEXP 题目描述 leetcode 题目&#xff1a;1517. 查找拥有有效邮箱的用户 Code select * from Users where mail regexp ^[a-zA-Z][a-zA-Z0-9_.-]*leetcode\\.com$图片引用自 MySQL正则表达式
阅读更多...
后端常问面经之操作系统

后端常问面经之操作系统

请简要描述线程与进程的关系,区别及优缺点&#xff1f; 本质区别&#xff1a;进程是操作系统资源分配的基本单位&#xff0c;而线程是任务调度和执行的基本单位 在开销方面&#xff1a;每个进程都有独立的代码和数据空间&#xff08;程序上下文&#xff09;&#xff0c;程序之…
阅读更多...
flask_restful规范返回值

flask_restful规范返回值

使用方法 导入 flask_restful.marshal_with 装饰器 定义一个字典变量来指定需要返回的标准化字段&#xff0c;以及该字段的数据类型 在请求方法中&#xff0c;返回自定义对象的时候&#xff0c; flask_restful 会自动的读 取对象模型上的所有属性。 组装成一个符合标准化参…
阅读更多...
定时器 c++ 基于时间线

定时器 c++ 基于时间线

获取当前时间std::chrono::system_clock::now(); std::chrono::time_point_cast<std::chrono::milliseconds>(now) 是 std::chrono 标准库中的一个函数调用&#xff0c;用于将时间点 now 转换为毫秒级别精度的时间点。 friend class timermanger; 表示将类 timermanger …
阅读更多...
数据结构入门学习③——栈和队列

数据结构入门学习③——栈和队列

前言&#xff1a; 本篇博客主要介绍有关栈和队列数据结构相关知识 思维导图介绍&#xff1a; 开始之前&#xff0c;先介绍一下这篇博客主要介绍的主体内容&#xff1a; 栈和队列&#xff1a; 回顾线性表&#xff1a; 在刚才的思维导图里我们也了解到了——栈和队列都属于线性…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023