qq_29715077的博客

原创 html2canvas把网页生成图片

Vue3、Vite使用 html2canvas 把Html生成canvas转成图片并保存，以及填坑记录-CSDN博客

原创 Vue 自定义指令：ClickOutside（点击当前区域之外的位置）

在util文件夹下生成clickoutside.js。使用clickoutside。vue3的使用方法参考。

原创 tinymce在vue3中的用法以及文本流式输出

在项目的public/tinymce文件夹下引入按需放置自定义插件文件，比如formatpainter和indent2em在使用tinymce插件的vue中引入自定义插件。

原创 无缝连接相片跑马灯，悬停和鼠标离开播放、监听该区域在可视区域才播放

【代码】无缝连接相片跑马灯，悬停和鼠标离开播放、监听该区域在可视区域才播放。

原创 前端常用utils.js

【代码】前端常用utils.js。

原创 记一个有意思的写法

【代码】记一个有意思的写法。

原创 vue3页面点击按钮滚动条置顶、tabs滚动监听亮显、点击锚点跳转整合

hooks文件夹>useBackTop.js。hooks文件夹>useBackTop.js。

原创 vue2和vue3的一些技术点复习

1、vue2对已有组件二次封装，例如fes2 input 组件。

原创 记录一次成功在vue3+vite使用swiper

我使用的swiper版本： 7.3.1。

原创 前端一句代码查看页面溢出

1、运行方法浏览器-console运行此行代码；2、使用案例有时候页面设置了页面宽度100%，但是页面还是有空白等给页面所有元素加上随机颜色线条，直接查看溢出

原创 vue 利用原生滚动监听tabs亮显

1、htmltabs对应监听模块<div class="scroll-item" ref="content2">1</div><div class="scroll-item" ref="content2">2</div><div class="scroll-item" ref="content2">3</div><div class="scroll-item" ref="content2">4</d

原创 vue-count-to数字动效自增长

可以设置动画时间、数字分隔符、数字小数点、数字起始值的轻量vue数字插件，demo如下：http://panjiachen.github.io/countTo/demo/1、安装依赖npm install vue-count-to2、使用<template> <countTo ref="myNum" :startVal="startVal" :endVal="endVal" :duration="3000"></countTo></t.

原创 css美化滚动条hover显示

