自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(108)
  • 问答 (1)
  • 收藏
  • 关注

原创 前端面试题整合

如果不存在则会创建对应会话信息,生成对应session,并将对应sessionid返回给客户端,客户端接受到这个sessionid,把它存贮起来,下一次发送请求的时候,附带把这个session一起发送给服务端,服务端只要根据这个sessionid就知道是谁,而这个sessionid就是这次会话生命周期的凭证,服务端可以设置session过期时间,一但客户端丢失sessionid或者是服务端设置了失效时间,那这次会话结束。执行遗弃时,需要根据影响的范围而指定不同的参数,可以指定是否复原索引或工作树内容。

2024-08-08 16:36:05 1060 2

原创 html2canvas把网页生成图片

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

2024-03-21 16:26:41 537

原创 Vue 自定义指令:ClickOutside(点击当前区域之外的位置)

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

2024-03-21 15:38:06 1480

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

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

2024-02-28 16:03:58 998

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

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

2023-11-28 15:34:26 352

原创 前端常用utils.js

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

2023-09-12 14:42:14 200

原创 记一个有意思的写法

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

2023-08-02 16:46:59 202

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

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

2023-08-02 11:09:34 2028

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

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

2023-07-26 15:48:31 341

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

我使用的swiper版本: 7.3.1。

2022-08-03 17:12:29 904 1

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

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

2022-07-06 11:05:52 1069

原创 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

2022-05-27 15:42:36 468

原创 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.

2022-05-19 16:23:17 943

原创 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; .

2022-04-28 16:04:17 1497

原创 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.

2022-04-27 15:36:45 587

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

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

2022-04-27 10:44:54 1931 2

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

显示器屏幕比例与分辨率对照表: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

2022-04-19 16:25:37 22113

原创 vue分页组件

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

2022-04-13 16:52:04 4924 4

原创 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">

2022-03-30 16:31:59 1771

原创 web页面滚动动画效果(性能方面)

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

2022-03-02 15:19:02 1570

原创 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..

2021-12-11 15:24:57 1994

原创 关于vue3整理

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

2021-12-07 15:02:37 392

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

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

2021-11-30 16:00:47 1350

转载 常用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...

2021-11-19 11:09:10 173

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

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

2021-09-16 17:41:03 692

原创 类似淘宝的放大镜 vue

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

2021-09-01 17:41:03 120

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

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

2021-07-28 15:26:52 744

原创 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]} } }

2021-07-10 15:56:59 945 1

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

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

2021-03-19 14:46:41 3040

原创 tinymce在vue2中的用法

一、版本本文是针对vue2中使用tinymce@5.1.0-S以及tinymce/tinymce-vue@3.0.1版本;二、使用命令npminstalltinymce@5.1.0-Snpminstall@tinymce/tinymce-vue@3.0.1-S三、语言包安装命令后,在 node_modules 中找到 tinymce文件夹,然后将tinymce目录拷贝到static目录下(可以根据自己需求复制对应的文件夹,但是skins是必需的)tinymce 默...

2021-03-09 17:07:53 10513 2

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

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

2020-12-09 16:40:50 555

原创 数组合并到对象数组

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

2020-12-09 10:00:10 302

原创 vue恢复默认值

2020-11-27 15:00:42 1373

原创 Object.assign()合并对象

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

2020-11-03 10:15:26 685

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

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

2020-10-29 10:35:52 311

原创 解决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); ...

2020-10-27 10:53:28 1024

转载 域名获取

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

2020-10-23 17:19:18 2328

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

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

2020-10-22 17:25:46 909

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

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

2020-09-21 15:16:51 542

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

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

2020-09-09 14:21:05 1755

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除