cabinx的博客

vue内JS代码中使用filter方案总结1.需求背景最近在vue项目中使用到了filter，常见的情况是在vue模版中使用，也有一些情况是在JS代码中使用，下面对其进行总结：解决方案// 1.全局新增一个filter（Vue单独引入），如：Vue.filter('dictionary', function(value, code) { if (code) { return localStorage.get('DICT_DATA')[code]; }

vue中.sync修饰符的用法总结需求描述:最近项目中需要在父子组件中实现数据双向传递的功能。解决方案:在vue中我们知道props传递的属性只能实现数据的单向流动，如果我们要实现这样的功能一般通过this.$emit()来触发方法来实现，使用.sync修饰符只需要通过this.$emit()来触发属性就能实现。// 父组件使用 .sync 传递:page.sync="searchForm.page"// 子组件使用 'update:' 触发this.$emit('update

js添加右键点击事件并阻止右键浏览器事件总结1.业务需求：最近vue项目需要在用到右键点击事件，但由于浏览器已经存在右键事件，所以这里涉及到阻止，并添加自定义事件。2.解决方案：这里用到了contextmenu事件，如需阻止浏览器的右键事件使用prevent： @contextmenu.prevent="rightclick"...

来自阮大神推荐的CSS新布局方式！布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex 布局将成为未来布局的首选方案。本文介绍它的语法，下一篇文章给出常见布局的 Flex 写法。网友 JailBrea

