qq_42157868的博客

原创 el-upload 上传文件配合VueCropper裁切尺寸上传七牛云

因为之前有很详细说过el-upload上传七牛云 所以这次简单粗暴些1.直接贴代码<template> <div> <img :src="options.img" @click="editCropper()" title="点击上传logo" class="img-circle img-lg" /> <el-dialog :title="title" :visible.sync="open" width="1300px">

原创 后台管理系统权限实现 完整版

ERP管理系统权限篇一.动态左侧路由菜单权限配置1.tree树左侧菜单路由权限(Element框架)将后端返回的tree菜单遍历出tree树结构(tree使用参考:https://element.eleme.cn/#/zhCN/component/tree)2.将勾选的id回传给服务器3.账号登录时获取服务器返回的路由列表 遍历出左侧菜单栏菜单权限配置–完结二.权限按钮篇1.在系统管理中新增菜单管理模块获取菜单数组将其以递归组件的形式展开层级 对其增加按钮权限 插入按钮权限自定义

原创 vite配置 Element-plus(按需加载) 设置中文语言使用unplugin-element-plus/vite插件配置

网上大多数的教程都是在main.ts中引入中文语音包然后对element-plus进行配置或者用组件包裹router-view 我觉得这些方式都不够优雅 因为已经使用了插件按需加载组件了 那肯定要在插件里面配置的 不然又是按需引入又全局引入就没意义了。如果你的项目是使用的unplugin-auto-import/vite按需导入的elment-plus 就继续往下看。

原创 windows node包管理工具,nvm的使用node js 版本切换

切换当前运行的nodejs版本号 node nvm use 版本号(必须要已经安装的)查看命令项 nvm --help 可以查看 所有的nvm命令。下载多个node版本 nvm installed 版本号。查看node版本 nvm list available。

原创 nginx反向代理发布服务器

ng配置ngx/conf/nginx.conf 文件#user nobody;worker_processes 1;#error_log logs/error.log;#error_log logs/error.log notice;#error_log logs/error.log info;#pid logs/nginx.pid;events { worker_connections 1024;}http { include

原创 svg 几何信息运算 玩转svg形变后坐标变化transform matrix 2d矩阵运算

代码没几行 但是可以解决很多场景得问题 比如path元素形变后 控制点计算偏移 旋转后无法获取最新得坐标等问题 最实用得还是点击元素旋转后控制元素宽高拉伸得场景。

原创 SVG矩形坐标的旋转 提问看截图

原创 笔记el-dialog与el-tabs结合使用会导致页面卡死浏览器崩溃

修复方法 手写弹窗组件或者tabs组件 或者升级为新版框架。原因：版本问题的框架缺陷。

原创 js在class中使用了bind无法removeEventListener销毁事件的解决办法

bind影响removeEventListener的执行

原创 自定义vue指令

1.自定义折叠板指令Vue.directive('collapse',{ inserted(el){ //.collaps-toggle{ // overflow:hidden; // overflow-x:auto; // -ms-overflow-style:none; // transition:height .3s; //} el.className = 'collaps-toggle'; if(el.childNodes.length!==1){ throw E

原创 vue中的provide与inject详解与使用

provide 和 inject 主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。1.provide与inject一般都是成对使用，在父组件中使用provide分发状态 在父组件任意隔代组件中能使用inject接收porvide共享的值例子父组件<script>export default { data(){ return { parentVal:'父组件的值'},//使用provide劫持父组件的值provide:{ val:this,

原创 webSocket长连接接口调用

// url 中的 http 替换成wws https替换成ws 只兼容IE10及以上版本1.const ws = new webSocket(url) ws.opopen = ()=>{}; ws.omessage = e =>{ //拿到数据 }

原创 ElementUI兼容IE(踩坑)

1.el-dialog弹窗屏幕垂直居中解决IE中弹窗选择控件抖动问题.el-dialog__wrapper{ display:flex; justify-content:center; align-items:center;}.el-dialog{ display:flex; flex-drection:column; display:-ms-flex; -ms-flex-drection:column; margin:0 !important; max-height:calc(10

原创 react中 首页的隔代组件无法路由直接跳转到首页的问题解决方法

方法1.将子组件中的this.props.history传递给他的子组件方法2.通过引入import {withRouter} from ‘react-router-dom’ 解决 class SigupFrom extends React.Component{ handleRouter = ()=>{ //可直接跳转 this.props.hostory.push('/') }} export default withRouter(SigupFrom)...

原创 react 父子之间数据的传递

1.父传子<Parent title="父级传递的数据" />//在Child组件中接收this.props.title2.子传父//Child组件中export defalut calss Child extends React.component{ handleClick=()=>{ this.props.EventData('要传递的值') } render(){ return { <div> <button onClick={

原创 react路由跳转传参和接收参数

1.在路由路径后面/+:+变量名称 ,然后在跳转的时候将值写入变量位置 在组件中用props参数接收2.url?id=1&name=2 这种方式传参接收方式如://第一种方法const params = new URLSearchParams(props.location.search)//然后调用get方法传入要拿的Key名称得到 如params.get('id')//第二种方法import querystring from 'querystring'const value = q

原创 react中前端解决跨域的几种方法

1.通过package文件解决跨域,在package.json中配置proxy:这里是要请求的url 如图2.手动解决跨域1.cnpm install http-proxy-middleware --save2.在src中创建一个setupProxy.js的文件插入代码:const proxy= require('http-proxy-middleware')module.exports = function(app){ app.use({ '/api', proxy({ //请

原创 Ant Design按通过babel-plugin-import 插件完成需加载组件库

1.npm run eject 加载webpack配置文件 完成后会多出一个config文件2.在package.json中配置文件babel属性中添加 "plugins":[ [ "import", { "libraryName":"antd", "libraryDirectory":"es", "style":"css" } ] ]如图:最后在组件

原创 前端使用vue勾选中的列表选项(不需要调用后端接口)生成cxcel文件

核心驱动文件找个目录存起来.js文件 后续代码导出要用到 这两个插件要自己引入哈 下载下依赖包 import { saveAs } from 'file-saver'import XLSX from 'xlsx'function generateArray(table) { var out = []; var rows = table.querySelectorAll('tr'); var ranges = []; for (var R = 0; R < rows.len

原创 一个Vue脚手架中应该有哪些基础方法

一个Vue脚手架中应该有哪些基础方法1.深拷贝// 深拷贝export function deepClone(source) { if (!source && typeof source !== 'object') { throw new Error('error arguments', 'deepClone') } const targetObj = source.constructor === Array ? [] : {} Obje

原创 js中动态改变一个对象的key值

let name="qzq"const obj={[`I is ${name}demo`]：3333}也可以直接把变量放中括号中

原创 vue-element使用JSZip与FileSaver批量下载文件(任何格式的文件)

步骤:第一步:npm install JSZip npm install FileSaver 然后在组件中引入import JSZip from "jszip";import FileSaver from "file-saver";第二步:创建一个function绑定点击事件在浏览器中创建zip//创建zip实例化对象 const zip = new JSZip(); //调用实例化的原型链function设置自定义解压目录文件名 let imgsss = zip.folder

原创 详解路由生命周期

特例说明: beforRouteEnter 跳转路由组件渲染之前的钩子 由于组件还没有渲染所以只能在next(vm(获得当前组件所有实例))点击一个导航进入页面之后页面发生了什么?进入页面之前 beforRouteLeave 在路由跳转之前调用1.导航被触发2.在失活的组件里(即将离开的页面组件) 里调用离开守卫 beforRouteLeave3.调用全局的前置守卫 beforEach4.在重用的组件里调用 beforRouteUpdate5.调用路由独享的守卫 beforEnter6.

原创 Echarts宽度自适应

1.父盒子设置100% 子盒自动获取宽2.

原创 keep-alive组件配合vuex实现页面路由切换数据不丢失(一般用于新增页)

原理:keep组件的原理不是缓存数据到浏览器 而是强制其dom树不然刷新应用场景:字段很多的新增页面中 填入信息中途因故断开导致页面刷新或者回退进入数据又要充填1.给要缓存的路由页面元信息加上自定义属性2.然后再应用中体router切换盒子组件中加入路由判断 <transition name="fade-transform" mode="out-in" > <keep-alive v-if="$store.state.app.keepAlive">

原创 el-upload上传文件到七牛云

1.npm install qiniujs 引入文件import * as qiniu from “qiniu-js”;2.请求接口拿到文件上传token和url前缀3.在created中写入如下代码拿到当前位置的七牛云存储空间地址 // 获取七牛云上传地址 getqiNiu() { const config = { useCdnDomain: true, region: qiniu.region.z2 }; const

原创 根据请求数据动态展示顶部title和ioc图标

document.title = res.companyInfo.systemName;var link =document.querySelector(“link[rel*=‘icon’]”) ||document.createElement(“link”);link.type = “image/x-icon”;link.rel = “shortcut icon”;link.href = “http://image.glijjy.com/” + this.erpData.menuLogo;d