- 博客(52)
- 收藏
- 关注
RSS订阅原创 vue-element-admin动态生成侧边栏以及添加路由
需求：后端根据登录的用户不同，返回具体的路由表，前端根据后端返回的数据动态生成侧边栏以及实现跳转。（与该框架返回角色且根据角色生成路由不同）1、首先登陆，登陆成功之后拿token获取后端接口，把得到的数据放在localStorage里面sysHome() { this.$api.xxxxx() .then(function(res) { localStorage.setItem('router', JSON.stringify(res.data))// 返回的数据存在loca
2021-03-14 19:44:09
3077
原创 new的过程
https://blog.csdn.net/weixin_43276913/article/details/105597983javascript中在new一个对象时发生了什么？1.创建一个新对象2.将新对象的__proto__指向构造函数原型，也就是将新对象链接到原型链上3.将构造函数中的this指向新对象4.构造函数中若有返回值，就直接返回；否则返回新对象（以构造器的prototype属性为原型，创建新对象；• 将this(也就是上一句中的新对象)和调用参数传给构造器，执行；
2021-03-09 21:04:58
204
原创 垂直居中
1、行内元素：line-height： 100px2、行内元素 行内元素：vertical-align:middle; display:inline-block;3、flex display:flex justify-content:center// 水平 align-item:center// 垂直4、table-celldisplay:table-cellvertical-align: middle // 垂直text-align:center // 水平5、floato
2021-03-09 20:55:50
181
原创 组件懒加载格式
1、vue异步组件实现路由懒加载component：resolve=>([‘需要加载的路由的地址’，resolve])2、es提出的import(推荐使用这种方式)const HelloWorld = （）=>import(‘需要加载的模块地址’)
2021-03-08 20:33:48
153
转载 react项目启动报错:Uncaught TypeError: Cannot read property ‘forEach‘ of undefined
https://blog.csdn.net/feinifi/article/details/112448350如题，react项目启动报错，具体信息，如下所示：这个问题是因为浏览器安装了react-devtools扩展程序导致的，很多人的解决办法就是直接禁用react-devtools，我觉着也还行吧，但是就是感觉不是很好，我们安装这个玩意不就是为了方便查看react元素与编译之后的代码的么？这种办法似乎有点壮士断腕，我直接不用你了。我个人根据报错堆栈信息，找到node_modules/@pmmmw
2021-02-19 16:21:01
604
原创 chrome安装react-devtools开发工具
1.首先打开官网：https://github.com/facebook/react-devtools2.本地打开git bash 然后复制上面的github下载链接在git中输入：git clone https://github.com/facebook/react-devtools.git3.克隆完成以后cd react-devtools //切换到工程目录4.git checkout v3 //要从源代码构建v3浏览器扩展5.npm i //安装依赖6.cd shells/chr
2021-02-18 10:21:01
940
原创 css写三角形问题
.square{ width:0; height:0; // 高宽为0 margin:0 auto; border:6px solid transparent; //边框透明 border-top: 6px solid red; // 上边框为红色 } 此时一个倒立的三角形就出来了对于一个缺角白色覆盖黑色会形成一个缺角<div class="box b1"></div> <div class
2021-02-05 15:27:09
113
原创 路由里面的参数是字符串类型
http://xxxxx/Information?params1=d21ce71420ac11ea81f900163e0c1d31¶ms2=false路由里面的参数是字符串类型此处的params2的值false是字符串“false”
2021-01-27 14:38:22
211
原创 ES6扩展对象的功能性
1、新增方法Object.is()方法，判断全等，弥补’===‘的不准确运算，这个方法接受两个参数，只有两个参数类型和值都相同时，会返回trueconsoel.log(Object.is(+0, -0)) // falseconsoel.log(Object.is(NAN, NAN)) // trueconsoel.log(+0 === -0) // trueconsoel.log(NAN === NAN) // false除了这两个特殊的之外，值与’===‘ 相同2、新增Object.ass
2020-12-05 15:05:25
118
原创 ES6中函数个别说明
1、默认参数ES5的时候，若调用make（5），没有给参数b赋值，系统会给一个默认值undefined，下面代码如果传入b为0或者其他假值，则b取2000，如果时make（5，0），那么传进去的0不能作为b的值，那么传进去毫无意义。function make(a,b) { b = b || 2000}ES6中，不传b值的话，b值就取2000，只有当不为第二个参数传入值或不为第二个参数传入undefined时才会使用b的默认值2000function make(a,b = 2000) { }
2020-12-04 11:59:01
91
原创 setTimeout立即执行，没有延迟效果问题的原因
https://blog.csdn.net/u014805893/article/details/77072832setTimeout的第一个参数必须是需要编译的代码或者是一个函数方法，而如果直接传入一行可执行代码，那么抱歉，这里会立即执行，没有延迟效果。setTimeout(setTab('one',2,5),500);//传入的是可执行代码，会立刻执行setTimeout(function(){setTab('one',2,5);},500);// 传入的是待编译代码，会延迟执行...
2020-12-04 11:46:09
920
原创 es6的let，const，var的知识
1、JS引擎在扫描代码代码发现变量声明时，要么把他们提升到作用域顶部（遇到var声明）；要么把他们放到TDZ（临时死区）中（遇到let const声明），访问TDZ里面的变量会触发运行时错误，只有执行变量声明语句后，变量才会从TDZ中移出，然后才能正常访问。if(1) { console.log(typeof value) // 引用错误 let value = 'bli" }console.log(typeof value) // 'undefined' 此时value不在TDZ中
2020-12-03 15:46:39
97
原创 折叠与展开功能
1、对获取到的数据，例如listfor(let i = 0; i< res.data.length; i++) this.$set(res.data, 'ifShowZK', true) this.$set(res.data, 'ifShow', false)}this.list= res.data// 为每一个数据加上这两个属性2、html代码里面使用//上面一层有v-for=（item，index）in list<span class="content" :class="
2020-11-26 15:26:24
224
原创 弹框里使用message消息通知不起效解决办法
Message( { message:'成功', type:'success', customClass:'mzindex' }); <style> // 一定要写在这里面，不可以带上scoped .mzindex{ z-index:9999 !important; // 9999是只要比你的弹框大就行，一般弹框是2000多 }</style> ...
2020-11-20 15:50:56
1518
原创 vue-preview 缩略图
1、下载npm install vue-preview2、 main.js中引入import VuePreview from 'vue-preview'Vue.use(VuePreview)3、组件中使用<vue-preview :slides="List"></vue-preview>List: [ {msrc:'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg'
2020-11-05 15:57:31
205
原创 vue组件传递事件，并带值
https://www.cnblogs.com/guoxianglei/p/7205961.html父组件<SearchBar ref="search" @toChild="toChild"/>components: { SearchBar }toChild(value) { this.$refs.search.$emit('changeListActive', value)}, //别处调用该方法 比如在其他方法里调用该方法this.toChild('dsd')子组件dat
2020-11-04 18:00:34
516
原创 Vue实现PC端@功能
https://segmentfault.com/a/1190000005797788思路：1、当想要@某人时，获取@所在的位置。让@用户选项框设为可见，并把选项框放到@的位置。2、选择选项框里的某个人，并把选中的内容填入到输入框内容里面3、提交数据给后台时，提取@的某人的信息给后台。操作1、先上html代码<div class="dialog-input"> <el-input v-focus type="textarea" id="inputText" content
2020-10-10 19:16:50
3519
原创 docker部署nginx
默认安装了Docker @vue/cli 已有一个vue项目已有dist文件夹1、在vue根目录下运行代码docker pull nginx2、项目根目录下创建nginx.conf.templateserver { listen 80; # Load configuration files for the default server block. include /etc/nginx/default.d/*.conf; location / {
2020-10-10 14:27:39
235
转载 图片居中显示，不失真，充满容器
<div class="img-box"><img src="src" /></div><style>img-box { width:50px;//容器宽度，就是你希望图片展示对大尺寸，一定要设置 height: 50px;//容器高度，就是你希望图片展示对大尺寸，一定要设置 img { width: 100%; height: 100%; object-fit: cover }}...
2020-09-08 10:44:14
305
原创 Vue自定义聚焦指令v-focus
1、在src目录里面建立utils文件夹2、在utils文件里面建立directives.js文件,里面内容如下export default (Vue)=>{ Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // console.log(el) 在这里打印出el看看传过来的el到底是什么，以下代码就是为了判断是不是绑定到了我想绑定的元
2020-08-21 17:47:42
3382
原创 Vue无限滚动
1、安装插件npm install vue-infinite-scroll --save2、引入插件，在main.js中引入import infiniteScroll from 'vue-infinite-scroll'Vue.use(infiniteScroll)3、使用插件 <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10"> &
2020-08-21 10:06:41
753
转载 form表单中，按Enter键，会导致表单提交
问题描述当输入结束时，按enter键，页面刷新，不希望刷新问题分析：当form表单中，只有一个输入框时，按Enter键，会导致表单提交，会刷新页面解决方案：网上提供了在form上添加@submit.native.prevent发现容易出现不可预测问题最终找到：在input元素上添加阻止默认表单提交事件onkeypress="if(event.keyCode == 13) return false;"https://blog.csdn.net/tjj3027/article/details
2020-08-11 14:57:26
255
转载 表格里面创建二维码
https://www.cnblogs.com/renzm0318/p/11551323.html1、安装npm install @xkeshi/vue-qrcode2 、在单页面引入import VueQrcode from '@xkeshi/vue-qrcode'components: { qrcode: VueQrcode },3、在代码里面写<el-table-column label="二维码" align="center"> <templa
2020-07-17 15:48:58
306
转载 During handling of the above exception, another exception occurred:错误
https://blog.csdn.net/qq_44838702/article/details/1050498331、执行pip时报错：During handling of the above exception, another exception occurred:这段代码在报错的一堆信息里面，类似于下图这是由于频繁访问网站或请求造成的，可以通过更换国内源的方法来解决此问题。示例如下：pip install XXX -i http://pypi.douban.com/simple --
2020-07-14 14:27:43
17735
原创 理解Vue响应式原理以及this.$set
https://www.jb51.net/article/162232.htmhttps://baijiahao.baidu.com/s?id=1667581867911645201&wfr=spider&for=pchttps://cn.vuejs.org/v2/guide/reactivity.html前言：其实使用vue的都知道，vue声明在data中的属性都是响应式的，也就是，我们在修改data中的属性时，一般页面都能实时更新。但是由于 JavaScript 的限制，Vue 不
2020-07-13 20:53:21
1057
转载 vue中外部图片无法显示问题
https://www.jianshu.com/p/56df73d0d128?utm_source=oschina-app解决方法在HTML代码的head中添加一句原因http请求中的referrerhttp请求体的header中有一个referrer字段，用来表示发起http请求的源地址信息，这个referrer信息是可以省略但是不可修改的，就是说你只能设置是否带上这个referrer信息，不能定制referrer里面的值。服务器端在拿到这个referrer值后就可以进行相关的处理，比如图片资
2020-07-09 13:22:28
1036
原创 vue封装请求
1、首先建立axiosconfig文件夹 建axiosconfig.js文件import Vue from 'vue'import axios from 'axios'import qs from 'qs'import { Message, Loading } from 'element-ui'import fa from 'element-ui/src/locale/lang/fa'// 响应时间axios.defaults.timeout = 5 * 1000// 配置cookie/
2020-07-01 17:54:45
273
原创 改elementui日期选择器宽度
/* 日期选择框的宽度 */.el-date-editor.el-input, .el-date-editor.el-input__inner { width: 220px;}
2020-07-01 17:12:55
10396
原创 vue 发出请求时带token
目前我用的接口都是前期不需要token。所以我先把token写死1、首先安装axiosnpm install axios2 、在main.js中引入axiosimport axios from 'axios'Vue.prototype.axios = axios3、在main,js中引入token//加上token// 在请求头中加tokenaxios.interceptors.request.use( config => { // 判断是否存在token，如果存在的话
2020-06-13 16:23:47
5596
6
原创 elementui分页组件配合后端接口的使用
分页分为前端分页和后端分页，前端分页是先获取所有数据前端再来分页。性能不好后端分页就是把数据传给后端，后端返回当前页相应的数据后端分页：在表格</el-table>后面加上分页代码，如果是其他的比如列表分页，我估计也是要放在</>外面<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage
2020-06-13 16:14:14
2318
原创 调试show-overflow-tooltip
更改show-overflow-tooltip样式 .el-tooltip__popper{max-width:20%;} .el-tooltip__popper,.el-tooltip__popper.is-dark{background:#f5f5f5 !important; color: #303133 !important;}如果不起作用，就把style里面scoped去掉
2020-06-10 14:34:21
1010
原创 表格里面放图片
<el-table-column label="封面图片" > <template slot-scope="scope" > <el-popover placement="right" title="" trigger="hover"> <img :src="scope.row.firstImg" /> <img slot="reference" :src="scope.row.fir
2020-06-10 09:57:41
203
原创 webpack第一遍学习
webpack是一个现代JS应用程序的静态模块打包器。当webpack处理应用程序时，它会递归构建一个依赖关系图，其中包括应用程序需要的每个模块，然后它将所有这些模块打包为一个或者多个bundle四个核心概念入口entry输出outputloader插件plugins1、入口入口会指示webpack应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口后，webpack会找出有哪些模块和库是入口起点（直接或者间接）依赖的。const config = { entry: "./src
2020-06-09 10:21:43
137
原创 elementui导出表格
1、Element组件库中的el-table表格导出需要的主要是两个依赖:(xlsx 和 file-saver)安装npm install --save xlsx file-saver2、 给表格添加一个id，导出文件事件需要使用<el-table :data="tableData" border style="width: 100%" id="out-table"//这一步很重要 ><butto
2020-06-05 17:50:16
2810
原创 CSS变量
1、声明变量的时候，变量名前面要加两根连词线（–）。body { --foo: #7F583F; --bar: #F7EFD2;}2、var（）用于读取变量a { color: var(--foo); color: var(--foo, #7F583F);//变量不存在就是用后面那个默认值 text-decoration-color: var(--bar);}3、变量值是一个字符串，可以与其他字符串拼接。--bar: 'hello';--foo: var(--bar)
2020-06-04 10:13:42
140
原创 获取北京时间
之前面试被问到过怎么获取北京时间。我咋知道怎么获取？哼<SCRIPT LANGUAGE = "JavaScript">var xmlhttp = new ActiveXObject("MSXML2.XMLHTTP.3.0");xmlhttp.open("GET", "http://bjtime.cn", false);xmlhttp.setRequestHeader("If-Modified-Since", "bjtime");xmlhttp.send();var dateStr =
2020-06-01 11:34:56
294
原创 vue生命周期
beforecreated：这时就是初始化实例,目前啥也没有created：这时是准备数据，方法。但实例还没有挂载，此时$el不可用beforemounted：给el准备模板显示render，再是template再是outhtml，对象在dom中已经形成了形状mounted：dom已经准备就绪，并且放在了页面上，可以获取dom了beforeupdate：改变的数据在dom树上了，但是还没渲...
2020-05-07 17:43:57
116
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人