iseyre的博客

原创 根据具体时间转换为一周前、几小时前格式

label="更新时间"

原创 记录：获取当天本周本月开始及结束时间并格式化年-月-日 时:分:秒

【代码】记录：获取当天本周本月开始及结束时间并格式化年-月-日 时:分:秒。

原创 记录：利用css改变el-tabs自定义样式，背景色、激活选中样式、tab底部蓝条横线样式等

利用css改变el-tabs样式，背景色、激活样式等 ，代码如下可直接复制。这样就行了如果有其他需求可根据代码自行修改。

原创 修复谷歌Chrome浏览器“Status_Invalid_Image_Hash“崩溃错误的方法

亲测有用：右键谷歌打开属性，在目标后添加 --no-sandbox （注记得exe"与--中间有一个空格）最后应用重启谷歌就ok。

原创 echarts饼状图中心文字与图片位置/解决偏移问题，可直接复制！

如果图表本身并不是居于中间，而且偏左或偏右，这时候left就要使用百分比或数值，这种情况下容器宽高不固定的话就会有问题了!只有刷新才能保证中心位置否则会出现偏移情况！网上的设置resize方法已经试过了不管用。设置饼状图中心点文字与图片一般来说只用设置 elements，并将left和top设置为center就可以保证文字图片位于正中央。这是利用富文本标记设置文字和背景图片，基于图表本身来设置避免了偏移情况！代码：与series同级添加如下代码。

原创 el-table合并内容相同的表头、单元格,利用file-saver和XLSX纯前端导出多级表头表格,列宽根据内容长度动态设置，可直接复制

表头合并：el-table中加上这个方法 方法：单元格合并：和表头合并在同个位置加上这个方法： :span-method="genderSpanCity"主要是两个依赖:(xlsx 和 file-saver)…导出表格内容列宽根据长度动态设置显示

原创 vue前端利用websocket添加真实进度条

可在mounted中调用this.initWebSocket()最后在调用保存接口时传递与后端定义好的参数即可。进度条样式(这里用的是element里的)progressVal默认0。

原创 记录安装cnpm报错：internal/modules/cjs/loader.js:1032 throw err；

查看版本报错安装不成功解决：是npm和cnpm版本不匹配导致的。三：查看cnpm版本，出现以下提示即安装成功。一：查看当前npm版本。

原创 Vue路由$router之query传参地址栏信息加密解密

【代码】Vue路由$router之query传参地址栏信息加密解密。

原创 水滴球实现echarts，水滴球不出效果解决

npm install --save echarts-liquidfill@对应的版本号。注：eacharts需要和水滴图的版本号对应！然后父组件引入调用就ok。这个图需要下载对应的插件。

原创 vue前端无需插件实现网页在线预览pdf、xls、xlsx、ppt、jpg等多格式文件

你的文档地址必须是外网可访问的并且是http或https打头。给预览按钮方法中加上这段代码。

原创 记录：vue 让element-ui级联选择器选中后下拉框自动收起/解决懒加载后选择任意一级出现暂无数据

【代码】记录：vue element-ui级联选择器选中后下拉框自动收起。

原创 el-tree刷新树默认展开/保留当前操作节点获取展开的节点

default-expanded-keys="defaultShowNodes"指定需要默认展开的数组。一定要加node-key,代表唯一的值，这里指定的是谁就把谁加到默认展开的数组中去，一般都是id。分别是展开节点时触发和收起节点时触发。

原创 eacharts和eacharts-gl、3d饼图、3d柱状图加折线图、下载gl报错解决

eacharts-gl下载时版本一定要和eacharts版本对应。否则不出效果！！目前已知可以生效有：第一种1：第二种2：下载后在页面上引入然后像使用eacharts一样的流程就行。

原创 element管理系统记录问题/表格行高自定义/左侧导航菜单问题

目录el-table表格行高自定义 问题：左侧菜单展开时有滚动条无法去除单独给某一项 去除导航菜单右侧的箭头或指定某个iconelement导航菜单可根据路由高亮、刷新页面自动定位并展开上一次点击的地方、页面刷新不丢失 :row-style="{ height: '62px' }" :cell-style="{ padding: '0px' }" 解决：左侧菜单固定高 el-menu设置和背景一样的border单独给某一项 去除导航菜单右侧的箭头或指定某个icon注：如果指定某个icon

原创 vue项目pc端下载xls表格文件

代码】vue项目pc端下载xls表格文件。

转载 手机app端v-pdf插件下载预览pdf文件

开发新项目的时候遇到了合同的预览下载功能，之前没有做过，实现之后记录一下，方便以后查阅。1.下载vue-pdf插件npminstall--savevue-pdf或者cnpminstall--savevue-pdf2.所需页面引入vue-pdf我的pdf预览是在弹窗中展示，根据自己的项目实际情况来展示......

原创 记录element验证踩坑：async-validator: [‘region is required‘]

记录一下。在写element下拉框表单验证的时候出现的报错这个报错中：‘region’指的是名字，错误原因也就是v-model和验证的prop验证名不一致造成的一定要记得 的el-form-item的prop与v-model名字保持一致注意最外层:model数据嵌套...

原创 基于vue项目实现手机长按下载图片

前端vue的二三事

原创 全局自定义拖拽vue

