hunt_er的博客

最近在写项目，实现动态菜单及细粒化按钮权限功能，依托于vue-router动态路由的实现，可以实时从后端获取路由权限，并及时更新。动态路由的实现可以看这篇完整文章：vue实现动态路由。问题：在使用addRoutes方法更新路由表的时候，发现从后端带来的权限信息并没有更新掉原有的路由信息。思路：查看vue-router文档，发现addRoutes已经不被推荐使用了，后来使用新的addRoute方法来逐个更新路由，发现并不能解决问题。api也没有提供remove路由的操作。嗯~ 开始面向

近期项目中采用了tailwind，但是由于开发习惯使用webstorm，使用tailwind是没有智能提示，看到别人使用vscode时有tailwind的智能提示，用起来非常爽，无奈，试用了一段vscode，智能提示确实很爽，但是还是习惯用webstorm，又转了回来。终于，webstorm发布了2021.3版本，新添加了tailwind的支持。重要提示：想要在webstorm中获得比较好的tailwind支持，需要将webstorm升级到2021.3之后的版本，我现在使用的是2021.3.1版

Promise的含义Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了用法，原生提供了Promise对象。 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。Promise提供统一的API，各种异步操作都可以用同样的方法进行处理。Promise对象有以下两个特点。 （1）对象的状...

