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.在系统管理中新增菜单管理模块获取菜单数组将其以递归组件的形式展开层级 对其增加按钮权限 插入按钮权限自定义

原创 MYSQL 子查询复习

查询工资大于149号员工工资的人数返回job_id 与 141号员工相同,salary比143号员工多的 姓名 job_id 和工资1.先查下job_id == 141 SELECT job_id FROM employess WHERE employee_id = 1412.再查143号员工的工资3.查下符合条件的数据返回job_id ,employee_id,salary。

原创 ｖｕｅ２项目中如何解决ｅｃｈａｒｔｓ多个版本不同依赖包的问题

一个版本对应一个ｎｏｄｅＭｏｄｕｌｅｓ　包　要用哪个版本就引入哪个版本的ｎｏｄｅＭｏｕｄｅｌｓ路径　因为包与包直接依赖的别的包的版本不一样放到一个ｎｏｄｅＭｏｄｅｕｌｓ里面无法共存　亲测有效　输出法出了点问题　输入的拼音好大的空格　所以我就没敲代码了　有人知道怎么解决这个输入拼音的问题你　ｗｉｎ１０电脑　不想重启。

原创 el-table 行列文字悬浮超出屏幕宽度不换行的问题

在网上找了很多例子都没找到合适的 然后这个东西鼠标挪走就不显示 控制台也不好调试 看了一下El-table的源码 他这个悬浮文字用的el-prpper 包着的 所以直接改 .el-table .el-propper 设置为max-width:1000px 就可以了。吐槽一下测试是真的狗 硬生生把数据库字段长度改了要我同步数据库长度 然后弄出来这么个问题 用户实际场景中都用不到 我想说 我们这个测试 脏累活干多了 现在心理极度扭曲 这种事真没少干。ui框架 element-plus。

原创 关于element-plus中el-table组件宽度一直连续不断增加的问题

解决方案: 使用flex:1的时候 配合overflow:hidden；就不会出现这种清空 神奇的css 没有原因只有答案 知道原因的补充一下。

原创 钉钉小程序使用getApp实现类似provide inject的功能 应用场景:解决页面同步子组件弹窗的滚动问题

前言:在开发钉钉小程序的时候 组件内部的弹窗滚动会带着视图同步滚动 所以需要在组件内部弹窗显示的时候禁用视图的scroll滚动 由于我组件封装的比较深 不可能逐级传递 dd也么有provide的语法 所以我使用的getApp 完成控制的效果 最终完美运行 觉得有帮助相互关注一下 后续会持续更新钉钉小程序的坑 废话不多说了 直接上代码。这样就优雅的解决了视图层同步子组件滚动的问题。

原创 useRouter 在js文件中无法获取 比如在请求拦截器跳转一些页面

vue3 中的useRouter方法只能在setup 组件中使用 因为他是根据组件获取对应的上下文的。在js文件中 直接引入整个router文件夹 中的router对象 就可以了。

原创 dd小程序如何监听props中对象的值

dd小程序组件如何监听父组件传递的异步请求数据

原创 Error: Loading PostCSS Plugin failed: Cannot find module ‘postcss-import‘ Require stack:

如果是vite或者electron-vite遇见这个错误 装包了还是有问题删除一下 .postcssrc.js文件 项目的子目录或者父目录 父父目录 直到根目录 有这个文件的就删除掉 深坑。

原创 element plus 框架中的el-table组件 复选框初始化回显的问题

【代码】element plus 框架中的el-table组件 复选框初始化回显的问题。

原创 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