![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
经验
易de
日积月累
展开
-
表格内日期比较计算
日期大小比较原创 2023-09-25 14:15:08 · 1059 阅读 · 0 评论 -
$attrs,$listeners
通过$listeners在c组件触发了A组件的方法。'通过$listeners触发父组件的事件''这是父组件的方法''这是子组件的方法''这是孙组件的方法'原创 2023-08-31 15:54:56 · 357 阅读 · 0 评论 -
provide/inject
Vue中的provide/inject是一种组件间通信的方式,它允许父组件向子组件传递数据,而不需要通过props或事件来实现。在父组件中,我们可以通过provide选项来提供数据,这些数据可以是任何类型的JavaScript对象。在子组件中,我们可以通过inject选项来注入这些数据,然后在子组件中使用它们。使用provide/inject的好处是可以避免props层层传递的问题,同时也可以让我们更方便地在组件树中共享数据。需要注意的是,provide/inject不是响应式的,也就是说,如果提供的原创 2023-08-31 14:03:22 · 86 阅读 · 0 评论 -
el-table实现跨页多选
el-tabel实现跨页多选原创 2023-02-18 15:46:24 · 807 阅读 · 1 评论 -
overflow:hidden在移动端iOS失效的解决方案
overflow:hidden在移动端iOS失效的解决方案原创 2022-06-12 14:22:32 · 2746 阅读 · 0 评论 -
微信小程序scroll-view去掉滚动条
微信小程序scroll-view去掉滚动条的解决方案原创 2022-06-14 17:27:52 · 9560 阅读 · 3 评论 -
前端cookie封装
前端cookie封装 /* 存cookie */ export function setCookie (cname, cvalue, exdays = 0) { let expires = cname + '=' + escape(cvalue) if (exdays > 0) { let d = new Date() d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)) ex原创 2022-02-15 11:09:12 · 311 阅读 · 0 评论 -
vue 引入 jquery
vue中引入jquery安装jquery包npm install jquery --save配置vue.config.jsconst webpack = require('webpack');module.exports = { configureWebpack: { plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "win原创 2022-01-21 11:13:52 · 4566 阅读 · 1 评论 -
vue+echarts5 实现中国地图
vue + echarts5.0 实现中国地图原创 2022-01-17 18:05:11 · 7317 阅读 · 1 评论 -
webpack相关
1. webpackwebpack是前端构建工具,就是把开发环境的代码转换为运行环境的代码,开发环境的代码是为了更好地阅读,而运行环境的代码是为了更快速的运行。两个环境的代码会有所不同,开发环境的代码经过混淆压缩,体积变的更小,而且对代码的执行也不会产生影响,这样再放在线上运行,会有更高的运行效率。通常需要构建工具处理以下几种情况:代码压缩将CSS、JS等混淆压缩,让体积变得更小编译语法编写CSS时使用的SCSS、LESS等,编写JS时使用的ES6、TypeScript等,这些是目前浏览器无法原创 2022-01-05 18:03:25 · 230 阅读 · 0 评论 -
根据不同的值表格单元格显示不同的背景色
<el-table id="table" :data="tableData" border style="width: 100%;height: 100%;" :header-cell-style="{ color: '#333', 'font-weight': '500'原创 2022-01-05 18:00:31 · 1469 阅读 · 0 评论 -
pdfjs-dist加载不全的解决方案
首先说版本问题,我用的2.1.226版本,会有长文章加载不全的问题,看了网上好多人说的,说是2.2.228版本的最稳定;可以看https://www.cnblogs.com/baisong11/p/13731436.html解决方案方案一:修改源码https://blog.csdn.net/s_y_w123/article/details/108869862方案二:线上或本地资源包https://www.cnblogs.com/KingJames/p/11763590.html我最开始使用了线原创 2021-09-16 19:00:05 · 7726 阅读 · 1 评论 -
提高PDF预览的清晰度
核心代码let devicePixelRatio = window.devicePixelRatio || 1;console.log(window.devicePixelRatio) let backingStoreRatio = context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRa原创 2021-09-08 16:57:18 · 3370 阅读 · 0 评论 -
el-select去掉滚动条
主要原因是下拉框el-select-dropdow和app是同级,所以写在局部样式里面没有效果。未来不全局污染,select组件中,提供了一个popper-class属性(element-select),所以给select组件加上这个属性,就可以咋这个类下修改样式了。<el-select v-model="type" popper-class="remove-scrollbar" placeholder="请选择" > <el-option转载 2021-09-08 15:53:33 · 2533 阅读 · 1 评论 -
使用pdfjs-dist实现PDF预览
<template> <div> <div id="the-canvas"></div> </div></template><script>import PDFJS from "pdfjs-dist";import { TextLayerBuilder } from "pdfjs-dist/web/pdf_viewer";import "pdfjs-dist/web/pdf_viewer.css"原创 2021-09-01 17:12:40 · 3748 阅读 · 6 评论 -
前端vue实现PDF预览
一、使用a标签<a href="http://xxx.xx.cn/test1.pdf">pdf</a>注意,href地址必须是文件的绝对位置,相对位置不可以。也就是说url写为"…/assets/pdf/test1.pdf",这样访问不到PDF文件。点击链接在新窗口打开预览PDF文件,和使用浏览器输入文件地址打开文件一样。二、使用iframe标签<div class="iframe-pdf"> <iframe src="http://xxx.xx.c原创 2021-09-01 10:50:19 · 1286 阅读 · 0 评论 -
el-table拆分单元格
el-table的官方文档给出了合并单元格的方法,本以为拆分和合并是一样的,但是tableData遍历出一条数据在表格中就添加一行,而现在是要根据这一条数据里面的数据把这一行拆分称两行或多行,这样貌似是行不通的。然后我看别的写的相关文章,就是给要拆分的单元格里面写一个表格,然后添加CSS样式,让表格看起来是被拆分的效果。<el-table border isIndex :tableColumn="tableColumn" :tableData="tableData"> <templat原创 2021-04-27 15:50:35 · 7710 阅读 · 4 评论 -
js按位移动操作符
计算机表达数值是一个固定长度的二进制串,一般的计算机位32位或64位,这个固定位数的最高位表示符号位,为1表示负数,为0表示正数。‘<<’ 左移向左移动对应的位数,向左移出的位被丢弃,右侧用零补齐。例如:9 << 2 ,得到36 9 (base 10): 00000000000000000000000000001001 (base 2) --------------------------------9 << 2原创 2021-04-27 12:07:57 · 174 阅读 · 0 评论 -
js处理对象&数组
后端返回对象数组,前端处理返回新的对象数组 // event.data为后端返回的对象数组 this.uploadingFileList = JSON.parse(event.data); let arr = []; this.uploadingFileList.map(item => { var param = {}; param.Filename = item.Filename; param.Totalsize = rates(i.原创 2021-04-26 11:10:52 · 155 阅读 · 0 评论 -
使用axios的cancelToken实现文件上传中途取消
首先文件上传可以使用el-upload组建,但它的底层使用的封装的ajax来实现文件上传,官方介绍里面说 abort()方法可以取消上传,但是我没有实现出来????????????,欢迎实现的大佬分享出来。然后文件上传也可以用input的file属性来实现,我这里就用的这个方法。取消的实现是利用来axios已经封装好的cancelToken来中断一个正在发送的请求。<div> <input class="file" name="file" type="file" m原创 2021-04-24 14:43:36 · 1704 阅读 · 0 评论 -
webSocket连接
created(){ this.ws();}, methods:{ ws(){ // WebSocket if ("WebSocket" in window) { //协议以及主机名的处理 const {host, protocol } = window.location; const pr.原创 2021-04-24 14:17:57 · 351 阅读 · 0 评论 -
promise
Promise是为了解决异步请求而提出的处理方案。promise共有三个状态:pending(请求中)、fulfilled(已成功)、rejected(已失败)。成功会进入.then(),失败会进入.catch()。promise的状态只能从pending变为fulfilled或者从pending变为rejected,只会发生这两种状态改变,一旦状态改变就不再会变化。...原创 2021-04-24 14:01:47 · 49 阅读 · 0 评论 -
el-upload上传文件,显示上传进度
el-upload上传文件,显示进度条deviceFile.vue<el-upload class="upload-demo" ref="upload" action="donothing" :http-request="fileUpload" :multiple="true" :show-file-list="false" :file-list="fileList"> <el-button原创 2021-04-24 13:11:50 · 10000 阅读 · 0 评论 -
vue表格增删改查
记录一次特别的坑的传参这两处拿到的scope不一样第一处拿到的scoped是正常的每行的数据,但是第二处拿到的scoped是最后一行的数据,不知道为什么。。。。。原创 2021-04-19 10:32:45 · 165 阅读 · 0 评论 -
date转换
标准的new Date()的格式为:new Date(year, month, day, hours, minutes, seconds, milliseconds),new Date(yyyy-mm-dd hh:mm:ss)等格式存在兼容问题。export function stringToDate(str) { // 字符串必需符合以下规则: // 按照年月日时分秒顺序; // 至少需指定到日,日与时之间需要加空格; // 连接符只能是一个字符,只有日的或者最后一个的连接符可以省略。原创 2021-04-13 10:34:22 · 300 阅读 · 0 评论 -
a标签的download属性实现静态文件或图片下载
前端使用a标签的download属性实现静态文件或图片下载需要知道的是,如果下载的是浏览器不能识别的(例如:.exe,.zip,.doc等)内容,浏览器会直接进行下载,但是如果下载的是浏览器可以识别的(例如:.png,.jpg等)内容,浏览器不会进行下载,而是进行打开预览。下载内容为不能识别1.1 直接使用download属性,属性值为下载文件的名字。<a href="./企业综合信息系统插件的副本.zip" download="xxx.zip" >压缩包下载</a>&原创 2021-04-06 16:29:45 · 5142 阅读 · 2 评论 -
this.$nextTick()
this.nextTick(callback),当数据发生变化,更新后执行回调。this.$nextTick(callback),当dom发生变化,更新后执行的回调。在以下两个情况下需要用到Vue.nextTick()Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中,原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的转载 2021-03-01 15:01:25 · 256 阅读 · 0 评论 -
ref的使用
vue 提供的一个操作dom的属性ref,用起来和ID类似,通过this.$ref来调用常见的用法<div ref="test" @click="test">ref 测试</div>mounted(){ console.log(this.$refs.test); },当ref所在的dom元素是一个组建时子组建<template> <div>组建</div></template>原创 2021-03-01 11:55:52 · 956 阅读 · 0 评论 -
vue内使用 cytoscape(数据可视化)
vue内使用 cytoscape官网(https://js.cytoscape.org/)官网全是英文,不太友好,哈哈哈,翻译过来也是乱七八糟…cytoscape能够进行图形分析和可视化,轻松显示和操作交互式图形,允许用户与图形进行交互。cytoscape是用于可视化网络数据的强大工具。点(node)和线(edge)是网络图中的两大核心要素,我们做各种各样的网络图,归根结底是对点和线进行注释,通过改变点和线的样式来赋予点和线不同的意义,从而实现数据的可视化。安装cytoscapenpm i原创 2021-02-22 16:26:58 · 2080 阅读 · 0 评论 -
flex弹性盒实现头部固定
<template> <div class="homePage"> //头部固定 <div class="myHead"></div> //主体部分滚动 <div class="homeMain"></div> </div></template><style> .homePage{ height: 100%; display: flex; flex-原创 2021-02-20 18:12:49 · 915 阅读 · 0 评论 -
SVG矢量图中矢量路径的获取
矢量图中矢量路径的获取首先下载一张svg图片,例如,在阿里矢量图标库中下载用代码编辑器打开下载的图片将标签中的d属性复制出来,写成下面的格式这样就可以拿到矢量图中的路径了!SVG矢量图是无损的,是矢量图,图片是由直线以和曲线以及绘制他们的方法组成,当你放大一个SVG图片的时候你看到的还是线和曲线,而不会出现线素点。这意味着,SVG在放大时,不会是真,所以特别适合用来做企业logo等。...原创 2021-02-19 18:06:30 · 5643 阅读 · 3 评论 -
初识 dataURI
第一次看见dataURI是在ECharts官网中。我刚开始以为是URL,后来去搜索了一番,才知道了什么是dataURI。先区分一下URL和URI:URI = Uniform Resource Identifier 统一资源标志符,用来标识抽象或物理资源的一个紧凑字符串。URL = Uniform Resource Locator 统一资源定位符,一种定位资源的主要访问机制的字符串,一个标准的。URN = Universal Resource Name 统一资源名称,通过特定命名空间中的唯一名称或原创 2021-02-19 17:22:47 · 641 阅读 · 0 评论 -
在ECharts中加入数据区域缩放组建(dataZoom)
在ECharts中加入数据区域缩放组建(dataZoom)查看官网在图表中加入交互组件dataZoom组建是对数轴进行【数据窗口缩放】【数据窗口平移】操作。可以通过 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 来指定 dataZoom 控制哪个或哪些数轴。dataZoom 组件可同时存在多个,起到共同控制的作用。控制同一个数轴的组件,会自动联动。dataZoom 的数据窗口范围的设置,目前支持两种形式:百分比形式:参见 dataZoom.st原创 2021-02-18 18:22:35 · 4285 阅读 · 4 评论 -
ECharts封装
ECharts封装子组建<template> <div class="graphLeft" id="graphLeft" style="flex: 1;height: 300px;" ></div> <div class="graphRight" id="graphRight" style="flex: 1;height: 300原创 2021-02-18 17:48:18 · 474 阅读 · 0 评论 -
上传项目到GitHub仓库
上传项目到GitHub仓库在GitHub新建一个仓库,创建完成如下面在本地新建一个文件夹,然后在终端打开,先初始化git init如果你的项目还没有开始,那么你就可以在新建的这个文件夹下面开始你的项目了。如果你的项目已经搭建好了,那么你只需要把你项目目录下的文件复制粘贴到这个新建的文件夹下面。然后查看工作区的状态,发现你刚粘贴进去的文件都在工作区。git status然后提交到暂存区git add . //提交以上所有文件 git add app.js /原创 2021-02-18 15:26:22 · 85 阅读 · 0 评论 -
git操作代码丢失
git操作代码丢失执行命令git reflog执行命令git reset --hard HEAD@{1} //需要恢复几就写几转载 2021-02-16 20:13:07 · 189 阅读 · 0 评论 -
PNG转ICO-在线转换
在线工具:PNG转ICO-在线转换图表文件https://www.aconvert.com/cn/icon/png-to-ico/原创 2021-02-10 11:20:06 · 3424 阅读 · 0 评论 -
vue element-ui tab标签页默认样式的修改
vue element-ui tab标签页默认样式的修改默认蓝色改为桔红色新加一个style 不要使用scoped。注意要在标签外的父标签起class名,例如我的class名:.homeMain。<style>.homeMain .el-tabs__nav-wrap::after { height: 1px;}.homeMain .el-tabs__item { height: 50px; font-size: 16px; font-family原创 2021-02-10 11:13:57 · 8516 阅读 · 1 评论 -
vue 回车事件
vue 路由监听首页<template> <div class="index"> <input class="inp" v-model="input" placeholder="请输入" @keyup.enter="getCompanySearchList"> <el-button class="searc原创 2021-02-09 15:47:11 · 2717 阅读 · 0 评论 -
vue动态绑定class属性
<div :class="{color:scope.row.state == null || scope.row.state.toLowerCase() === 'error'}">{{scope.row.state}}</div> .color { color: #ea5151e8;}原创 2021-01-21 18:23:18 · 1174 阅读 · 0 评论