业务需求，要求实现摄像头窗口4*3的布局，可是海康提供的api只有1x1,2x2,3x3,4x4这样的平方数。本文提供一个解决方法，来实现4*3,3*4等不规则的窗口分割布局，先上图。思路：找到修改布局的函数WebVideoCtrl.I_ChangeWndNum(iType)iType是一个整数，在WebVideoCtrl.js查找该函数，找到如下代码this.I_ChangeWndNum = function (e) { return isNaN(parseInt..

项目中使用了el-popover，但是原始白色背景不够美观，想修改一下样式，一直不成功，仔细查看dom发现，popover的dom创建在了最外层，如图显然，它是和根组件app同级的dom，所以在任何<style scoped></style>下写的css均不能生效。如果直接在<style></style>下粗暴修改，势必又会影响到其他组件的样式，显然不能忍受。那么该怎样修改,又不会影响到其他组件的样式呢？先来看一下官方文档怎么说的..

导入的项目npm install后，发现css引用报错，报错内容：Cannot resolve directory '~@'。既然是不能解析目录，猜想不是项目本身的问题，应该是webstorm或者eslint配置问题。鉴于eslint已经配置好，所以应该是webstorm没有配置好，百度了一下，发现网上的文章真是牛头不对马嘴。。。。不过还好，最后让我找到了解决方法！问题：webstorm不能识别项目中导入css文件的目录， @import "~@/assets/css/main"

这是官网的基础语法和教程官方给出的使用只有一行代码，没有过多的解释。而实际使用也确实如此，确实一行代码就可以用了。但是，在使用时往往存在各种各样的问题，笔者在用这个组件时也踩了不少坑，多方测试，发现如下问题（报错问题不在本篇解决范围，按照报错提示解决就好了），汇总如下：注意事项：最常见的问题就是不能显示（没有反应），好像这个组件被隐藏了一样，折腾半天最后连组件长什么样都不知道，，，，这里放一个图，这是组件默认的样子，我放在了dialog里。代码如下：<el

在写项目时遇到一个需求，需要添加一个展开列的功能，用以显示多余的行属性。由于之前已经封装过element的table组件，所以这次就想着直接在封装过的组件上添加该功能。先看一看element官方对于展开列的描述。那就开始做吧，myTable组件中这样写。...

解构赋值详解。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#%E8%A7%A3%E6%9E%84%E5%AF%B9%E8%B1%A1

因业务需要，要求一个数字框，现有的element的input不太符合要求，遂动手封装了一个，封装后仍能调用原<el-input>事件。功能：仅能输入合法整数和小数格式，默认最少保留二位小数，最大保留四位小数，支持负数格式，支持禁用使用：<my-input-number :value.sync="value"/>采用了vue的.sync修饰符，其余功能属性在代码中有详细注释，上代码。<template> <el-input class="g

在做vue项目时，要求使用axios异步下载后端传输的文件流，下载之后的文件打开是乱码。F12一看，浏览器拿到的不是Blob类型的，而是一串字符串乱码。操作如下：1.写axios接口import axios from 'axios'export const uploadFileRequest = (url, body, params) => { let token = getTokens() let queryParams = { 'access_token': token.ac

最近在写vue项目，需要由后台传来当前用户对应权限的路由表，前端通过调接口拿到后处理(后端处理路由)，就是配置vue动态路由啦。由于错信了一些网上的文章:(，导致在这个问题上耗费了不少时间，想想，还是自己写一篇文章来记录一下那些遇到的坑吧。接下来手把手记录一下，如何从零开始配置vue动态路由。首先呢，先看看静态路由的配置，简单预览一下，熟悉的可以直接跳过，说这部分，是为了熟悉一下路由的配置。静态路由的回顾1.创建router/index.js文件import Vue from 'v

前言contentType属性，想必大家在日常开发中经常用到，但是大家可能对于contentType了解的不是很透彻，这里来和大家一起总结下。contentType是干嘛滴contentType 主要设置你发送给服务器的格式，服务端根据前端设置的contentType 来解析前端的数据。关于http请求中的一些小知识点可以大致总结如下（巩固基础）（1）、HTTP 协议是以ASCII 码传输，建立在 TCP/IP 协议之上的应用层规范。规范把 HTTP 请求分为三个部分：状态行、请求头、消..

项目里遇到一个问题，用this.$options.data()重置组件data时报错，原因是因为form里的rule规则采用了this写法。如下:rules: { code: [this.$rules.required()], name: [this.$rules.required()], age: [ {min: 1, max: 120, type: 'number', message: '年龄 1 到 120 之间', tri

在写项目时遇到一个问题，父组件传到子组件的prop，在子组件监听不到变化，遂查看vue文档，得知watch有一种深度监听的方法。从vue文档搬运。=》var vm = new Vue({ data: { a: 1, b: 2, c: 3, d: 4, e: { f: { g: 5 } } }, watch: { a: function (val, oldVal) { cons

在写项目的时候遇见一个问题，修改vue v-bind或v-model绑定的数据时，视图不能更新这就感觉很无语了。。。。当时在写一个弹窗，弹窗的数据更新后不能更新视图，需要重新刷新才行。这样的问题简直不能忍受。。。。 多方查找，才发现 vue文档里有这样一句话。Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在data对象上存在才能让 Vue 将它转换为响应式的。这句话..

在写vue项目时想到一个问题，项目里面的文件都是一个个的组件，如何在控制台中修改，查看组件data里的值呢？我们知道，用传统的html形式引用vue可以通过给最外层的vue实例命名var myapp=new Vue({el:'#app',data:{ a:1}})然后在控制台输入myapp.a=2改变里面data的值,这样在浏览器控制台调试很方便那么现在采用vue-cli构建项目时，里面的文件都是一个个的组件，如何在控制台中修改，查看组件data里的值呢？方法是在creat

项目开发时遇到一个小问题，重置表单时有个input框值不会清空，很奇怪，之前写的都可以呀，于是，仔细查看发现，在隐藏input框时选择了不同的写法导致出问题。首先，<input name="id" style="display:none;"/>和<input name="id" type="hidden">都有隐藏的功能。style是通过样式来设置的。type是针对特定组件的。一般input框隐藏，常用于传值，这两种方式都可以做到！但是，第二种写法使用

(!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]

声明：该篇文章是作者学习vue文档时，所记录的，内容大部分来源于vue文档，作为查看复习时提高效率所用，详情请看vue完整文档：vue官方文档安装和使用直接下载并用<script>标签引入，Vue会被注册为一个全局变量。注：在开发环境下不要使用压缩版本，不然你就失去了所有常见错误相关的警告!CDN：对于制作原型或学习，你可以这样使用最新版本：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js...

在测试项目bug时发现如题所诉bug，好家伙，点击新建按钮后在狂按回车，直接给我弹出一堆窗口，屏幕都给整黑了。。。经过一番查阅文档及调试，找到如下解决方法：方法一：在layer.open方法中的success回调中添加：$(':focus').blur();。layer.open({ type: 2 , content: 'xxx' , title: '新建' ,

首先说两个概念：浅度克隆：原始类型为值传递，对象类型仍为引用传递。深度克隆：所有元素或属性均完全复制，与原对象完全脱离，也就是说所有对于新对象的修改都不会反映到原对象中。这里又引出两个概念，值传递，引用传递。这里可以参考Java的基本类型和对象类型的使用，Java基本类型复制时可直接复制，副本变量的改变并不会改变被复制的变量，这时复制的是值，而对象简单的复制时，修改副本变量会影响到被复制的变量，这时复制的是对象的引用，js和Java也类似，值传递，引用传递也是如此。先看代码：1.引用传递

在使用layui 第三方控件xm-select时发现，getValue()始终获取不到值，在这之前是先调用了setValue()方法的，但是在后续代码中使用getValue()又可以获取到值了！还真是奇怪！具体问题如下：在调用setValue()方法后不能使用getValue()获取到数据console.log(xmSelectOption.realm.instance.setValue(data)); //这里因需要先设置了一个值console.log(xmSelectOp...

使用layui时，可能会出现一个问题，就是在layui.use()内部的方法依赖于layui的模块，但是当外部js调用layui.use()内部的方法时，会出现无法调用的情况，如何在外部js中调用layui.use()里的方法呢。思想：layui.use()本质是一个layui的function方法，这样写在其内部的function就是其内部的方法，外部自然无法调用，那么问题本质是：如何使用在function内部的function方法呢，这种问题自然就好解决的多！透过事物的现象看本质，emm，哲学道理！

在写页面时常常需要弹出iframe页面，而iframe页面的内容是另一个页面，比如，弹出iframe的里面是一个表单（另一个页面），这样在父页面怎样调用子页面的方法呢？经过一番摸索，发现采用如下js即可成功调用//用widow属性获取iframe的dom对象的name，得到窗口对象var iframeWin = window[$(iframe)[0]['name']];iframeWin.check(); //check()即子页面的方法，和子页面调用规则一样总结就是两条，1.

在layui数据表格中嵌套下拉框时，下拉框不能正常弹出，仔细观察发现，点击下拉框时会有一个短暂的弹出动画，马上又消失了，遂猜想，大概是显示的问题，可能是被覆盖了，那么解决覆盖就可以了。如图，下拉框已经弹出，只是没有正常显示解决方法非常简单，只需在table渲染方法中添加如下代码即可，done: function (res, curr, count) { $(".layui-table-body, .layui-table-box, .layui-tab.

如何在浏览器里调试iframe里面的代码（f12）有时网页中会内嵌一个iframe窗口，而调试iframe里面的代码就有些无从下手了，你会发现在加断点时根本找不到对应的iframe页面源代码，对iframe的js调试就无法进行，下面来介绍一下笔者自己摸索出的查找方法，来方便的查找相应的页面源代码。希望可以帮助到踩同一个坑的人~1.首先f12打开开发者工具，选中你要查看的iframe窗口，找到这个元素，然后查看iframe的跳转src地址，如图所示2.然后在f12'网络'中找到这个请求地址，.