- 博客(20)
- 收藏
- 关注
RSS订阅原创 VUE权限管理，精确控制到按钮级别
VUE权限管理，精确控制到按钮级别一个完整的权限系统必不可少的两个部分是：控制页面元素的渲染动态注册路由控制页面元素的渲染肯定不能用v-if来控制页面元素的渲染，太繁琐，每个页面都得去获取用户的权限，还得写一大堆逻辑。解决思路实现一个权限组件，需要控制渲染的元素作为权限组件的一个slot,在权限组件中控制是否渲染slot。为了不渲染多余的标签，权限组件用JSX语法来写，通过re...
2019-11-07 16:43:42
1999
原创 JS计算字符串在浏览器中显示的宽度
js计算字符串宽度大家可能会碰到这样一个需求：一个容器的宽度固定，当内容的宽度超过容器的宽度时鼠标移入显示提示框，不超过时则不显示。这个时候就需要知道内容到底多宽。怎么计算宽度一 、估计法假设文字大小是14px，如果字符的长度是10，那么内容的宽度大概是14*10=140，这种方法显然误差很大，数字，特殊字符，英文字母，汉字的大小各不相同。二、真实计算法利用offsetWi...
2019-08-27 16:41:34
3332
原创 CKEditor5基本使用，图片上传，添加插件
CKEditor5本篇博客是在react环境中封装的原生的CKEditor5，VUE环境也可以参考。基本使用安装依赖npm install -- save @ckeditor/ckeditor5-build-classicoryarn add @ckeditor/ckeditor5-build-classic完整的代码import React, { Component } fro...
2019-08-12 14:25:05
6720
2
原创 通过call和new 的原理来理解经典继承
call原理call可以改变一个函数的作用域let a = { name: 'foo', fn: function() { console.log(this.name); }};let b = { name: 'bar'};a.fn.call(b); // 输出 bar实现一个自己的call// 在函数的原型上定义自己的callFunction.pro...
2019-08-05 15:35:58
249
原创 Vue双向数据绑定原理的两种实现方式
1、Object.defineProperty(obj, prop, descriptor)Object.defineProperty()会在一个对象上，新建或修改一个现有的属性，并返回这个对象obj 定义属性的对象props 属性名称descriptor 属性描述descriptor 属性描述属性描述具有的属性configurable 为true时属性才能被改变enumer...
2019-07-30 10:37:29
147
原创 Vue父子组件通信
数据传递父组件 => 子组件父组件传递<Child hobby="唱,跳,RAP" :age=“age”/>子组件接受props: { hobby: { type: String, default: '' }, age: { type: Number, default: 2.5 }}子组件 => 父组件...
2019-07-25 17:08:41
123
原创 antd的Upload上传组件，搭配react-cropper实现图片的裁剪上传
实现效果在Upload上传前，对图片进行裁剪，裁剪完毕后，再交给Upload完成上传。实现方式在Upload的beforeUpload中调起react-cropper进行图片裁剪；将拿到的图片传给react-cropper；利用react-cropper进行裁剪；将裁剪后的图片交给Upload完成上传。需要解决的问题如何在beforeUpload中调起react-croppe...
2019-05-28 17:46:46
4882
2
原创 前端文件下载
同源文件下载<a href="文件地址" download="文件名称">Download</a>给a标签加上download属性，就可以下载了，download的值是下载到本地的文件名称。跨域文件下载如果前端和后端不在同一个ip端口下，使用a标签加download属性的方式，浏览器会直接打开文件。解决方法通过blob的方式将远程文件请求下来将请求到的内容...
2019-05-16 11:06:26
376
原创 React单元测试
安装依赖yarn add enzyme enzyme-adapter-react-16创建测试文件在需要测试组件的同级目录下，创建xxx.spec.js或者xxx.test.js测试点（一个简单的todo应用）输入框按下 enter todo长度加一点击删除按钮长度减一点击完成按钮，字体加上贯穿线引入包import React from 'react';import To...
2019-03-28 11:12:54
479
原创 JavaScript高级程序设计学习笔记——函数
函数表达式定义函数的两种方式函数声明：function functionName(arg0, arg1, arg2) { //函数体}利用函数声明方式定义的函数，有一个重要特征函数声明提升sayHi(); //可以把函数声明放在调用它的语句后面function sayHi(){ alert("Hi!");}函数表达式var funct...
2018-09-15 15:38:54
117
原创 JavaScript实现继承的几种方式
继承原型链基本思想：让原型对象等于另一个类型的实例。function Parents(){ this.name = 'father';}Parents.prototype.getName = function(){ return this.name;}function Sun(){ this.SunName = 'xiaoming';}Sun...
2018-09-14 11:20:25
123
原创 JavaScript创建对象的几种方式
创建对象的几种方式工厂模式function createPerson(name, age, job){ var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function(){ alert(this.name); }; ...
2018-09-13 16:26:33
125
原创 react中父子组件的传参及相互调用方法
父子组件间传参数及相互调用方法//父组件export default class Parents extends Component { eat = (food) => { //接受子页面的参数 console.log("去吃"+food); //调用子页面的方法 this.child.replay(); ...
2018-08-21 15:34:23
5311
原创 koa实现简单的文件上传
使用koa-body 安装依赖npm install koa-body --save在app.js中使用const koaBody = require('koa-body');app.use(koaBody({ multipart: true, formidable: { maxFileSize: 200*1024*1024 // 设...
2018-08-16 17:01:03
2546
2
原创 knex简单的增删改查
微信小程序给的node的demo中用到了knex来操作数据库，总结下简单的增删改查。一个公式： knex(‘表名’).where().方法查询knex('student').where({name:'小明',age:16}).select()//对应的SQLselect * from student where name='小明' and age=16;新增k...
2018-08-15 17:11:42
4286
原创 JavaScript高级程序设计学习笔记——对象和数组
引用类型Object类型创建的两种方式new操作符跟Object构造函数var person = new Object();person.name = "Nicholas";person.age = 29;字面量表达法 字面量方式不会调用Object的构造函数var person = {name : "Nicholas",age : 29};Ar...
2018-08-14 16:45:11
146
原创 JavaScript高级程序设计学习笔记——基本介绍2
JavaScript作用域没有块级作用域if (true) {var color = "blue";}alert(color); //"blue"变量声明使用var声明的变量会自动添加到最近的环境中 没有用var声明的变量会被添加到全局中 如果局部环境存在同名的标识符，就不会使用位于父环境的标识符垃圾收集标记清除变量进入环境，标记为“进入环境”...
2018-08-14 14:46:51
137
原创 JavaScript高级程序设计学习笔记——基本介绍
语法ECMAScript的语法大量借鉴了C以及其他C语言（Java） (难怪学习js的时候上手会比较快，毕竟在大学也是学过C和Java的)严格模式严格模式为JavaScript定义了一种不同的解析和执行模型。在严格模式下ECMAScript3的一些不确定的行为将得到处理，对某些不安全的额操作也会抛出错误。&quot;use strict&quot;;语句语句的结束使用分号 ; 加上分...
2018-08-11 18:13:33
172
原创 JavaScript高级程序设计学习笔记——在HTML中使用JavaScript
在HTML中使用JavaScript&lt;script&gt;元素的src属性可以包含来自外部域的js文件defer与asyncdefer:&lt;script标签点定义了defer属性，脚本会被延迟到整个页面都解析完毕后再运行（立即下载，延迟执行）&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&am
2018-08-11 16:32:58
112
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人