- 博客(34)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 json属性名转成TreeSelect数据格式
效果图很忙很忙，直接上代码 本人开发环境是vue2 methods+antd，根据实际情况修改就好了jsonTotree(json, lastName) { let arr = [] let data = Object.keys(json) data.forEach(item => { let obj = {} obj.title = item // 这里的^是和后端定义的标识符 obj.key = lastName ?
2022-03-30 11:15:18
1300
原创 【奇yin秘技】前端利用k8s环境变量减少镜像重构次数
经常能碰到前端使用docker+k8s部署的项目，每次一有链接变更，前端都要重新改代码里的链接、改nginx.conf、重新打镜像…非常麻烦要是只有后端API还好，在配nginx的时候用k8s nodeport链接就能解决但实际情况经常是websocket、iframe等等神魔也想来凑个热闹，链接一变，事又多了偶然之间听到后端小哥们在讨论k8s的环境变量配置，凑上去听了听，发现是个好东西，直接在yaml文件里面改动变量重新部署一下就行了关键是前端要怎么获取到这玩意呢？我想到的是用脚本把环境变量写
2022-01-04 16:53:36
1675
原创 【奇yin秘技】利用id和disabled属性按需引入css文件
项目都快好了突然收到需求说要做多个主题，不是很想大改，就想着有没有什么猥琐的招式，找了一下还真有：以VUE为例，我先是把原有的主题样式剪切到了一个css文件中，再根据UI图把另外一个css文件肝出来第二步：在index.html引入两个主题的css文件（注意添加上id，后续操作dom时会用到）第三步：找到需要变更主题的地方，我这边偷懒就直接加到App.vue里了（- -本来就只写了两个全局样式文件）简单来说就是把所有样式导入进去，当获取到主题名之后（这里以localStorage为例），将不需要的
2022-01-04 15:55:08
703
原创 antd vue 表格元素溢出省略号（含按钮、编辑框）
效果预览：首先我们知道，对于普通的单元格来说，直接在columns下添加ellipsis: true即可实现溢出省略号的效果但对于slot插槽定义的单元格来说，添加该代码只会有溢出隐藏而不会有省略号效果；比如我们常常能遇见到button link和可编辑单元格的情况button link 溢出省略号可编辑单元格 溢出省略号通过观察可以举一反三：只要将slot插槽子元素的宽设置为100%，在文字外套个的父元素，添加单行溢出省略号三件套即可...
2021-11-04 09:53:30
1830
原创 jsplumb流程图输入、输出点解决方案
效果预览：设计思路：首先在节点对象中添加两个新字段，用于判断输入点输出点个数：根据输入点输出点个数在节点内绘制不同的样式的子节点，并给予唯一id（以输出点为例，重点在红框处）：初始化/回显/外部拖动添加新节点：这些情况下，可以根据输入点输出点个数将所有输入输出点都设置为源点，父节点只负责节点位置移动相关逻辑，不负责绘制相关逻辑。连线前相关判定：1.一个输入点仅对应一个输出点/禁止重复创建。遍历线数组判断即可2.节点不能连接自己/禁止回环。用 节点id…split(’_’)[0] 把父节点
2021-09-13 10:08:29
408
原创 vuecli+electron打包问题汇总
1.Error in script “stdin” on line 1 – aborting creation process问题出在——文件所在路径包含了中文解决方案：改就完了2.Error in script “stdin” on line 74/75 – aborting creation process问题出在——当前系统用户名包含中文解决方案：参考https://www.cnblogs.com/kkxwze/p/12666344.html 修改user文件夹下用户名文件夹（光在用户管理下
2021-08-16 11:30:41
1475
原创 html2canvas生成图片常见问题汇总
1.模糊var canvas = document.createElement('canvas')canvas.width = w * 2canvas.height = h * 2canvas.style.width = w + 'px'canvas.style.width = h + 'px'canvas.getContext('2d').scale(2, 2)注：w和h分别为所生成容器的宽度和高度，需单独计算。可缩放容器需乘上缩放值2.不识别svg需要使用canvg插件将svg转换成
2021-07-26 17:11:18
903
原创 微信小程序 企业微信客户服务插件【联系我】自定义样式
我们从插件扩展参数中得知，原有插件是不支持自定义样式的：但方法总比困难多，比如我们可以通过opacity:0来设置插件按钮透明，再通过绝对定位和z-index将按钮覆盖在写好的容器样式之上。这样当点击容器时即可触发插件，具体代码如下：<view class="service-container"> <cell class="service-cell" styleType="2" plugid='plugid'/> **styleType为2时，插件只显示为一个按钮样式**
2021-07-22 17:09:47
2643
原创 vue echarts 离线datav地图使用
DATAV.GeoAtlas：http://datav.aliyun.com/tools/atlas/index.html下载完成后引入：import guizhou from '../../public/mapJson/贵州省.json'初始化组件： const that = this setTimeout(() => { var echarts = require('echarts') that.graph = echarts.init(d
2021-06-29 14:55:34
2858
1
原创 vue echarts bmap 获取可视范围坐标
因为大概要在地图上展示几百万个点，所以希望在拖拽加载或者缩放加载的时候，获取可视区域的经纬度范围内的数据，可以直接用：var bmap = graph.getModel().getComponent('bmap').getBMap()var start = bmap.getBounds().getSouthWest() //可视区域左下角var end = bmap.getBounds().getNorthEast() //可视区域右上角...
2021-06-07 10:27:47
745
原创 echarts bmap 滚轮缩放时节点跟随改变其大小
在使用bmap时发现了一个问题：节点大小无法根随地图缩放而改变。最后解决了，设计思路大致如下：1.添加鼠标滚轮监听事件这个是在github留言区看到的，通过graph.getZr().on('mousewheel', function (params) {option})鼠标滚轮监听事件2.获取zoom和center我们可以将节点大小和zoom绑定，通过更新echarts配置（graph.setOption({option},true)）来实现大小变化。那在更新配置时，我们需要获取到当前的z
2021-06-04 09:20:03
1077
原创 前端访问服务器磁盘文件时 nginx的配置
碰到个项目需要用到离线地图瓦片，为了方便就把瓦片数据放进服务器里，请教了后端大哥配了nginx原理大致是访问到nginx配置的另一个端口再转到服务器目录，亲测可用顺便求一个vuecli3vue.config.js 的配置方法...
2021-06-01 16:19:42
443
原创 vue 导入图片方法（简单易用）
1.直接在标签内添加：:style="'background-image:url('+require('../../assets/bg.png')+')'"2.css穿透div >>> .imgSrc { background-image: url('~@/assets/bg.png')}
2021-05-31 16:48:30
2533
原创 vue自定义右击菜单制作思路
1.禁用默认右击事件document.oncontextmenu = function (e) { return false}2.自定义菜单（v-if控制显示）<div id="menu" style="width : 100px; top: -200px; background-color: #004454; border : 1px solid #07caa9; padding : 2px; position : absolute;" v-if="visibleM
2021-05-31 16:39:21
328
原创 echarts 点击事件
graph.setOption({ ... graph.on('click', function (params) { if (params.dataType === 'node') { if (params.data.temp !== undefined) { ... } } })})
2021-05-11 09:09:46
811
原创 echarts bmap 百度地图禁用点击弹出详细信息
网上找的方法都不行，最后看了node_modules/echarts/extension/bmap/BMapCoordSys.js找到了配置项，"echarts":"^5.1.1"mapOptions: { enableMapClick: false},
2021-05-11 09:03:33
812
原创 jquery 动态创建svg形状的方法
使用jquery 默认创建的是dom元素而不是svgdom，给用createElementNS方法创建，以<rect>标签为例：var svgNS = 'http://www.w3.org/2000/svg'var oSvg = document.createElementNS(svgNS, 'rect')// 为rect标签添加属性oSvg.setAttribute('x', location.x - container.x)oSvg.setAttribute('y', loca
2021-04-14 22:29:05
1331
原创 请求url带；JSESSIONID=XXX vue与nginx代理解决方案
最近手上的项目需要接公司的登录平台，用axios请求时发现要么302后404，要么是cookies被强制加上max-Age:0（直接过期），但在postman调用竟然又可以，所以一直在纠结是前端的问题直到我读到了这篇文章... https://blog.youkuaiyun.com/w372426096/article/details/100572339丫的就是后端的问题呀，结果问了后端说现在里面的代码不能改了，行吧，咱们自己想办法...理论可以参考文章：https://www.cnblogs.com/s.
2021-04-13 23:38:43
981
原创 vue 轮询实现（含路由切换时终止轮询）
1.定义一个定时器，便于停止data () { return { timer: undefined }}2.在方法中设置轮询this.timer = setInterval(() => { setTimeout(this.轮询方法名(), 0) // eslint下会报xxx is defined but never used，加个console.log就好了 console.log(this.timer)}, 150
2021-04-01 14:32:09
1216
原创 antd vue更改表格样式
定义表格时加上scopedSlots: { customRender: 'status' }const columns = [ { title: '状态', key: 'status', scopedSlots: { customRender: 'status' } }, { title: '版本', key: 'version' }]在a-table标签内编写你想要的样式，在标签内加上slot=customRender名即可<
2021-03-31 23:19:36
1876
原创 vue axios里的值取不到？——箭头立即执行函数解决axios异步问题
刚入职那会，经常因为取不出来值去问师傅，其中大多数情况都是因为axios的值取不出来。总结之后发现，除了改变执行顺序之外，还可以通过箭头立即执行函数解决这个问题首先我们来猜一下这种情况，打印的会是什么？method () { this.text = '' axios请求.then(res => {this.text = '三火Sunfire'}) if (this.text === '') { console.log('啥也没有呀') } el
2021-03-31 23:03:17
1224
原创 antd vue侧边导航菜单根据路由地址展开
主要是利用defaultOpenKeys和selectedKeys两个APItemplate部分：<a-menu theme="dark" mode="inline" :defaultOpenKeys="openKeys" :selectedKeys="selectedKeys" :style="{ height: '100%', borderRight: 0, minHeight: 'calc(100vh - 64px)' }"&g...
2021-03-31 22:41:25
1847
原创 vue鼠标选取文字高亮与点击取消高亮（标注功能）
在标签上添加@mouseup事件<div v-html="text" @mouseup="handleMouseSelect"></div>选取文字高亮方法handleMouseSelect () { // window.getSelection().toString()获取鼠标选定的文字 var text = window.getSelection().toString() // 避免未选择文字时对字符串进行替换 if (te
2021-03-30 17:40:00
3307
12
原创 antd vue 多级select框实现与已选择内容重置
需求：用axios请求数据1并在第一个select框中展现，当选择后请求数据2并在第二个select框中展现...以此类推。当上级框重新选择时需要重置所有下级select框并重新读取数据template部分：data部分：mounted部分：method部分：总结：@change可以接收选择框value值使用v-model可以很好的解决select已选择项的重置问题...
2021-03-14 16:58:29
1594
原创 vue播放器播放暂停时svg变更效果
效果预览：详细操作：1.创建一个组件用于展示播放与暂停的svg图2.在播放器组件中导入并使用data：method：原理：设置播放暂停图标标签，用v-if、v-else与布尔值进行条件渲染，再在两个标签内部添加点击事件，当点击时变更布尔值从而达到所需效果...
2021-03-07 16:15:11
414
原创 vue弹出模态框时禁止滚动、关闭时恢复滚动（针对npm下载的插件）
在做项目时遇到的一个坑：一个通过npm下载的vue插件，原有的滚动功能在我的vue中无效，最后想到了一种解决方案：当弹出模态框时禁止滚动1、添加点击事件与方法我用的插件正好支持在标签内套标签加插槽，直接用@clickmethods:{ stop(){ this.scrollTop = document.scrollingElement.scrollTop; document.body.classList.add('modalOpen');
2021-02-02 20:29:00
636
原创 vue重新编辑实现逻辑
在开发中，我们常会涉及到重新编辑用户信息、文章等的开发需求，且一般我们会选择在同一页面内完成编辑和重新编辑。对此，我们可以按以下逻辑来做：点击重新编辑时跳转至编辑页并传递id→打开页面时判断是否存在1、input框2、base64图片3、富文本编辑器...
2021-02-02 15:27:00
909
原创 vue导入外部css、js的两种方法
做项目时看了些文章，有的方法可用有的不可用，不知道是不是版本不同的问题，在这里分享两个2.6.11版本（vue-cli3生成）可以用的方法，有更好的方法欢迎交流~1、全局导入在 ./public/index.html 中外部引入2、在view/components内导入...
2021-02-02 14:32:41
791
2
原创 vue-wechat-title动态修改title（含详情页标题修改办法）
1、安装vue-wechat-title插件npm i vue-wechat-title --save2、在main.js中使用import VueWechatTitle from 'vue-wechat-title'Vue.use(VueWechatTitle)3、在App.vue文件中使用<router-view v-wechat-title="$route.meta.title"/>4.1、在每个router的index.js设置title名expor
2021-02-01 15:56:36
1301
原创 mongoose根据前端传来的_id获取上下篇文章并返回指定字段
schemaName.findOne({'_id':{'$lt':req.params._id}}).sort({_id:-1}).then(...) #上一篇schemaName.findOne({'_id':{'$gt':req.params._id}}).sort({_id:1}).then(...) #下一篇上述代码会获取一篇文章的全部字段，但有时候我们并不需要那么多字段，甚至在数据较大时（如带有图片的文章）会影响网页的加载速度，所以我们可以根据实际...
2021-02-01 15:12:31
486
4
原创 解决ios使用background-attachment:fixed造成的显示问题
在个人博客上做了一个固定背景下拉的效果，上线后用手中的8P看了一下好家伙，直接白掉一块，下拉的效果也不在了，换个浏览器也一样，但安卓访问却完全正常？？最后查了百度，原因大概是ios系统和某些移动端对background-attachment:fixed不兼容，可用伪元素:before的方法代替background-attachment:fixed原理：固定的伪元素设置一个背景图片.section1:before{ content: ' '; position: fixe
2021-02-01 14:37:20
1827
原创 腾讯云轻量应用服务器部署vue+express+mongoose前后端分离项目
搞了一个个人博客，想要发布到腾讯云。由于之前从未接触过linux相关知识，所以在查了各种资料，挖了各种坑，重置了N次系统后终于将个人博客上线了。随手记录下正确的完整过程和维护常用的代码，希望对大家有所帮助一、购买服务器与域名这里我使用的是腾讯云轻量应用服务器，CentOS7.6镜像，使用pm2+nginx部署项目。其他不多说，买就完事了，买完就能看到你的服务器了二、密钥与Xftp我们需要一个密钥和Xftp软件绑定，以便于文件的传输。点击密钥，新建密钥并保存到本地；然...
2021-01-31 18:53:03
1377
空空如也
js 如何获得文本内指定文字在视口中的位置
2021-04-17
TA创建的收藏夹 TA关注的收藏夹
TA关注的人