weixin_42115781的博客

原创 前端问题记录

jenkins 安装依赖，报错cannot find module ‘/root/.jenkins/workspace/项目路径/node_modules/xxxx’，如图上。解决：执行 npm install @vue/cli-service --unsafe-perm，再执行npm i。

原创 html2pdf

页面布局时将需要保存在同一页pdf的dom元素用div包裹，并为该div添加class类名，例如.convertPDF，如果有多页创建多个.convertPDF这个div，再循环保存pdf即可。用到了html2canvas和JsPdf这两个插件，自行站内搜索安装。

原创 vue2编辑markdown

效果只能全局注册使用。

原创 vue2markdown转思维导图

如果报错can’t import the named export ‘xxx’ from non EcmaScript module，需要在vue.config.js中配置。按照官网安装markmap-lib,markmap-view两个依赖。如果报错提示vuePdfNoSss相关问题，需要安装vue-pdf。官网 http://markmap.js.org。

原创 vue2 人脸识别demo

使用tracking js 实现。

原创 vue组件上传npm

vue组件上传npm

原创 js拖动元素方法

原创 element table动态合并行、列

以上面表格举例，表格需要以服务为主体显示，并且服务的数量不确定，表格数据是 资料对象集合，假设表格数据是按照服务名排序，如下this.informationData = [ { service: '服务1', name: '营业执照', description: 'u一卡通一会发到付v但是v的', check: false }, { service: '服务1', name: '营业执照', description: 'u一卡通一会发到付v但是v的',..

原创 element table表头搜索记录

使用的是element table提供的render-header方法<el-table-column show-overflow-tooltip prop="merchantName" label="商户" min-width="180" :render-header='customTableHeader'></el-table-column>import tableHeaderSearch from '@/pages/callCenter/components/tab.

原创 vue项目不支持IE浏览器提示

index.html<div id="app"> <iframe id='IEIframe' style='display: none;' width="100%" height="700px" src="/static/ie.html" frameborder="0"></iframe></div><script type="text/javascript"> /* 如果是ie浏览器 */ if (!!window.ActiveX.

原创 html2canvas

官网：https://html2canvas.hertzen.com/参考文章:https://www.jianshu.com/p/b70b52091b49?utm_campaign=haruki&utm_content=note&utm_medium=seo_notes&utm_source=recommendation安装：npm install --save html2canvas引入:import html2canvas from “html2ca

原创 svga动画播放

安装参考svga官方githubhttps://github.com/svga/SVGAPlayer-Webhtml<div id='demoCanvas'></div>jsvar player = new SVGA.Player('#demoCanvas');var parser = new SVGA.Parser('#demoCanvas'); parser.load('static/img/bullet/anim.svga', function(videoI

原创 websocket 使用记录

在main.js中 创建websocket连接 (webSocket.js文件在最后)import webSocket from '@/assets/js/webSocket.js'Vue.prototype.$webSocket = webSocketwebSocket.initWebSocket()vuex中储存websocket推送的消息(使用vuex可以在项目任务地方获取socket消息)const state = { socketRes: {}, /* socket消息结果 */

原创 自定义表格 处理滚动body时，header同步滚动

项目中一个模块的表格，element table满足不了，就自己写了一个，记录一下当滚动table body时，需要table header与右侧悬浮的table column同时上下/左右滚动，使用transform中的translateautoScroll () { let header = document.querySelector('.cycle-header') let body = document.querySelector('.cycle-body') let right.

原创 vue + element 实现可拖动表格，element tree层级线样式

新建一个vue文件copy进去就可以看到效果，想要实现拖动的时候 请求接口 或者判断能否拖动等，请参考element tree组件<template> <div id='draggableTable'> <!-- 表头 --> <div class="drat-header"> <div class="drat-item-header" :class='{"drat-name-header": ite

原创 js工具方法记录

base64转filedataURLtoFile (dataurl, filename) { var arr= dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while(n--){ u8arr[n] = bstr.charCodeAt(n); } return new Fil

原创 element upload组件，ctrl v粘贴图片自动上传

产品提了一个需求，需要用户可以在微信或者qq截屏之后，ctrl v直接上传图片，网上查了几篇文章参考了其中一篇实现了参考文章：https://blog.youkuaiyun.com/rencaishigepi/article/details/80277810代码↓<el-upload drag class="upload-demo" :on-preview="handlePictureCardPreview" :on-success='handleSuccess' :on-remove=

原创 jenkins + gitlab实现自动化打包前端项目

安装java jdk运行环境安装jenkins配置添加Credentials配置好这些jenkins 已经可以从gitlab上拉取项目并打包，但是还不能上传服务器，研究中

原创 VS Code插件

GitLens，代码日志

原创 文字充电效果+css clamp()、background-clip使用案例

参考链接：https://www.bilibili.com/video/BV1dK411G7hgclamp函数作用是将一个【值】限制再某个 【最小值】与【最大值】之间语法：width: clamp(min, val, max)举例：width: clamp(200px, 50%, 500px)表示当元素宽度可以是200px~500px之间的任意值取决于父元素的宽度，但当父元素宽度的50% 小于200px时，元素的宽度默认为200px，当父元素宽度的50%大于500px时，元素的宽度默认为500

原创 vue动态修改$router参数

原文：https://blog.youkuaiyun.com/sllailcp/article/details/80312848import merge from 'webpack-merge'； 修改原有参数 this.$router.push({ query:merge(this.$route.query,{'maxPrice':'630'})}) 新增一个参数：this.$router.push({ query:merge(this.$route.query,{'a

原创 vue + element 音频播放控件

参考: https://github.com/wangduanduan/element-audio效果：代码：// 音乐播放组件<template> <div id='playMusic'> <audio ref='audio' :src='src' @pause="onPause" @play='onplay' @timeupdate="onTimeupdate" @loadedmetadata="onLoaded

原创 driver.js 前端引导组件

参考：https://blog.youkuaiyun.com/qq_28811145/article/details/108103011https://kamranahmed.info/driver.js/安装：npm install driver.js使用：import Driver from 'driver.js'import 'driver.js/dist/driver.min.css'guideSetup () { const driver = new Driver() driver

原创 element 相关

table合并表头<el-table :data="tableData" :header-cell-style='customHeaderStyle'> <el-table-column align="center" prop="date" label="付款信息" min-width="180"> <el-table-column align="center" prop="date" label="" min-width="180"></el-t

原创 对开发有帮助的网站记录

EChartsDemohttps://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all

原创 css相关

设置svg格式图片的颜色<div class="mns-top"> <span>统计</span> <div class='mns-statistics-svg'></div></div>.mns-statistics-svg { width: 16px; height: 12px; background: linear-gradient(318deg, #EBF6FF 0%, #268AFF 100%);

原创 工作实例记录-可拖动的进度条

// 自定义进度条组件<template> <div id='customProgress'> <div class="customProgress-list"> <div class="customProgress-item"> <span>沟通难易</span> <div id='parentProgress' class="customProgress-conten.

原创 JS属性方法记录

resize方法浏览器窗口大小改变时触发用法1：window.onresize = () => { console.log('123')}用法2：window.addEventListener('resize', () => { console.log('123')})计算元素到body的距离document.querySelector('.spr-dialog').getBoundingClientRect()...

原创 vue .sync修饰符实现双向数据绑定的父子组件通信

参考原文：https://blog.youkuaiyun.com/starleejay/article/details/81487124项目需要自己封装element drawer抽屉组件，写的时候发现，在父组件中修改drawerVisible = true来打开抽屉，在子组件中修改接收drawerVisible的变量值为false来关闭抽屉，发现第二次及以后无法再打开，原因在于修改子组件中drawerVisible的接收值为false并不能同时修改到父组件的drawerVisible所导致的，想要实现在子组件中修

原创 鼠标移入移出效果demo

代码出处：https://www.bilibili.com/video/BV1Jp4y1y75i移入效果截图：移出效果截图：是一个移入移出的动画的效果，截图看不出使用vue写的，copy代码直接运行就可以了<template> <div class='container'> <h1>bilibili</h1> <form action=''> <input class='tbx' type='te

原创 vue + element 实现 tree 树形控件

工作中遇到的需求，记录一下，效果图如下：贴上代码，直接复制就可以看到效果// 组织架构<template> <div id='newTreeView'> <div class="ntv-company"> <div class="ntvc-child"> <span>芒果财税一分公司<...

原创 vue前端人机验证

vue-puzzle-vcode传送门：https://www.npmjs.com/package/vue-puzzle-vcode

原创 vue相关

watch 深度监听watch无法监听到不是在data中定义的对象属性改变的，需要使用deep开启深度监听watch:{ showDialog: { handler(newval, old) { if (newval.show) { this.dialogVisible = newval.show this.openD...

原创 vue+element Carousel实现幻灯片展示列表并联动时间线

工作中开发的一个小组件，使用element幻灯片展示列表，并且使用时间线展示数据所有的年份月份并根据是否支付显示不同的颜色，点击时间线上的月份可以跳转到对应的幻灯片并选中复制代码运行即可// 月结账单dialog<template> <div> <el-dialog title="月结账单" width="1230px" :visibl...

原创 vue draggable 使用demo

首先安装vue draggable：npm i -S vuedraggable新建一个vue文件将下面代码全部copy运行即可<template> <div class='draggable'> <vuedraggable class='v-draggable' v-model='list1' @start='startEvent' ...

原创 this指向

参考原文：https://www.jianshu.com/p/8d357981dedbthisthis是js中的一个关键字，是函数运行时自动生成的一个内部对象this的指向不是在创建是决定的，而是由执行环境决定的this的指向一般有以下几种情况1. 全局环境全局环境下，this代表的是window对象（针对web应用）var name = 'zhar';function say...

原创 闭包

参考：http://www.360doc.com/content/19/0529/15/64276718_838982036.shtml什么是闭包闭包是能够读取函数内部定义的变量的函数函数内部定义的变量，在函数外无法调用到，并且在函数执行完以后，定义变量的内存也会被回收，闭包函数因为是函数内部的子函数，可以访问到上级函数定义的变量，即使上级函数执行完作用域也不会销毁补充：函数的作用域js...

原创 var let const的区别

来源：https://blog.youkuaiyun.com/qq_43004614/article/details/90697463在ES5中，声明变量只有var 和function两种方式，但因为var声明的变量会有一定的缺点（作用域内的变量会覆盖作用域外的变量和循环中声明的计数变量泄露为全局变量），因此es6后新增let和const两种声明变量方式1. 什么时候提出的var是ES5提出的，let...

原创 Promise

参考视频：https://www.bilibili.com/video/BV1Z7411j76r什么是Promise异步编程的解决方案，解决了回调函数嵌套的问题，提升代码可读性Promise的几种状态Promise有pending、resolved、rejected三种状态，resolved和rejected状态是不可逆的apithen()当Promise调用resolve时会执行...

原创 常用正则表达式

去除空格去除首尾空格