vue
三火Sunfire
这个作者很懒,什么都没留下…
展开
-
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 · 1230 阅读 · 0 评论 -
【奇yin秘技】利用id和disabled属性按需引入css文件
项目都快好了突然收到需求说要做多个主题,不是很想大改,就想着有没有什么猥琐的招式,找了一下还真有:以VUE为例,我先是把原有的主题样式剪切到了一个css文件中,再根据UI图把另外一个css文件肝出来第二步:在index.html引入两个主题的css文件(注意添加上id,后续操作dom时会用到)第三步:找到需要变更主题的地方,我这边偷懒就直接加到App.vue里了(- -本来就只写了两个全局样式文件)简单来说就是把所有样式导入进去,当获取到主题名之后(这里以localStorage为例),将不需要的原创 2022-01-04 15:55:08 · 633 阅读 · 0 评论 -
antd vue 表格元素溢出省略号(含按钮、编辑框)
效果预览:首先我们知道,对于普通的单元格来说,直接在columns下添加ellipsis: true即可实现溢出省略号的效果但对于slot插槽定义的单元格来说,添加该代码只会有溢出隐藏而不会有省略号效果;比如我们常常能遇见到button link和可编辑单元格的情况button link 溢出省略号可编辑单元格 溢出省略号通过观察可以举一反三:只要将slot插槽子元素的宽设置为100%,在文字外套个的父元素,添加单行溢出省略号三件套即可...原创 2021-11-04 09:53:30 · 1669 阅读 · 0 评论 -
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 · 1150 阅读 · 0 评论 -
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 · 2735 阅读 · 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 · 640 阅读 · 0 评论 -
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 · 958 阅读 · 0 评论 -
前端访问服务器磁盘文件时 nginx的配置
碰到个项目需要用到离线地图瓦片,为了方便就把瓦片数据放进服务器里,请教了后端大哥配了nginx原理大致是访问到nginx配置的另一个端口再转到服务器目录,亲测可用顺便求一个vuecli3vue.config.js 的配置方法...原创 2021-06-01 16:19:42 · 402 阅读 · 0 评论 -
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 · 2426 阅读 · 0 评论 -
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 · 277 阅读 · 0 评论 -
echarts 点击事件
graph.setOption({ ... graph.on('click', function (params) { if (params.dataType === 'node') { if (params.data.temp !== undefined) { ... } } })})原创 2021-05-11 09:09:46 · 749 阅读 · 0 评论 -
请求url带;JSESSIONID=XXX vue与nginx代理解决方案
最近手上的项目需要接公司的登录平台,用axios请求时发现要么302后404,要么是cookies被强制加上max-Age:0(直接过期),但在postman调用竟然又可以,所以一直在纠结是前端的问题直到我读到了这篇文章... https://blog.csdn.net/w372426096/article/details/100572339丫的就是后端的问题呀,结果问了后端说现在里面的代码不能改了,行吧,咱们自己想办法...理论可以参考文章:https://www.cnblogs.com/s.原创 2021-04-13 23:38:43 · 842 阅读 · 0 评论 -
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 · 1092 阅读 · 0 评论 -
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 · 1733 阅读 · 0 评论 -
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 · 1139 阅读 · 0 评论 -
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 · 1737 阅读 · 0 评论 -
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 · 2936 阅读 · 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 · 1514 阅读 · 0 评论 -
vue播放器播放暂停时svg变更效果
效果预览:详细操作:1.创建一个组件用于展示播放与暂停的svg图2.在播放器组件中导入并使用data:method:原理:设置播放暂停图标标签,用v-if、v-else与布尔值进行条件渲染,再在两个标签内部添加点击事件,当点击时变更布尔值从而达到所需效果...原创 2021-03-07 16:15:11 · 344 阅读 · 0 评论 -
vue弹出模态框时禁止滚动、关闭时恢复滚动(针对npm下载的插件)
在做项目时遇到的一个坑:一个通过npm下载的vue插件,原有的滚动功能在我的vue中无效,最后想到了一种解决方案:当弹出模态框时禁止滚动1、添加点击事件与方法我用的插件正好支持在标签内套标签加插槽,直接用@clickmethods:{ stop(){ this.scrollTop = document.scrollingElement.scrollTop; document.body.classList.add('modalOpen');原创 2021-02-02 20:29:00 · 539 阅读 · 0 评论 -
vue重新编辑实现逻辑
在开发中,我们常会涉及到重新编辑用户信息、文章等的开发需求,且一般我们会选择在同一页面内完成编辑和重新编辑。对此,我们可以按以下逻辑来做:点击重新编辑时跳转至编辑页并传递id→打开页面时判断是否存在1、input框2、base64图片3、富文本编辑器...原创 2021-02-02 15:27:00 · 839 阅读 · 0 评论 -
vue导入外部css、js的两种方法
做项目时看了些文章,有的方法可用有的不可用,不知道是不是版本不同的问题,在这里分享两个2.6.11版本(vue-cli3生成)可以用的方法,有更好的方法欢迎交流~1、全局导入在 ./public/index.html 中外部引入2、在view/components内导入...原创 2021-02-02 14:32:41 · 694 阅读 · 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 · 1108 阅读 · 0 评论