.story-scroll{ height: 298px; overflow: auto; position: relative; &::-webkit-scrollbar { width: 8px; background-color: none; } &:hover ::-webkit-scrollbar-track-piece { background-color: #eee; .

原创 vue 锚点双向滚动监听

<template> <div class="container"> <div class="wrapper"> <div class="section" style="height:385px;width:100%" v-for="(item, index) in list" :key="index" > <div style="width:100%;height:100%;font-size:30px;text-align:ce.

原创 vue 滚动条平滑滚动到某个位置

window.scrollTo({ //滚动到元素位置 //top: this.$refs[元素].offsetTop,//offsetTop 相对于offsetparent 定位,当有定位时，不准确。 top: this.$refs[元素].getBoundingClientRect().top + window.scrollY,//推荐使用，getBoundingClientRect 相对于当前视口的位置 //top: 400//滚动到指定距离 //top: 0.

转载 超宽屏幕比例_显示器屏幕比例与分辨率对照表

显示器屏幕比例与分辨率对照表：5:3 标屏 对应分辨率有(1280×768 ...)5:4 标屏 对应分辨率有(800×640、1280×1024 ...)4:3 标屏 对应分辨率有(800×600、1024×768、1280×960、1400×1050、1600×1200、2048×1536 ...)16:9 宽屏 对应分辨率有(1280×720、1440×810、1680×945、1920×1080、2560×1440、3840×2160 ...)16:10 宽屏 对应分辨率有(12

原创 vue分页组件

/** * 分页组件 */<template> <div class="pagination"> <ul class="pager clear" @click="onPage"> <li :class="{ disabled: page <= 1 }" :aria-disabled="page <=

原创 VUE封装radio组件

1、radio子组件<template> <div class="radio-group"> <div v-for="(item, index) in options" :key="index" class="radio-link"> <div class="radio-list"> <div class="radio-area">

原创 web页面滚动动画效果（性能方面）

一、元素是否在视窗内的判断1、第一种方案——传统计算function isInViewPort(element) { const viewWidth = window.innerWidth || document.documentElement.clientWidth; const viewHeight = window.innerHeight || document.documentElement.clientHeight; const { top, right,

原创 vite安装postcss-pxtorem+amfe-flexible进行移动端自适应

一、安装依赖走起npm install postcss-pxtorem --save-devnpm install amfe-flexible --save-dev安装成功 ，我的相关版本是"amfe-flexible": "^2.2.1", "postcss-pxtorem": "^6.0.0",二、配置在mian.js中 引入amfe-flexibleimport 'amfe-flexible'在vite.config.js中配置postcss-pxtorem..

原创 关于vue3整理

1、vue3使用thisvue3提供了getCurrentInstance ，通过这个属性，找到全局属性globalPropertiesimport { getCurrentInstance } from 'vue'const instance = getCurrentInstance()const parent = instance.appContext.config.globalProperties

转载 30 个案例教你用纯 CSS 实现常见的几何图形

本文会介绍一些常见几何图形的 CSS 绘制方案，思路参考自 The shapes of CSS 一文以及网上的其它文章，部分地方会做适当的修改和补充。1. 三角形传统 border 实现我们知道，如果设置一个盒子的宽高为 0，盒子就会变成一个点。此时再给上下左右四个 border 一定的宽度和不同的颜色，那么单纯由 border 填充的盒子看起来是这样的：但内容盒有宽高的时候，四个 border 的对接处就不是一个点，而是一个矩形（图中白色区域），这时候的border ...

转载 常用js小技巧

1、数组去重constnumbers=[1, 2,3,4,4,1]console.log([...newSet(numbers)])//[1, 2,3,4]复制代码2、从数组中过滤所有虚值constmyArray=[1,undefined,null,2, NaN,true,false, 3]console.log(myArray.filter(Boolean))//[1,2, true,3]复制代码3、将字符串转换为数字con...

原创 随机生成32位带时间的数字流水号

function getMathNum() { const myDate = new Date() // 当前中国标准时间 const year = myDate.getFullYear() // 获取当前年份 支持IE和火狐浏览器. const month = myDate.getMonth() + 1 // 获取中国区月份 const day = myDate.getDate() // 获取几号 let milliseco.

原创 类似淘宝的放大镜 vue

组件页面封装<template> <div class="img-zoom" > <div class="img-box"> <div class="box" :style="minImgBoxStyle" @mouseleave="mouseLeave" @mouseenter="mouseEnter"

原创 给表格加上横向、纵向滚动条并对滚动条进行美化

<!DOCTYPE html><html lang="en"><head> <style> .table-10 { width: 300px; } /* 横向滚动条 */ .table-box { white-space: nowrap; overflow-x: auto; .

原创 js数组对象合并等常用方法

一、合并数组中对象id值相同的对象function dedup (arr = []) { const mp = {} for (let obj of arr) { const { id , value} = obj if (mp[id]) { mp[id].value.push(value) } else { mp[id] = {id, value: [value]} } }

原创 使用render函数渲染html以及添加title属性

使用render函数渲染htmlbtnData: [ { key: '1', content:'停止', }, { key: '2', content: '重新执行', }],operation(trData){ const parent = this; return new Vue({ render(h) { const btnComp = h(

原创 tinymce在vue2中的用法

一、版本本文是针对vue2中使用[email protected]以及tinymce/[email protected]版本；二、使用命令[email protected]@tinymce/[email protected]三、语言包安装命令后，在 node_modules 中找到 tinymce文件夹，然后将tinymce目录拷贝到static目录下（可以根据自己需求复制对应的文件夹，但是skins是必需的）tinymce 默...

原创 密码框自动填充浏览器保存密码解决

autocomplete="new-password"在input 加上这个设置，但是这个方法只能解决不自动填充的问题，输入框点击输入时文本框底部会出现对应浏览器缓存密码；

原创 数组合并到对象数组

var selectedArr = ["张三", "马六",'麻醉'];var obj = [ {value: '张三',selected:false }, {value: '李四',selected:false}, {value: '马六',selected:false}, {value: '王子',selected:false}, {value: '哈哈',selected:false}];//将数组转换成对象数组let seleclObj = [];for (let i.

原创 vue恢复默认值

原创 Object.assign()合并对象

//花括号{ }叫目标对象，后面的obj、obj1是源对象。对象合并是指：将源对象里面的属性添加到目标对象中去，若两者的属性名有冲突，后面的将会覆盖前面的let obj = {name:'廖文定',sex:'女',age:0};let obj1 = {name:'曹洋',phone: '15587551234'};let params = Object.assign({},obj,obj1);console.log(params,'合并')...

转载 px、em、rem、%、vw、vh、vm这些单位的区别

1.背景介绍我们为什么要选择合适的网页设计单位随着Web的发展，对新的解决方案的需求也会继续增大，对网页的要求更高。网页设计单位是涉及到我们布局的效果，使用不同的单位会对最终的demo，会有影响。现在都是要求响应式设计，需要适配各种设备，电脑，手机，平板。如果单位不合适，可能在这个设备显示良好，那个设备就会打乱布局。所以需要我们选择合适的单位来进行开发，设计。2.知识剖析1、pxpx就是pixel的缩写，意为像素。px就是设备或者图片最小的一个点，比如常常听到的电脑像素是1024x768的，

原创 解决ios以及mac yyyy-MM-dd HH:mm:ss格式不兼容

这种时间格式yyyy-MM-dd HH:mm:ss，发现在iOS中不兼容，返回valid Date。IOS中不支持 - 连接日期以下代码转换：// 解决ios中2020-10-12 09:32:07格式不识别的问题var beginTime = this.parserDate(editObj.beginTime);var endTime = this.parserDate(editObj.endTime); ...

转载 域名获取

域名：location.origin主要常用的代码：主机、域名：location.host锚点：location.hash域名：location.origin请求路径：location.pathname端口：location.port协议：location.protocolurl中请求参数：location.searchjavascript中解析一个url的根域名的技巧（不这样做的话，貌似就是只能写正则表达式去...

原创 小程序跑马灯首尾无缝链接

看了很多的跑马灯都写的不太符合要求，这个跑马灯的需求是初始化从屏幕的1/2处开始，结束后第二次与上一次间隔屏幕一半的宽度，从屏幕右侧开始滑动，本文只做到初始化从屏幕的初始化从屏幕的1/2处开始，结束后第二次与上一次间隔屏幕一半的宽度，从屏幕右侧开始滑动，第三次还是从屏幕的1/2处，这个不知道怎么解决；跪求评论1.html<!-- css3跑马灯 --> <view style="position: relative;height:50rpx;">

转载 页面内容不足以铺满屏幕高度时，footer居底显示

在项目中常常会遇到这样的问题：页面主要内容不足以铺满一个屏幕的高度，footer下面就会有白块剩余。现在要实现的效果就是，在主要内容不足以铺满整个屏幕的情况下，footer居于屏幕低部显示，使得整个页面占满屏幕。而当主要内容高度大于整个屏幕高度的时候，footer跟随主要内容进行显示；方法一：<div class="page"> 主要页面</div><footer>底部</footer>html,body{ hei...

原创 比较一个数组中是否有相同的值 js

// 提交校验版本号 let pathArr = this.editObj.otherCdnFilePath.concat(); pathArr.push(this.editObj.rateCdnFilePath); pathArr.push(this.editObj.healthCdnFilePath); ...

原创 正则校验部分记录（包含强弱密码校验连续数字、字母、关键字、键盘相邻码等）

/^[1-9]\d*$/ //正整数大于0/^(0|[1-9]{0,10})\.[0-9]{2}$/ //必须保留两位小数，小数点前面控制10位/^0\d{2,3}-\d{7,8}|\d{5,8}|((\+86)|(86))?(13|14|15|16|17|18|19)\d{9}$/ //例如0755-（号码）、（+86）或者不需要区号 /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{...