笔记
small_redhat
这个作者很懒,什么都没留下…
展开
-
解决 SyntaxError: Unexpected token ‘.‘ 报错问题
解决 SyntaxError: Unexpected token '.' 报错问题原创 2024-05-07 17:08:10 · 372 阅读 · 0 评论 -
js前端截图,dom元素截图
js前端截图方法封装原创 2023-03-20 17:49:44 · 1005 阅读 · 2 评论 -
文字超出部分省略号显示
文字超出省略号显示原创 2022-12-27 14:07:45 · 109 阅读 · 0 评论 -
lib-flexible 移动端适配
移动端适配lib-flexible postcss-pxtorem原创 2022-11-07 10:38:45 · 320 阅读 · 0 评论 -
给不规则背景图片加阴影
给不规则背景图片加阴影原创 2022-10-08 15:58:56 · 168 阅读 · 0 评论 -
Vue slot插槽 多层组件传递
多层组件传递slot。原创 2022-09-23 16:22:08 · 1435 阅读 · 0 评论 -
使用sortable的踩坑记录
1、如果你的排序是调用了接口,然后刷新列表来更新排序的,那么要注意:如果排序接口发送后排序发生混乱,那很有可能是传给sortable的排序元素没有给key,如果是列表(el-table),注意列表要设置:row-key,如果是一般的元素,要给元素添加上key属性或者id属性2、如果想要移动中断,移动时有判断条件,不符合判断条件的就阻止移动,那么可以 onMove事件中做这件事onMove(evt) { // 不符合判断条件,立即还原交换 if (原创 2022-04-06 10:31:28 · 1054 阅读 · 1 评论 -
JSzip 前端处理下载打包文件夹
// 将文件夹里的文件作为数组传进来 filesToRar(files) { this.fileCount = files.length this.zippedFileCount = 0 let zip = new JSZip(); this.zipDir(zip, files, zip); }, // 循环下载数组中的每个文件 zipDir(zip, files, packageZip) { for (l...原创 2022-02-24 16:33:02 · 851 阅读 · 0 评论 -
读取剪切板截图
public async getClipboardContents() { try { const clipboardItems = await (navigator as any).clipboard.read(); if (clipboardItems[0].types[0].indexOf('image') > -1) { const b = await clipbo.原创 2021-12-13 13:49:45 · 643 阅读 · 0 评论 -
element Drawer 中嵌套路由,页面刷新导致路由跳转错乱问题
问题背景: 我的项目是类似后台管理项目,本身已经有二级路由了,但是产品提出需求,要在某个菜单页中增加一个弹框,以侧滑屏形式出现,并且弹框中也要有路由的切换,于是我选择了用element来实现这个需求问题:我在父组件的drawer中又增加了一层路由在父组件中有个按钮,点击按钮,显示drawer并且跳到指定的路由问题出现,本应该跳转到‘editCourse’组件,但是页面却没有跳转!而是去了我默认打开drawer的路由地址查出问题:是因为drawer这个组件本身带有一个动画,在打开...原创 2021-11-09 11:25:25 · 827 阅读 · 0 评论 -
图片转svg并动态修改其颜色
假设你的SVG已封装好,在页面中可以使用,如:今天我们不讲如何封装的,只关心SVG文件1、将UI老师给的图转成SVG转换地址:https://convertio.co/zh/png-svg/转换之后是这样的<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD原创 2021-09-27 16:44:15 · 633 阅读 · 0 评论 -
Vue-admin-element 多层路由嵌套,子路由跳转不刷新页面增加tag签
使用 Vue-admin-element 作为基础框架,遇见一个需求,要把多个页面都放在某个页面的弹窗中,并且这些页面之间可以实现自己的路由跳转,不刷新父组件1、按照Vue文档,在router.js中写好子路由(参考路由嵌套) { // 在需要添加子路由的页面添加上children path: 'localCourse', component: () => import('@/views/course/local/localCourse'),原创 2021-08-18 16:49:17 · 1823 阅读 · 0 评论 -
小程序打开H5视频,横屏转竖屏失败
小程序打开H5视频后,iOS横屏之后,再转成竖屏时,发现页面转不回来了,页面宽度还是横屏的宽度,但是在浏览器打开H5转换却是没有问题的解决办法:小程序中在webview所在页的json文件中设置如下代码:...原创 2021-08-04 18:09:09 · 362 阅读 · 0 评论 -
H5和小程序实时传递数据
一开始就定下用 wx.postMessage 这个API ,但是用着发现这个API不是实时的,他是一个队列,H5当时会把消息发过去,但是小程序并不是实时接收的,小程序只有在,分享,销毁,回退时才会触发接收函数解决方案:在发送消息之后立即调用wx.miniProgram.redirectTo () 这个方法,这个方法会让页面停留在当前的小程序页面,wx.miniProgram.navigateBack 这个方法也会触发接收函数,但是会让页面返回上一级页面wx.miniProgram.naviga原创 2021-07-19 11:33:03 · 547 阅读 · 0 评论 -
img src获取图片资源报403
img src获取图片资源报403在HTML文件中,添加这一行代码 (放在heade标签下)<meta name="referrer" content="no-referrer" />原创 2021-07-19 11:13:10 · 127 阅读 · 0 评论 -
loading PostCSS config: Invalid PostCSS Plugin found: [3]
vue +postcss-pxtorem安装好postcss-pxtorem 之后也出现了.postcssrc.js 文件,但是文件中只有三个参数module.exports = { "plugins": { "postcss-import": {}, "postcss-url": {}, // to edit target browsers: use "browserslist" field in package.json 'autoprefixer': ..原创 2021-07-02 09:42:53 · 3234 阅读 · 3 评论 -
帧动画,使用base64
最近在项目中要做一个帧动画(通过快速更换背景图片,达到动画的效果)一开始是这样写的// 生成帧动画// 用背景图片的方式播放所以,1:要有宽高,2:元素内最好没有有东西,否则会遮住背景export const createAnimation = (imglist, name) => { const dt = document.getElementById('dt') // dt是事先在index页面写好的一个style标签 const X = 100 / (imglist.len原创 2021-06-30 17:37:35 · 154 阅读 · 0 评论 -
fabric 画板,绘制几何图形复杂图形
一、安装npm install fabric二、引入创建import { fabric } from 'fabric'initCanvas () { // 初始化一张画布 this.fabricObj = new fabric.Canvas('canvas', { isDrawingMode: true, selectable: false, selection: false, devicePixel原创 2021-06-01 16:03:50 · 1243 阅读 · 0 评论 -
Vue 中播放帧动画(抽离方法)
主要是利用背景图片的更换,达到播放的效果因为在js中修改@key-frame比较困难,所有这里利用了动态写style文件的方式,动态的将我们所需要的@keyframes写入在这个style文件中,然后再在需要用到动画的地方直接写动画名称就行1,在输出的index.html文件中创建一个style生成动画的方法 (两个参数,一个是图片的路径列表,一个是动画的名称)图片的路径可以用绝对路径也可以用相对路径,用相对路径时需要注意,是相对index.html文件的路径// 生成帧动画// 用背景图片的原创 2021-04-19 10:21:02 · 1698 阅读 · 0 评论 -
数组按照姓名的首字母排序
let array = ['周芷若', '张无忌', '林诗音', '李寻欢', '阿奴']array.sort((a, b) => { return a.localeCompare(b,'zh') // 'zh' 指定语言})如果不写第二个参数,会按照默认的语言顺序排,对于中文来说有时候会不正确打印结果...原创 2021-03-31 15:11:18 · 534 阅读 · 0 评论 -
js中return一个函数体,会自动调用函数的toString方法
了解柯里化时,发现函数中有这么一段经过试验发现:function add() { // 第一次执行时,定义一个数组专门用来存储所有的参数 var _args = Array.prototype.slice.call(arguments); console.log(_args) // 在内部声明一个函数,利用闭包的特性保存_args并收集所有的参数值 var _adder = function() { _args.push(...argument原创 2021-03-17 14:53:26 · 703 阅读 · 1 评论 -
git切换仓库地址
git remote set-url origin + 新地址原创 2021-03-04 13:59:29 · 73 阅读 · 1 评论 -
electron hello-world,从安装到打包
最近和c++老师合作了一个桌面应用,了解到了electron,记录一下如何快速做hello world1,先下载安装electronnpm install electron2,git下载官方提供的快速入门demogit clone https://github.com/electron/electron-quick-startcd electron-quick-startnpm installnpm start打开之后就能看到客户端了,这里我们不写代码逻辑,官方提供的就是一个hell原创 2021-02-04 18:48:21 · 274 阅读 · 0 评论 -
echarts 地图的tooltip样式第一次hover显示城市的纬度
最近用echarts做数据展示时,出现了地图上的点,鼠标hover上去的时候,不是显示我动态设置的样式,而是第一次只显示点的纬度,像这样:并且它只是第一次hover的时候这样,第二次的时候,就显示我动态设置的样式了研究了半天才发现,原因是这样的:在echarts 初始化(init)地图的时候,它会根据你的配置,去画canvas,tooltip(别的图表我没测)如果没有设置的话,就会默认显示点的纬度。所以第一次hover出现的就是init时画好的tooltip。第二次hover的时候,因为我是动原创 2021-01-19 15:57:22 · 862 阅读 · 0 评论 -
vue3 知识点笔记
vue3 笔记1,setup1, setup 中没有this2, 这个函数会在befCreate之前调用3, 要想使用里面的属性,需要return2,router 和store分别对应 useStore和useRouter来使用 const store = useStore(); const router = useRouter();打印结果:...原创 2020-12-30 16:57:29 · 70 阅读 · 0 评论 -
记录async/await的使用
async/await的使用本篇记录async/await使用中遇见的问题这样写是错误的,因为async和await是成对出现的,这里async的位置是错误的,他应该在res的前面这样才是正确的其次,我写完await之后一直不生效,打印的顺序还是乱的,await没有等成功,查看一番发现:await后面要等的是promise对象。只有他等的是promise对象,,它才会阻塞后面的代码,等着 Promise 对象 resolve,然后得到 resolve 的值,作为 await 表达式的运算结果。原创 2020-11-25 15:12:35 · 108 阅读 · 0 评论 -
vue-router切换,组件不销毁
需求:后台管理系统,切换菜单时需要一部分页面刷新,一部分不刷新(其实就是组件销毁问题)首先,我们需要在router-view标签外再包上一层标签keep-alive <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> &...原创 2020-01-14 15:32:58 · 11502 阅读 · 0 评论 -
echarts仪表盘刻度样式自定义
echarts 默认的仪表盘样式:修改后:首先,需要在页面中放入一个image<img src="./img/123.png" id="linear-pic" style="display:none"/>需要修改一下配置:先把原本的背景颜色变成透明: axisLine: { lineStyle: { ...原创 2020-01-09 13:29:19 · 9562 阅读 · 0 评论