small_redhat-优快云博客

1、如果你的排序是调用了接口，然后刷新列表来更新排序的，那么要注意：如果排序接口发送后排序发生混乱，那很有可能是传给sortable的排序元素没有给key，如果是列表（el-table），注意列表要设置:row-key，如果是一般的元素，要给元素添加上key属性或者id属性2、如果想要移动中断，移动时有判断条件，不符合判断条件的就阻止移动，那么可以 onMove事件中做这件事onMove(evt) { // 不符合判断条件，立即还原交换 if (

2022-04-06 10:31:28 1300 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 928

原创 sortable 拖拽排序，获取排序后的数据

问题：使用sortable排序时，页面元素虽然重新排序了，但是真实的数组数据并没有排序，还是原来的顺序，但是如果排序时同时修改数组，会造成排序的昏乱解决：主要思路：将数组的里的每条数据的id 赋给table元素的class上，这样获取排序后的元素，就能拿到由数组id组成的新数组，并且还是页面上排序后的顺序，然后再根据id的排序将原数组排序，得到排序后的新数组1、 sortable 排序之后可以获取到最新的排序的元素 evt.to.rows2、table一定要加上 row-key !

2022-01-05 11:31:46 7059

原创读取剪切板截图

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 725

原创 element Drawer 中嵌套路由，页面刷新导致路由跳转错乱问题

问题背景：我的项目是类似后台管理项目，本身已经有二级路由了，但是产品提出需求，要在某个菜单页中增加一个弹框，以侧滑屏形式出现，并且弹框中也要有路由的切换，于是我选择了用element来实现这个需求问题：我在父组件的drawer中又增加了一层路由在父组件中有个按钮，点击按钮，显示drawer并且跳到指定的路由问题出现，本应该跳转到‘editCourse’组件，但是页面却没有跳转！而是去了我默认打开drawer的路由地址查出问题：是因为drawer这个组件本身带有一个动画，在打开...

2021-11-09 11:25:25 941

原创图片转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 841

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

原创小程序打开H5视频，横屏转竖屏失败

小程序打开H5视频后，iOS横屏之后，再转成竖屏时，发现页面转不回来了，页面宽度还是横屏的宽度，但是在浏览器打开H5转换却是没有问题的解决办法：小程序中在webview所在页的json文件中设置如下代码：...

2021-08-04 18:09:09 466

原创 H5和小程序实时传递数据

一开始就定下用 wx.postMessage 这个API ，但是用着发现这个API不是实时的，他是一个队列，H5当时会把消息发过去，但是小程序并不是实时接收的，小程序只有在，分享，销毁，回退时才会触发接收函数解决方案：在发送消息之后立即调用wx.miniProgram.redirectTo () 这个方法，这个方法会让页面停留在当前的小程序页面，wx.miniProgram.navigateBack 这个方法也会触发接收函数，但是会让页面返回上一级页面wx.miniProgram.naviga

2021-07-19 11:33:03 654

原创 img src获取图片资源报403

img src获取图片资源报403在HTML文件中，添加这一行代码（放在heade标签下）<meta name="referrer" content="no-referrer" />

2021-07-19 11:13:10 191

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

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

原创 Vue 中播放帧动画（抽离方法）

主要是利用背景图片的更换，达到播放的效果因为在js中修改@key-frame比较困难，所有这里利用了动态写style文件的方式，动态的将我们所需要的@keyframes写入在这个style文件中，然后再在需要用到动画的地方直接写动画名称就行1，在输出的index.html文件中创建一个style生成动画的方法（两个参数，一个是图片的路径列表，一个是动画的名称）图片的路径可以用绝对路径也可以用相对路径，用相对路径时需要注意，是相对index.html文件的路径// 生成帧动画// 用背景图片的

2021-04-19 10:21:02 1812

原创数组按照姓名的首字母排序

let array = ['周芷若', '张无忌', '林诗音', '李寻欢', '阿奴']array.sort((a, b) => { return a.localeCompare(b,'zh') // 'zh' 指定语言})如果不写第二个参数，会按照默认的语言顺序排，对于中文来说有时候会不正确打印结果...

2021-03-31 15:11:18 580

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

原创 git切换仓库地址

git remote set-url origin + 新地址

2021-03-04 13:59:29 106 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 340

原创 echarts 地图的tooltip样式第一次hover显示城市的纬度

最近用echarts做数据展示时，出现了地图上的点，鼠标hover上去的时候，不是显示我动态设置的样式，而是第一次只显示点的纬度，像这样：并且它只是第一次hover的时候这样，第二次的时候，就显示我动态设置的样式了研究了半天才发现，原因是这样的：在echarts 初始化（init）地图的时候，它会根据你的配置，去画canvas，tooltip（别的图表我没测）如果没有设置的话，就会默认显示点的纬度。所以第一次hover出现的就是init时画好的tooltip。第二次hover的时候，因为我是动

2021-01-19 15:57:22 949

原创 echarts tooltip在鼠标悬停一段时间后显示

中国地图上的气泡图，限制只有鼠标悬停在某个气泡上一段时间后再去查询后台，减少请求次数。整个方法： initChinaMap() { var geoCoordMap = { 海门: [121.15, 31.89], 鄂尔多斯: [109.781327, 39.608266], 招远: [120.38, 37.35], 舟山: [122.207216, 29.985295], 齐齐哈尔: [123.97, 47.33

2021-01-07 15:14:26 1313 1

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

空空如也

空空如也