- 博客(38)
- 收藏
- 关注
RSS订阅原创 uniapp中使用原生canvas标签绘制视频帧来模拟拍照，拍照后将图绘制在另外一个canvas上编辑画图，这样反复操作
uniapp中使用原生canvas标签绘制视频帧来模拟拍照，拍照后将图绘制在另外一个canvas上编辑画图，这样反复操作会导致ios系统上白屏，canvas2d上下文为null,经查阅找到相关资料。可以提供一些启发解决思路，最终在项目中这样解决的。项目中还用了fabricjs，同样需要。
2023-08-29 10:22:13
753
原创 vue基于leader-line绘制流水线流程图
那么怎么去画出这个结构呢，想到树状结构我们很容易想到递归组件，我们可以先写出每个树节点的布局。结构和样式写好后，通过leader-line将树节点用线连接起来。steps 表示每个树节点中的步骤数。具体的api和用法请查阅官方文档。每一个框代表着一个树中的节点，
2022-11-24 16:38:34
952
转载 js沙箱机制
也就是说，激活方法中程序读取到的window对象，即为纯粹的window对象，我们需要对这个window对象附加/修改/移除，使得window对象变为当前应用使用的window对象；失活方法中程序代码中获取到的window对象，就是应用本身的window对象，我们需要对这个window对象附加/修改/移除，使得window对象变为纯粹的window对象。沙箱激活后至沙箱失活前，当前的window对象一定为当前应用使用的window（即纯粹的window对象+当前应用对window对象做出的修改）
2022-09-30 10:58:15
767
原创 Vue 大屏项目中大屏解决方案---rem
rem（font size of the root element）是指相对于根元素（html）的字体大小的单位从上面可以看出现在将html的font-size 设置为 50px,那么div1的宽度就变成1乘以50 等于 5px,根元素字体大小缩小一半，div1的宽度也同样缩小一半，根据这个特性我们可以通过resize 事件去动态的线性的修改html的fontSize，那么界面上的元素就可以同比增加和缩小pubic html 入口页面中引入rem.js然后在页面中使用rem单位 就可以实现在不同屏幕分辨
2022-06-23 16:13:35
307
原创 vue项目中引入安装2个版本的echarts
以前老旧的项目中使用的Vue-echarts,它依赖的是echarts 3点几的版本，现在新加入了需求需要使用echarts中的一些新特性，直接升级echarts版本会导致以前的图表报错，无法正常工作，为了兼容以前的的图表并且能够使用新版本echarts的功能，就想是否一个项目中是否能引入两个版本的echarts呢？答案是可以的。......
2022-06-08 14:36:10
628
原创 Vue keep-alive 缓存路由页面
需求背景：后台管理系统中，左侧菜单栏，右侧是内容区，点击左侧菜单切换不同的视图（组件），现在有A、B、C三个菜单分别对应了ABC页面，B页面中有一个按钮会跳转到D页面，现在一共4个页面分别对应了4个路由，B在跳转到D页面之前的有些状态需要保留（缓存），从D跳转回到B页面刷新，但是菜单之前的切换，比如从B菜单切换到A，然后在回到B,这个时候往往需要更新页面获取到最新数据，而不是缓存，用Vue 的 keep-alive可以实现。在路由配置meta 中加上 keepAlive 字段 { path: '
2022-02-25 11:45:23
64
原创 配置全局路由，动态获取面包屑导航
在APP.vue 中template中<!-- 面包屑 --> <el-breadcrumb v-if="showBread" class="bread-container"> <template slot="separator"> <el-icon name="right" :size="12"></el-icon> </template> <!-- @click.native=
2021-08-17 18:40:30
970
原创 过滤树形结构数据
// nodes就是树形的最原始数据，query就是关键字，最后会返回满足条件的节点数组function filter(nodes, query) { // 判断当前节点是否包含关键字，包含则返回true，不包含则返回false let predicate = function (node) { if (node.title.indexOf(query) > -1) { return true; } else {
2021-08-17 17:48:23
731
原创 Vue中使用防抖函数详解
什么是函数的防抖？什么场景下使用防抖函数？高频率触发一个事件，比如点击事件，点击以后新建一条消息或是一个任务，每次点击都会调用后端接口，那么就会造成一些没必要的请求，和开销，那么用户在不断点击的过程中让前面的点击都不会去发请求，只有最后一次才去发请求，这样，就能防止用户恶意的去做一些操作，造成不必要的网络浪费；在Vue中如何使用防抖呢？首先准备一个防抖的函数，在utils文件夹下新建一个tool.js文件，所有的工具函数都放在里面export const debounce = function (f
2021-08-12 15:45:54
1697
原创 vue-router配合element UI 生成动态的面包屑实现动态导航
将每个页面的面包屑导航放在路由元信息的meta中let routes = [//A页面的路由规则 { path:"/A", component: A, name:"A", meta: { list:[ {name:"A"} ] }sh }, //B页面的路由规则 { path: '/ceshi/:id', component: B, name:"B", before
2021-08-11 11:35:01
618
原创 vue插件发布到npm上
在项目的根目录创建plugins文件夹，里面放各种组件和入口文件index.js；在Vue组件中一定要提供name属性；在index.js 中/* eslint-disable *//** * 动态引入文件 * 参数1：引入文件的路径 * 参数2：是否查找子文件 * 参数3：匹配以.vue结尾的文件 */const requireComponent = require.context('./',true,/\.vue$/);const install = function(Vue)
2021-06-19 16:11:17
76
原创 sass在vue-cli3 中配置全局样式变量
vue.config.js中css: { loaderOptions: { sass: { // data: '@import "@/assets/css/vars.scss";' //旧版sass-loader写法(8.0以下) prependData: `@import "@/assets/css/vars.scss";` //新版scss-loader(8.0及以上) } } },var.scss 中// border
2021-04-22 14:28:48
319
原创 git stash暂存
git stash暂存的操作多人开发,经常遇到开发某一个分支时,需要处理其他事情,这时就可以暂存手头的工作,进行其他工作,完事后再恢复,继续工作1. 暂存操作#查看当前状态git status #如果有修改,添加修改文件git add .#暂存操作git stash save '本次暂存的名字'2. 查看当前暂存的记录#查看暂存记录git stash list3. 恢复暂存的工作‘pop命令恢复,恢复后,暂存区域会删除当前的记录’#恢复指定的暂存工作, 暂存记录保存在lis
2021-03-31 10:54:09
150
原创 Vue slot 的使用
插槽的使用 - 作用域插槽作用域插槽的概念和使用比较难于理解，通过查看多方资料，做了以下的总结：描述：作用域插槽其实就是带数据的插槽，即带参数的插槽，简单的来说就是子组件提供给父组件的参数，该参数仅限于插槽中使用，父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name=
2021-03-14 23:02:24
497
原创 vscode小技巧
多光标定位多个位置实现多处同步修改1、Cmd + D首先讲第一种，还是上面的代码，你把光标移动到数字“content”之前，按下 “Cmd + D”，这样第一个“content”就被选中了；然后再按一次 “Cmd + D”（Windows 上是 Ctrl + D），你可以看到，第二个“content”也被选中了。{x: 0, y: 54, w: 8, h: 5, content: "123"},{x: 8, y: 30, w: 4, h: 16, content: "2435"},{x: 0, y
2021-03-06 11:38:32
175
原创 Mac生成和查看ssh-key
mac 查看 电脑用户名 邮箱git config --global [email protected]第一步：打开终端，查看本地是否存在ls -al ~/.ssh如果输出的是如下内容：证明本地没有生成的SSH Key，请执行第二步。No such file or directory如果输出的是如下内容： 证明本地已经存在SSH Key 文件，请执行第四步。drwx------ 4 chenyang staff 128
2021-02-23 16:01:17
272
原创 axios取消请求源码
function CancelToken(executor) { if (typeof executor !== 'function') { throw new TypeError('executor must be a function.'); } var resolvePromise; //将promise放在CancelToken的实例上（也就是可以通过 config.cancelToken.promise访问到这个promise的实例） this.promise =
2021-02-02 12:08:11
143
原创 axios结合axios.CancelToken防止重复发请求的全局统一配置
在一个页面中我们一般不会去同时多次去请求一个接口，可以防止重复点击提交，防止用户重复点击等等，首先需要一个容器去存放某个请求，并且同时将这个请求的取消函数与这个请求一一对应起来const CancelToken = axios.CancelToken//声明一个存放请求以及和这个请求对应的取消函数，他们的关系是一一对应的export const requestMap = new Map() // 请求池// 创建axios实例const httpService = axios.create({
2021-02-01 23:41:16
693
原创 记录一个有关修改引用类型的数据引起其他数据改变的bug
有一个场景，现在有一个公共的子组件，这个子组件在很多地方都被用到了，现在有个问题，就是从父组件传递过来的数据是一个对象，如下代码所示，因为这个数据是从后台获取的，现在想要把含有value:0的数据过滤掉，于是我开始了下面的写bug之旅。{name:"",colors:["red","black"],data:[{name:"wer",value:0},{name:"wer",value:1}]}子组件用props接受 props: { //数据 pieObject: {
2021-02-01 22:41:15
156
原创 Vue 中使用v-model 实现父子组件双向传值
Vue 中使用v-model 实现父子组件双向传值父组件 v-model=“tabSoulected”@getStationInfo=“getStationInfo”<component id="qwer" v-model="tabSoulected" :is="whichComponent" :data="modalData" @getStationInfo="getStationInfo"></component>子组件<ul class="right-tab-
2021-01-21 20:14:47
372
原创 本地同步代码提交到码云
本地如果有个文件，名字为qwe，想同步到码云首先. 进入文件夹—qwe1. git init 注：把这个目录变成git可以管理的仓库2. git add .注：把文件添加到版本库中，使用命令 git add .添加到暂存区里面去，不要忘记后面的小数点“.”，意为添加文件夹下的所有文件3. git commit -m '输入你的备注内容' 注：用命令 git commit告诉Git，把文件提交到仓库。引号内为提交说明4. git remote add ori
2021-01-18 19:52:16
180
原创 es6学习笔记
var 声明，不合理的地方，可重复声明var a = 1;var b = 2;var 可变量提升,意义不大console.log(a);//undefinedvar a = 12for 循环中是全局变量,这里的i 是同一份i 变量，所以最后调用的时候i已经变成了10var arr = []for(var i=0;i<10;i++;){arr[i] = function(){console.log(i) }}console.log(i)//10arr[0]()//10
2021-01-03 17:45:19
103
原创 Vue 中使用dataV 轮播表 适配 大屏 rem 解决方案
安装npm install @jiaminghi/data-view全局引入// 将自动注册所有组件为全局组件import dataV from '@jiaminghi/data-view'Vue.use(dataV)按需引入import { scrollBoard } from "@jiaminghi/data-view";Vue.use(scrollBoard);html<dv-scroll-board v-if="emergencySuppliesConfig.dat
2020-12-30 14:58:00
6635
4
原创 vue-awsome-swiper垂直方向的匀速轮播
引入import { swiper, swiperSlide } from "vue-awesome-swiper";import "swiper/dist/css/swiper.css";注册components: { swiper, swiperSlide },dom 结构这里需要注意几点，当数据caseInfoList是从接口获得的动态数据时候一定记得加上v-if="caseInfoList.length > 1"c才不会导致bug<div class
2020-12-20 20:25:50
2445
1
原创 css居中解决方案
flex 布局方式，写在父容器上，作用在父容器的内容上display: flex;justify-content: center;align-items: center;transform 方式top:50%;left:50%;transform:translate(-50%, -50%);position fixed 方式div{position:fixed;margin:auto;left:0;right:0;top:0;bottom:0;width:200px;h
2020-12-17 15:27:18
206
原创 vue-awsome-swipe 带缩略图
安装引入import { swiper, swiperSlide} from "vue-awesome-swiper";import "swiper/dist/css/swiper.css";HTML<swiper ref="mySwiper" :options="swiperOptions" class="gallery-top" v-if="picturesMiddleList.length > 1"> <swiper-slide v-for=
2020-11-26 17:04:15
625
原创 element UI tree 组件 自定义
element-UI tree 组件 修改前面的自定义图标HTML<el-tree :data="data" :props="defaultProps" accordion @node-click="handleNodeClick" :highlight-current="false"> <span class="custom-tree-node" slot-scope="{ node, data }"> <!-- <i v-if="data.chi
2020-11-26 13:40:23
1390
原创 css grid布局
auto-fill 关键字使用场景：单元格的大小是固定的，但是容器的大小不确定，对于在不同宽度屏幕下放置不同数量的固定单元格很有作用，超出就换行.container { display: grid; grid-template-columns: repeat(auto-fill, 100px);}实例...
2020-11-26 13:29:59
165
原创 less中 calc 百分比 与固定值得加减法计算
当我@margin : 110px;//定义一个变量，可以用在很多地方.bottom_div_style(@width: 1200px) {//定义一个函数（类似函数）可以传参，参数有默认值 height: calc(~"100% - @{width} - @{margin}");//注意减号两边一定要有空格}//在样式中调用 .left-bottom-box { margin-top: @margin; background-color: green;
2020-11-20 12:26:20
1072
原创 Promise.all的使用
使用场景：请求前开启loading效果，在所有的请求完毕后，关闭loadinglet aa = this.http.get(this.http .get(this.http.get(this.api.home.leftImportantDatas),bb = this.http.get(this.http .get(this.http.get(this.api.home.trafficData)this.loadding =truePromise.a
2020-11-18 21:58:02
149
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人