vue
文章平均质量分 64
异乡原子
人如果没有梦想 那和咸鱼有什么区别呢
展开
-
monaco editor 代码编辑器全屏切换
思路给全屏、恢复两个操作分别绑定监听事件,在事件回调函数中做对应的操作;利用了Monaco editor 的layout()函数,在调用的过程中,动态传递width和height实现全屏和恢复初始的功能预览实现// css操作.editor-fullscreen { position: fixed !important; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100% !import原创 2020-08-05 19:43:53 · 3916 阅读 · 1 评论 -
svg技术绘制血缘关系
说明项目中需要绘制作业血缘图,网上调研了下也没有找到合适的轮子,于是就自己撸了,这里只有一层依赖关系,及父与子作业。思路根据后端返回的接口数据,计算每个节点的位置坐标,根据节点文本内容计算每个节点的宽度,高度固定。得到这些位置信息后,借用svg的path标签绘制出本依赖关系图。预览 实现(代码写得比较粗糙,需要整体,这里贴个初版)接口返回的数据结构如下:代码实现:// dag.jsconst SVG_NS = 'http://www.w3.org/2000/svg'export c.原创 2020-08-05 19:34:26 · 1452 阅读 · 0 评论 -
monaco editor编辑器代码diff的实现
背景利用monaco editor这款编辑器做代码比较,支持sql、shell、python脚本及json字符串效果图代码CodeDiffEditor.vue<template> <div class="the-code-diff-editor-container" ref="diffContainer"> </div></template><script>import * as monaco from 'monaco原创 2020-07-10 18:17:30 · 6121 阅读 · 5 评论 -
关于vue-router中scrollBehavior方法滚动行为的使用
好处当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置scrollBehavior (to, from, savedPosition) { // return 期望滚动到哪个的位置}参数说明:to, from都是路由对象;savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。案例使用场景:项目中经常会遇到异步请求接口数据,这些异步操作通常会放在created、mounted钩子里面分析:通过在不同的生命周期钩子和s原创 2020-06-02 20:55:57 · 6328 阅读 · 0 评论 -
滚动加载解决el-table是数据量大加载缓慢的问题
window.addEventListener('resize', () => { this.bindingScrollEvent() this.getTableHeight() })......// 回到列表顶部 backTop () { this.$refs.taskTable.bodyWrapper.scrollTop = 0 },// 监听滚动事件() bindingScrollEvent () { let原创 2020-05-25 18:02:06 · 5328 阅读 · 0 评论 -
基于vue的monaco-editor使用
说明:本文主要介绍文本编辑器monaco-editor结合vue的使用单独封装一个基础组件:CodeEditor.vue<template> <div class="the-code-editor-container" ref="container"></div></template><script>// 编...原创 2019-11-26 20:10:30 · 3545 阅读 · 1 评论 -
面板可调整大小resizable(基于vue)
最近在做vue项目中遇到需要通过拖动面板边缘,动态调整面板宽度的问题,最开始是打算找一个vue组件解决得了,后来想了一下应该也挺简单的就自己实现了。项目中是左右宽度调整,这里只介绍左右面板resizable,上下调整原理是一样的。 思路: step1、在左右面板之间添加一个div,div样式如下:.resizable-widget { pos...原创 2019-01-28 20:49:58 · 7932 阅读 · 0 评论 -
echart更换图标
vue项目里面使用了echart绘制图表,当需要更换toolbox默认的图标时,可以采用如下方式;1.引入 const downloadIcon= require('@/assets/dataview.svg') 转成base64格式 2. 更换图标saveAsImage: { icon: `image://${downloadIcon}`}...原创 2019-02-14 17:01:27 · 1172 阅读 · 0 评论 -
使用vuex状态管理的modules进行分模块管理
情景:对于一个使用vue.js框架的大型的项目,如果项目中有好几个不同的业务模块,在数据共享的时候往往会使用vuex状态管理,在vuex中如果不进行模块化管理,store对象可能就变得非常臃肿,不仅不利于维护,也可能导致不同业务系统之间共享数据导致失误。解决:独立维护一个公共仓库store,将一些各业务系统或项目共享的数据放到里面,然后根据业务系统单独维护一个store模块(module),每...原创 2018-12-12 13:23:38 · 3315 阅读 · 0 评论 -
【转载】Vue.js插件开发
Vue.js插件是为应用添加全局功能的一种强大而且简单的方式。插件的用途很广泛,从全局组件,到为应用添加一些额外的功能、如路由(Vue Router),存储在应用程序里的不可变数据(Vuex)。一般来说,Vue插件的开发是非常简单的。Vue插件仅仅是包含一个公开方法install的对象、这个方法有两个参数:Vue 构造器和一个可选的选项对象。尽管,插件系统看起来十分简单,但其仍然可以...转载 2018-12-06 17:56:06 · 151 阅读 · 0 评论 -
vuex状态管理使用
1.前言:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,可以理解为一个共享仓库,可以实现多个组件共享状态。每一个 Vuex 应用的核心就是 store(仓库),两个特点:1)Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新;2)改变 store 中的状态的唯一途...原创 2018-10-27 16:40:50 · 363 阅读 · 0 评论 -
vue-router路由元信息meta
1. 前言:在全局守卫beforeEach((to,from,next) => {...})中判断当前路由是否允许登录、是否需要身份认证、权限认证等,虽然可以采用路由匹配的方式 if(to.path === '/url'),很显然当需要验证的路由较多时,会增加太多的if判断,这不利于代码维护,此时可在定义路由的时候可以配置 meta 字段,通过设置一些属性值,可以便于我们对当前的路由做一...原创 2018-10-27 16:05:48 · 4307 阅读 · 0 评论 -
[转载]从源码的角度分析vue-router前端路由两种实现方式
原文地址:https://zhuanlan.zhihu.com/p/27588422本文由浅入深观摩vue-router源码是如何通过hash与History interface两种方式实现前端路由,介绍了相关原理,并对比了两种方式的优缺点与注意事项。最后分析了如何实现可以直接从文件系统加载而不借助后端服务器的Vue单页应用。随着前端应用的业务功能越来越复杂、用户对于使用体验的要求越来越高,单页...转载 2018-10-31 14:17:12 · 329 阅读 · 0 评论 -
vue-devtools调试工具安装
chrome浏览器安装vue-devtools插件由于vue是数据驱动的,所以这就存在在开发调试中查看DOM结构并不能解析出什么。但是借助vue-devtools插件,我们就可以很容易的对数据结构进行解析和调试1. 准备: vue-devtools插件下载地址:https://github.com/vuejs/vue-devtools 我下载的是vue-devtools-...原创 2018-10-08 20:01:53 · 389 阅读 · 0 评论 -
使用cordova + vue搭建混合app框架
1. 前言:在进行hybrid app开发时,可以采用vue.js前端框架进行h5页面开发,然后使用跨平台cordova工具打包成app,如android或ios等,再h5页面也可以使用cordova丰富的插件调用原生代码,获取设备相关信息、调取手机摄像头等 2. 创建cordova项目 1) 创建cordova项目 前提:安装node和cordova,安装方式很简单,自行百...原创 2018-10-18 13:48:06 · 7344 阅读 · 3 评论 -
[转载]深入理解vue中的slot与slot-scope
原文出处:https://juejin.im/post/5a69ece0f265da3e5a5777ed?utm_source=gold_browser_extension写在前面vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项在使用频率、使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学,反正已经可...转载 2018-09-21 17:58:28 · 250 阅读 · 0 评论 -
[转载]Vue通信、传值的多种方式(详细)
Vue通信、传值的多种方式,详解(都是干货):&amp;amp;nbsp;&amp;amp;nbsp;一、通过路由带参数进行传值①两个组件 A和B,A组件通过query把orderId传递给B组件(触发事件可以是点击事件、钩子函数等)this.$router.push({ path: '/conponentsB', query: ...转载 2018-09-21 15:55:55 · 200 阅读 · 0 评论