![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 58
陌上烟雨寒
这个作者很懒,什么都没留下…
展开
-
粘贴图片上传,显示剪切板中的图片
存储图片的数据结构可根据实际需求来创建。原创 2024-05-15 11:38:51 · 189 阅读 · 0 评论 -
解决合并冲突的问题
Git: pull时提示Please commit your changes or stash them before you merge.对本地的代码进行修改后,直接git pull会提示本地代码和github代码冲突,需要先commit本地代码,或者stash他们。这样操作的效果是在最新的仓库代码的基础仍保留本地的改动。git stash pop: 将刚藏起来的改动恢复。git pull:用新代码覆盖本地代码。git stash: 将改动藏起来。原创 2023-03-13 16:49:47 · 280 阅读 · 0 评论 -
nvm安装 疑难问题解决
nvm安装避坑指南原创 2023-01-13 14:27:26 · 1156 阅读 · 1 评论 -
前端如何处理后端一次性传来的10w条数据
懒加载 实现数据量较多时的列表展示原创 2022-06-21 11:18:24 · 6210 阅读 · 13 评论 -
vue3 Vuex数据持久化存储
import { createStore, createLogger } from 'vuex'import { user } from './modules/user'import { system } from './modules/system'import createPersistedState from 'vuex-persistedstate';import ls from '@/utils/local-storage';const debug = process.env.NODE原创 2022-06-20 08:49:29 · 1503 阅读 · 0 评论 -
安装craco报错 antd react 修改全局主题
antd react 修改全局主题安装craco报错npm i @craco\craco@7.0.0-alpha.3官网的命令是npm install @craco/craco,这样会导致craco版本不够新,也就是运行报错的关键,所以使用我这边的命令,安装最新版本的craco/* package.json */"scripts": {- "start": "react-scripts start",- "build": "react-scripts build",- "t原创 2022-06-20 08:42:16 · 1701 阅读 · 1 评论 -
判断当前用户是否正在与页面交互
Page Visibility API不知道用户是不是正在与页面交互,这是困扰广大 Web 开发人员的一个主要问题。如果页面最小化了或者隐藏在了其他标签页后面,那么有些功能是可以停下来的,比如轮询服务器或者某些动画效果。Page Visibility API(页面可见性 API)就是为了让开发人员知道页面是否对用户可见而推出的。document.hidden:表示页面是否隐藏的布尔值。页面隐藏包括页面在后台标签页中或者浏览器最小化。document.visibilityState:表示下列 4原创 2022-06-20 08:40:40 · 554 阅读 · 0 评论 -
vue中printjs使用指南
使用攻略参考文档https://printjs.crabbly.com/分页使用css的 page-break-after:always 来控制在某个DIV之后新开一个页面<div style="page-break-after:always">我是封面</div><div style="page-break-after:always">我是目录,你不知道我的内容有多长</div><div>我是正文,我需要从一个新页面开始展示&l原创 2022-04-26 13:09:35 · 8381 阅读 · 0 评论 -
react学习记录
react简介1、 react是什么用于构建用户界面的javascript库是一个将数据渲染为HTML视图的开源javascript库2、 谁开发的facebook jordon walke创建3、react的特点采用组件化的模式、声明式编码,提高开发效率及组件复用率在react native中可以使用react语法进行移动端来发使用虚拟dom+有效的Diffing算法,尽量减少与真实DOM的交互react入门reacr的基本使用相关js库react.js react核心库re原创 2022-05-23 10:29:06 · 278 阅读 · 0 评论 -
vue3.0学习-自用
1. Vue3.0六大亮点特性解析Performance性能比Vue 2.x快1.2~2倍Tree shaking support按需编译,体积比Vue2.x更小, Composition API:组合API(类似React Hooks)Better TypeScript support更好的 Ts支持Custom Renderer API暴露了自定义渲染APIFragment,Teleport (Protal),Suspense更先进的组件注:原创 2021-06-23 11:03:43 · 2090 阅读 · 1 评论 -
node学习(自用)
2 fs文件系统模块const fs = require('fs')2.1 读取文件中的指定内容fs.readFile() 语法格式fs.readFile(path[,options],callback)path:路径options:编码格式callback:读完文件后拿到的结果const fs = require('fs')fs.readFile('./files/11.txt', 'utf8', function (err, dataStr) { if (err) {原创 2022-04-08 15:37:45 · 1290 阅读 · 0 评论 -
尚硅谷webpack学习笔记
npm init全局安装webpack和局部安装这里注意webpack版本这些资源都需要下载webpack.config.jscss提取样式文件这里需要注意webpack的版本安装css兼容性处理安装兼容性处理:帮找到中里面的配置,通过配置加载指定的css兼容性样式css压缩安装使用js语法检查https://www.npmjs.com/package/eslint-config-airbnb-base忽略一些语法检查js兼容原创 2022-06-20 09:04:00 · 650 阅读 · 0 评论 -
typeScript学习自用
typescript简介以JavaScript为基础构建的语言可以在任何支持JavaScript的平台中执行一个JavaScript的超集TypeScript扩展了JavaScript,并添加了类型TS不能被JS解析器直接执行typeScript增加了支持ES的新特性类型添加ES不具备的新特性丰富的配置选项强大的开发工具...原创 2021-06-21 14:25:10 · 174 阅读 · 1 评论 -
tinymce如何设置不可编辑但可以打印
初始配置参考https://blog.csdn.net/weixin_47180815/article/details/121748486在init配置中添加keydown和keydown事件,给编辑器的内容重新赋值来达到无法输入的效果。这里的props.otherInfo入参可以拷贝一份v-modal的值(注意需要深拷贝)在打开编辑器的时候设置leafDetail.otherInfo = leafDetail.content;有其他比较好的方法可以在评论区讨论哦...原创 2022-03-14 15:16:51 · 2365 阅读 · 0 评论 -
解决a-table打印时单元格中的内容不换行的问题
解决a-table打印时单元格中的内容不换行的问题绞尽脑汁,尝试了多种方法后终于发现了怎样解决.table .ant-table-tbody > tr > td { padding: 2px !important; white-space: pre-wrap; }最重要的是white-space: pre-wrap;white-space 属性设置如何处理元素内的空白。这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wr原创 2022-02-18 10:00:45 · 1075 阅读 · 0 评论 -
vue3 中使用tinymce
详细配置,请参考tinymce中文文档1. 安装相关依赖npm install tinymce -Snpm install @tinymce/tinymce-vue -S2. 汉化编辑器前往此地址下载中文汉化包:https://www.tiny.cloud/get-tiny/language-packages/3. 引入皮肤和汉化包在项目public文件夹下新建tinymce文件夹,将下载的汉化包解压到此文件夹然后在node_modules/tinymce中找到skins文件夹,也原创 2021-12-06 15:53:34 · 14689 阅读 · 12 评论 -
vue中表格或者内容区域高度自适应
vue中表格或者内容区域高度自适应其实这也算是一个令人头疼的问题吧,我们需要固定某个区域的高度,并且在网页resize的时候变化。例如我们在页面中放入一个table,这种固定表头的table需要我们自己给一个高度,问题1: 这个高度不是也要算出来的吗?问题2: 这个高度不是也要随着页面的大小自己去适应吗?于是乎,就借鉴了我们公司一位大牛的思路,写个组件吧,搞个插槽把表格插在中间,高度自己计算就行。组件名称我就称之为PageWrap重要: PageWrap组件使用高度使用了height:10原创 2021-11-16 13:18:05 · 5811 阅读 · 0 评论 -
函数的防抖节流
防抖节流:限制函数执行次数防抖:通过SetTimeout的方式,在一定的时间间隔内,将多次触发变成一次触发。节流:减少一段时间的触发频率防抖:场景:在用户提交表单时,为了避免用户在短时间内多次点击提交按钮<input type="text"> <button id="btn">提交</button> var btn = document.getElementById("btn"); btn.addEventListener("click",原创 2021-06-11 10:33:10 · 111 阅读 · 1 评论 -
一个通用的网页布局,模仿Lodash 中文文档样式
不知道怎么突然看到这个网站就觉得它的布局很神奇,因为自己之前想要做一个这样的布局,废了九牛二虎之力才实现并且代码比较繁琐,所以好好学习借鉴了一下现在来介绍一下整个布局好的效果首先看到的效果是这样的,分为头部和中间,中间的部分随着窗口大小而自适应高度。左侧的菜单可以滚动,右边是文章,可以滚动浏览文章滚动到底部时可以看到footer第一步:上中下布局通过flex实现改变主轴方向,设置中间部分 flex:1 0 auto;给头部添加粘性布局,并设置一个高度60px第二部:中间部分使用fl原创 2021-05-08 10:10:53 · 167 阅读 · 1 评论 -
vue 引入高德地图 路线规划
由于vue-amap不支持路线规划,因此不予采纳。在index.html的header中引入<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=e72a9f0cac3b081df05259299454cf1a"></script> <!--引入UI组件库(1.0版本) --><script type="text/javascript" src="ht原创 2021-04-19 16:34:47 · 5230 阅读 · 7 评论 -
vue sass全局变量
为了避免在每一个需要引入变量的组件中import全局的文件我们使用sass-resources-loadercnpm i sass-resources-loader --save-dev确认这些都已经安装了,注意安装顺序;cnpm install sass-loader@5.0.0 node-sass@4.14.1在build–>utils.js中修改将 return { css: generateLoaders(), postcss: generateLoade原创 2021-04-15 13:55:03 · 885 阅读 · 0 评论 -
sass安装问题 TypeError: this.getOptions is not a function
TypeError: this.getOptions is not a function原因:sass版本过高降低sass版本先卸载然后再安装cnpm install sass-loader@5.0.0 node-sass@4.14.1原创 2021-04-15 10:59:22 · 2430 阅读 · 0 评论 -
js轮播图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l原创 2021-04-08 15:48:50 · 89 阅读 · 0 评论 -
操作剪切板(仅限操作text)
https://clipboardjs.com/原创 2021-04-06 16:02:25 · 723 阅读 · 0 评论 -
element table右键菜单
row-contextmenu 当某一行被鼠标右键点击时会触发该事件 row, column, event重要代码 //右键点击事件 rightClick(row, column, event) { console.log(arguments); var menu = document.querySelector("#menu"); event.preventDefault(); //获取我们自定义的右键菜单 // 根据事.原创 2021-03-26 15:30:32 · 2359 阅读 · 3 评论 -
element上传图片 可预览
第一次看到element ui中的上传图片时,可能因为好看的ui惊喜了一下下但是问题出现了,这些上传大多都是自动上传,而且是一个文件一个文件上传,所以为了解决一下问题一次上传多张手动上传图片图片预览问题:limit="limit" 限制上传图片的数量list-type="picture-card" 设置上传样式:on-preview="handlePictureCardPreview" 利用该事件来获得图片信息,完成图片预览:on-change="OnChange" 在选择好文件的原创 2021-03-09 14:44:38 · 3720 阅读 · 0 评论 -
从v-key探究到vue响应式原理
从v-key探究到vue响应式原理文章目录从v-key探究到vue响应式原理总结维护状态key数组更新检测变更方法替换数组注意事项知识扩展`Object.getPrototypeOf()``Object.assign()`Object.defineProperty()vue维护状态官方文档可能有一点点的难懂,那么我们举个例子实践一下吧 ,再来看官方给出的文档 <div id="app"> <div> <input type="text" v-mod原创 2021-03-02 10:24:27 · 439 阅读 · 0 评论 -
swiper中的切换事件
swiper中的时间,请参考官方文档,这里需要注意安装的swiper的版本<HeaderTab @toParent="getNowIndex" :tabInfo="tabInfo" :index="nowIndex" ></HeaderTab> <swiper @slide-change-transition-end="handleClickSlide" class="swiper" id原创 2020-12-15 16:44:03 · 6951 阅读 · 0 评论 -
解决vue中路由改变但是页面不刷新的问题
watch: { // 监听路由变化 "$route": function (newUrl, OldUrl) { console.log("监听路由"); console.log(newUrl, OldUrl); this.init(); }, },通过watch方法监听router的改变,当路由改变时调用页面初始化的方法。官网参考:https://router.vuejs.org/zh/guide/advanced/data-fet.原创 2020-12-15 16:35:08 · 731 阅读 · 0 评论 -
GanttElastic的使用
https://blog.csdn.net/yangxiaoman123/article/details/107855727<template> <!-- <q-page class="q-pa-sm"> --> <div v-if="tasks.length > 0"> <gantt-elastic :options="options" :tasks="tasks" @tasks-change原创 2020-12-15 16:25:18 · 4932 阅读 · 18 评论 -
vue中实现element的Popper功能
<template> <div class="pop-over"> <a @click="toggleOpen" class="pop-button" href="javascript: void(0);"> {{ buttonText }}你好呀 </a> <ul v-clickoutside="close" v-show="open" class="pop-list"> <slot&g.原创 2020-12-15 16:10:28 · 2450 阅读 · 0 评论 -
vue发送剪切板中的截图
<el-input class="textarea" size="small" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入内容" v-model="comment" maxlength="1000" show-word-limit resize="none"原创 2020-12-15 16:07:26 · 376 阅读 · 0 评论 -
vue中使用axios下载excel二进制文件 出现乱码问题的解决方法
排查问题responseType: "blob",var blob = new Blob([res.data]);在main.js中是否引入了和axios有冲突的插件,我当时因为引入了mock所以这么多次都无果,一直是乱码如果还是不ok的话可以尝试修改 let blob = new Blob([res.data], {type: "application/vnd.ms-excel"}); excelDownLoiad() { var d = new Date();原创 2020-11-26 16:30:02 · 891 阅读 · 0 评论 -
v-echart中环形图中间添加文字
这里我将一个环形图做成了一个组件需要父组件传入要显示的数据 和 环形图中间的文字有时候环形图中间的文字一直没有办法显示需要注意需要将v-echarts全部引入,部分引入时会有问题,暂时不知道如何解决,就全部引入了考虑v-echart异步加载问题,在数据加载完成之后再去渲染组件,推荐使用v-if控制子组件的显示,数据加载完成之后再进行显示。<template> <div> <ve-ring :data="chartData" :原创 2020-11-20 14:16:23 · 9225 阅读 · 7 评论 -
vue-cli2、vue-cli3脚手架详细讲解
vue2.0项目介绍1、build 文件夹:webpack的一些相关配置;2、config 文件夹:项目开发环境和生产环境的一些相关配置;3、node_modules 文件夹 :这里存放的是安装包,比如webpack、第三方插件库、项目的依赖文件;4、src 文件夹:我们将要写的代码放在这里面,打包上线时会进行编译、压缩等操作。5、static 文件夹:这里存放的是一些静态文件比如图片、css文件、不需要进行压缩的js文件,打包时这个文件夹将原封不动的放到dist(打包时自动生产的文件夹)转载 2020-11-20 14:05:01 · 155 阅读 · 0 评论 -
element el-date-picker时间控制
参考链接https://blog.csdn.net/dave_hz/article/details/89183829 <el-date-picker type="date" placeholder="开始日期" v-model="ruleForm.start_time" :picker-options="pickerOptions0"原创 2020-11-20 13:57:26 · 697 阅读 · 0 评论 -
vue中vuedraggable 拖拽列表的使用 vuedraggable踩坑之路
经历了一些奇奇怪怪的问题我终于从vuedraggable的各种坑中爬出来了!!接下来我来总结一下它的使用【想看官网的这里来】vue中draggable拖拽列表的使用https://github.com/SortableJS/Vue.Draggable官方示例:https://sortablejs.github.io/Vue.Draggable/#/transition-example-2https://david-desmaisons.github.io/draggable-example/原创 2020-11-20 13:41:29 · 14073 阅读 · 6 评论 -
vue中监听窗口大小,添加自适应样式
在Vue工程中,添加样式,部分需要做到自适应,需要添加resize事件,由于是单页面应用,如果组件初始化的时候绑定事件,在切换页面的时候不去注销事件,如果来回切换,会让resize事件执行多个函数,迅速消耗CPU,浏览器会出现卡顿的情况所以在监听resize事件,需要在 mounted() 添加监听时间,然后在 destroyed() 钩子函数中将其移除mounted() { this.handleResize(); window.addEventListener("resize", t原创 2020-11-20 09:39:10 · 1087 阅读 · 3 评论 -
vant中使用iconfont的图标
在iconfont的自己的项目中 更多操作–》编辑项目编辑FontClass/Symbol 前缀默认为icon,我们将其修改为icon-然后下载之后将引入的文件重新替换修改iconfont.css文件将原来的 font-family: "iconfont" 改为 font-family: "icon"参考官网我们来写自己的图标<van-icon class="iconfont" class-prefix="icon" name="xiayibu" /..原创 2020-11-10 14:36:26 · 2292 阅读 · 1 评论 -
对element ui动态可编辑的tag进行优化,点击tag后变为input可编辑
对element ui动态可编辑的tag进行优化,点击tag后变为input可编辑https://element.eleme.io/#/zh-CN/component/tag重点1:$set的用法 修改响应数据在data中声明editable: [],通过this.$set(this.editable, index, true);来修改数组this.$set(vm.item, indexOfItem, newValue);this.set(vm.item, indexOfItem, newV..原创 2020-10-22 15:58:02 · 3705 阅读 · 1 评论