关于vue基于bus事件总线通信时$on同一时间内多次被触发问题解决方案1.问题描述：vue项目在兄弟组件中使用了bus事件总线通信，当前使用场景是：在A页面通过bus.$emit传递给B组件一个信号，此信号的作用是告知B组件打开dialog弹窗，而B组件接收到信号后出现了多次弹窗问题，此问题根源在于bus.$on在同一时间多次触发。2.解决方案：这里解决方案的核心是先关闭接收再触发接收，即： mounted() { bus.$off('test') bus.

开箱即用 - 在vue中封装.js文件(公共函数)并引入的使用总结1.业务需求：这是我们在日常开发中常见的一个需求，在vue中封装JS文件（这个JS文件是一些公共函数的封装文件），并在项目中引入。2.解决方案：1.首先我们需要将公共函数封装成一个独立的common.js文件，封装示例如下： // 单个函数： export default function outF () { console.log('这是一个公共函数') } // 多个函

开箱即用 - 在vue中引入.html文件并渲染的使用总结1.业务需求：最近在项目中遇到了一个需求，在vue的模版中引入外部的HTML文件（这个HTML文件是后端生成的），并且渲染出来。2.需求分析：在vue中引入.html文件，我们一般的思路是先新建一个容器，然后再在vue中将HTML文件引入，然后再给容器的innerHTML属性进行赋值，照着这个思路干就对了。3.解决方案：1.首先我们新建一个这个容器，这个容器我使用的是iframe标签（那么为什么偏偏用它？因为在同域下能自由操作

vue项目点击button按钮页面自动刷新问题总结1.问题背景：最近在做的一个vue项目遇到了一个奇葩的问题，在页面中有个弹窗，在弹窗页面搜索条件后点击搜索按钮后，弹窗关闭并自动刷新了当前页面。关键是这个问题还难复现，因为它只是第一次进入页面时才会有闪退刷新页面，后面就正常，要复现这个问题每次要清除缓存且重新进入页面。2.解决方案：在查找资料后发现其实这个问题是我使用了原生的button按钮，而使用原生按钮需要注意的是：原生按钮button默认的type='submit'这个值时默认具有表单提

关于vue中watch监听不能执行methods函数问题总结1.问题描述：vue项目，在父组件中调用子组件后，需要在子组件中监听父组件传过来的值的变化动态执行methods里面的函数，但是此时调用的函数并没有执行。2.解决方案：这里经过踩坑发现是因为我watch监听的时候使用了箭头函数，所以watch中的函数没有执行，正确的做法是应该使用function来定义函数：watch:{ // 监听的参数是userFk（在watch监听的时候使用function定义即可，不要使用箭头函

axios中post的body与query传参区别及使用总结1.踩坑描述：最近在vue项目开发中遇到了一个axios请求方面的问题，post请求传单个参数的时候，按照post请求方式传参但是接口报错，在swagger上面测试后发现接口是没有问题的。2.踩坑分析：其实仔细一点会发现，这个post请求的Parameter Type是query，而一般情况下post请求方式的Parameter Type是body，在一些极少情况下，post请求的参数体可能会存在body及query共存的情况，所以这

vue常用插件整理一、UI组件及框架element - 饿了么出品的Vue的web UI工具套件mint-ui - Vue 的移动UI元素iview - 基于Vuejs的开源U组件库muse-ui-三端样式一致的响应式U库vuetify -为移动而生的Vue JS 组件框架vue-multiselect - Vue.js选择框解决方案vue-chat - vuejs和vuex及webpack的聊天示例vue-waterfall - Vue.js的瀑布布局组件vue-carbon - 基于

html页面去除滚动条方案-开箱即用(兼容google+firefox+IE)1.业务需求：最近在做一个vue的PC端网站项目，既然是网站那么滚动条是必须消灭的！在网上看了一些别人分享的方案，看了之后觉得大部分都不能做到很好的兼容，因此在这里分享一下自己使用的兼容方案。2.解决方案：如果大家和我一样是vue项目，那么先找到index.html文件，然后在里面进行配置： html{ /*兼容火狐方案（网上传的overflow:-moz-scrollbars-none;方案亲

愈来愈流行的yarn之yarn的使用总结1.业务背景：最近在做的一个项目开发使用到了yarn，原先我也是npm的忠实用户，但是最近yarn在前端圈子里面流行起来了，愈来愈有代替npm的趋势，yarn的流行坑定离不开它身上存在的优势，下面就yarn的简介、yarn与npm的区别、yarn的命令大全方面进行详细介绍：2.yarn的简介：yarn其实是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具，它可以让你使用并分享全世界开发者的（例如 J

js 数组去重之高阶方法-.reduce1.业务需求：vue项目需要对数组（子项是对象）进行去重。2.解决方案：使用.reduce方法对复杂结构的数组（子项为对象）进行去重： // 去重函数（list：数组） dropReduce(list) { // 定义一个空对象，利用对象的键的唯一进行去重 let obj = {} // 去重（cur：init默认list，next：数组子项，index：表示当前正在处理的数组

'Converting circular structure to JSON’报错的解决方案1.业务需求：vue项目使用el-tree组件时需要将树形的某一个node对象存储起来，存储的时候需要使用JSON对象来转换为字符串的形式，此时出现Converting circular structure to JSON报错，JSON转换失败。2.解决方案：在网上查找了资料，这个错误其实是因为被JSON转化的对象里的子项存在循环引用，JSON转化时其实也是一个深度拷贝的过程，但是存在循环引用的对象，

通过纯js代码实现将指定内容复制到粘贴板1.业务需求：vue项目需要通过点击button按钮将指定内容复制到粘贴板中，且不引入第三方组件。2.解决方案：js写法如下（这里是利用了浏览器对选中的input标签的复制功能）： // 复制操作函数（text:被复制的内容，可自定义） copyText(text) { let input = document.createElement('input') // 新增一个input input.s

VUE项目通过接口下载文件，并做兼容处理1.业务需求：vue项目对后端接口返回的response处理下载文件(注意文件类型)，并做下载兼容处理。2.解决方案：第1步是处理后端返回的文档流数据（注意：请求PDF文档流数据的接口时如果是axios封装的post请求：params,{responseType:'blob'}，如果是axios封装的get请求：{params:params,responseType:'blob'}）： // // 申明blob及类型，res为接口返回

VUE项目处理PDF文档流数据并实现PDF的预览以及打印功能(处理PDF打印乱码问题)1.业务需求：vue项目需要对后端返回的PDF文档流数据进行处理，在前端实现处理后的PDF文件的预览以及打印功能，最后再处理PDF页面打印乱码问题。2.需求分析：首先由于后端返回的是文档流数据，所以第一步要将文档流数据转换为正确的PDF格式的数据，第二步是要将转化的PDF数据在页面上进行预览（这里我使用的是vue-pdf插件），最后是要在预览的PDF页面上添加打印按钮以及实现打印功能（PDF打印功能vue-p

HTML页面锚点跳转的两种方法总结以及锚点跳转后页面上移问题1.业务需求：vue项目，所在项目有一个文档树形数据，前端请求到文档数据后需要动态渲染，此时当文档过长时就需要通过目录进行锚点定位，以方便用户查看。2.需求分析锚点定位的方法常用的有两种，这两种各有优缺点。第一种是a标签方案，它的优点是写法更简便，缺点是这种方法会改变url地址，因此锚点跳转后刷新页面会找不到当前的页面。第二种方法是scrollIntoView()方案，它的优点是跳转不会改变url地址，缺点是可能需要进行节点操作。

多个异步请求同步返回后再执行下一步的解决方案($axios与Promise)1.业务需求：vue项目，权限管理处理菜单权限树的匹配问题（后端返回一个菜单树与一个权限菜单ID的Array，此时需要对两者进行匹配，以在菜单树得到默认选中状态）2.需求分析：此时是两个axios请求，而在两次异步请求都完成之后再对两者的返回数据进行匹配处理（其实，先执行一个axios然后在它返回数据后再调用另外一个axios，然后再对两者得到的数据进行处理也可以，本文不讨论），这里我使用的方法是$axios.all与