1/在根目录创建一个tz.jsexport default { inserted(el) { let switchPos = { x: 10, y: 85, startX: 0, startY: 0, endX: 0, endY: 0 } el.addEventListener('touchstart'.

原创 a跳转b页面生命周期执行顺序；父子生命周期顺序

a跳转b页面顺序：a挂载后 b挂载前 a销毁 b挂载后父子顺序：父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted父挂载前 执行子到挂载后 再执行父挂载后...

原创 超清晰后台登录验证全局守卫的多种写法

// 全局守卫 引入vuexrouter.beforeEach((to,from,next)=>{ // 方法一 if(store.state.loginData ){ // 如果有登录信息 if( to.name=='Login' || to.name=='Register' ){ next('/') }else{ next() } }else{ .

原创 Echarts图表+vue渲染页面+time-formater时间转换插件

目录time-formater时间转换插件：Echarts图表下载引用：time-formater时间转换插件：1：下载npm i -S time-formater2：页面中引import 自定义名字from "time-formater";3、使用const t=上方自定义名字().format('YYYY-MM-DD HH:mm:ss')页面效果当前时间： 年-月-日 时:分:秒Echarts图表下载引用：1：下载...

原创 富文本编辑器vue

一：下载：npm install vue-quill-editor -s二：main.js中粘贴import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' Vue.use(VueQuillEditor);三：dom中写<quill-e.

原创 vue解决跨域

1、在vue项目最外层创建： vue.condig.js2、粘贴以下内容/** @Description: 配置文件* @Author: hai-27* @Date: 2020-02-07 16:23:00* @LastEditors: hai-27* @LastEditTime: 2021-03-03 22:32:57*/module.exports = { lintOnSave: false, publicPath: './', devServer:...

原创 token过期验证

模拟数据版：点击登录获取当前的时间戳，存到vuex里面在全局守卫中再次获取当前的时间戳，得出两个时间戳的差值进行判断优化：用户操作时不清除登录信息

原创 超简单一行代码格式化时间戳

超简单！组件时间戳转化为正常显示时间

原创 vue使用组件实现json数据分页

table表格组件中将数据切割截取数组.slice(开始，结束)数组.slice((当前页数-1)*每页条数,当前页数*每页条数)假设：从第二页开始每页保留3条，那么当前页2-1=1,1*每页条数3=3， 当前页2*每页条数3=6。最后得出从第3条数据开始截取到第6条数据代码如下：注：我的page...数据在formInline对象中定义所以是formInline.page......data数据定义如下：事件：...

原创 使用ts限制封装ajax

原创 vue3的provide和inject实现父子传递

provide：提供依赖是一个对象，或者是一个返回对象的函数。里面包含要给子孙后代的东西，也就是属性和属性值。inject：注入依赖一个字符串数组，或者是一个对象。属性值可以是一个对象，包含from和default默认值父组件：<template> <div class="home"> {{num}} <input type="text" v-model="num"/> <!-- 子组件1 --> <one.

原创 axios请求封装

创建api文件夹，里面创建http.js文件再创建一个request文件，专门用来放置路径在页面上这么使用先引入：import {gettab} from '../api/request.js'，定义方法，最后记得调用方法完整代码：//http.js文件import axios from 'axios'let http=axios.create({ // baseURL:'', // timeout:500})// 请求拦截http...

原创 路由导航守卫/路由拦截/导航守卫

目录导航守卫：全局守卫组件守卫：独享守卫导航守卫：又称：路由导航守卫、路由拦截都是一样的分为全局守卫、组件守卫、独享守卫全局守卫写在路由页面，写在const router同级之下const router = new VueRouter({ routes})//全局守卫写在这里全局守卫又分为：前置守卫：router.beforeEach 和后置钩子：router.afterEach前置守卫常用于登录验证：如下//全局守卫rout.

原创 vuex5大核心和4大金刚(辅助函数)用法

vuex是状态管理工具，任何组件都可以使用vuex里的公共数据。vuex5大核心及其用法：state：vuex里用于存放数据和变量mutations：唯一可以改变state数据的actions：异步操作getters：相当于计算属性在页面中调用vuex中state的数据可以这样写：<div>{{$store.state.值}}</div>想要更改vuex里的数据必须使用this.$store.commit()传到vuex，然后在vuex的muta

原创 看了就会的vue组件通讯，父传子 子传父 兄弟相传

为什么要使用组件我们常常把一些能重复利用的内容封装成组件，这样大大提高了效率避免了不必要的重复。比如在写页面中：很多页面都会出现按钮、输入框等等，往往样式一模一样，我们就可以把这些封装成组件，谁用的到谁直接调用就行组件通讯vue中组件之间的传递又被成为组件通讯。父传子：1、在父组件的子组件标签上绑定一个自定义属性 ，:自定义属性名='要传递的数据'，如下：2、在要接收的子组件data同级，通过props来接收有两种方法：方法（1）：props:['自定义属...

原创 vue2生命周期函数(11个)以及执行顺序

目录生命周期理解在vue中只有页面的生命周期，简单来说就是指页面从出生到死亡的过程。生命周期有哪些？beforeCreate 页面创建前。这是最开始的时候created 创建后。这时可以获取到data数据，通常获取接口数据就是在‘created’时请求beforeMount 挂载前。...

原创 git推送上传文件详细流程

推 ：1、复制你要推的仓库地址,地址如下2、在桌面新建一个文件夹，点进文件夹右键Git Bash Here 回车。这时候就会弹出一个黑色的框3、输入 git clone 右键选择Paste(是粘贴的意思) 将第一步复制的链接粘贴到这里，回车4、这时候你的文件夹就会出现一个新的文件，这就是你仓库里的文件内容（git文件不能动不能删）在小黑框里输入 cd 文件名 回车，进入文件 或者点进文件夹再次右键Git Bash Here路径成功的话就会出现（m...