small_redhat-CSDN博客

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

2022-04-06 10:31:28 1072 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 852

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

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

2022-01-05 11:31:46 6361

原创读取剪切板截图

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 647

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

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

2021-11-09 11:25:25 832

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

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

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

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

2021-08-04 18:09:09 373

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

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

2021-07-19 11:33:03 551

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

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

2021-07-19 11:13:10 130

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

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

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

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

2021-04-19 10:21:02 1703

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

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

2021-03-31 15:11:18 537

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

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

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

2021-01-19 15:57:22 872

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

原创搭建Vue3项目

vue3 初使用使用vue-cli3以上手脚架搭建项目如果你目前的vue-cli版本是2.XX可以先卸载npm uninstall vue-cli -g 或 yarn global remove vue-cli再安装：npm install -g @vue/cli 或 yarn global add @vue/cli验证：vue --version安装之后看一下package.json 文件，如果Vue版本不是3以上，使用：npm install vue@next更新Vue文件之后我这报

2020-12-30 16:56:18 45

原创 echarts饼图label文字在labelline上方

先上最终效果图主要配置： option = { tooltip: { trigger: "item", formatter: "{a} <br/>{b}: {c} ({d}%)", }, legend: { orient: 'vertical', bottom: 10, left:10, data: ['SAT', '托福', '雅思']

2020-12-17 11:27:51 9467 4

原创 Vue编写抽象组件

今天学习Vue源码时，看到抽象组件，以前用过，但是不知道叫抽象组件在Vue中，像<keep-alive>, <transition>,<slot>这些都是内置的抽象组件，抽象组件和普通的组件类似，只是他们添加额外的行为，不向DOM呈现任何内容。有点像react中的高阶组件当然我们也可以实现自己的抽象组件首先实现抽象组件，不用设置template，否则Vue会优先渲染tempplate里面的东西，就不能额外添加行为了实现自己的<debounce>抽象组件

2020-12-16 14:45:47 1358

原创 Vue使用less报错：loaderContext.getResolve is not a function

Vue中使用less 如果不指定版本直接安装会报错npm install less less-loader --save-dev所以，请指定版本npm install less@3.9.0 less-loader@4.1.0 --save-dev不要忘了在webpack配置好 { test: /\.less$/, loader: "style-loader!css-loader!less-loader" }最后重新构建，搞定！.

2020-12-15 11:45:13 81

原创 js实现web汉字笔画教学

主要技术：hanzi-writer以Vue为示例 <template> <div class="hello"> <button @click="begin">开始</button> <button @click="animateBtn">开启动画</button> <button @click="loop">重复动画</button> <button @click="

2020-12-03 17:11:06 1186

空空如也

空空如也