- 博客(17)
- 收藏
- 关注
RSS订阅原创 记录前端开发常用js库
1、url参数解析，对象与queryString互转：qs.js2、本地存储，localStorage：store.js3、剪切板操作：clipboard.js，vue版本：vue-clipboard2
2021-03-08 11:45:05
101
原创 vue 前端权限控制
什么是前端权限控制一般来说，在管理系统中，权限控制分为以下2种情况：1、页面级访问权限；2、页面操作权限 如：增删改。而这2种情况的本质，都是从视觉上的隔离，目的是为了让用户体验变得更友好。真正的数据安全则是由后端控制。权限控制需要做什么侧边栏菜单的显示。 进入无权限路由时的拦截。 进入权限页面时，页面操作的显示。实现思路路由配置一份完整的路由表，在需要权限的路由上配置 meta: { permissions: ['home_1'] }。 根据permissionList 和路.
2021-03-01 17:14:14
1596
原创 element ui el-scrollbar横向滚动
用过element ui组件库的同学，应该会发现它有一个内置滚动组件，官网对此组件没有相关文档说明element ui官方文档右侧菜单即采用了该组件，如下图查看源码，发现有一下propsprops: { native: Boolean, // 是否使用原生滚动条，即不附加自定义滚动条 wrapStyle: {}, // wrap的内联样式 wrapClass: {}, // wrap的样式名 viewClass: {}, // v
2021-02-24 14:24:05
4692
原创 vue简单封装wangeditor4
wangeditor v4版本已经发布了，地址：https://doc.wangeditor.com/抱着尝鲜的态度在新项目中实践，做了一个简单组件封装实现思路定义常用属性（height/zIndex/placeholder/focus）； 实现v-model指令； 监听编辑器onchange事件，更新组件value； watch组件value改变，更新编辑器内容，此处需要注意：在编辑器编辑时，触发onchange事件，更新了组件value值导致watch回调被触发，此时，需判断value
2021-02-22 11:10:44
777
原创 vue简单实现瀑布流
瀑布流原理瀑布流，即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放宽高；瀑布流布局特点，从第2行开始，接下来的每一张图片都会放在现有列中高度最低的那一列，如下图：再继续排列下去，第6张图片应该放在第1列，以此类推，如下图：所以每次排列一张图片时，就需要判断一次现有列中累计高度最小的列，下一张图片就排在哪一列，即瀑布流算法去判断图片的确定位置；实现思路目前常见瀑布流实现都采用定位布局+js计算位置（left，top）方式，搭配后端返回图片真实宽高，实
2021-02-20 15:07:53
2545
原创 记录ckeditor4 toolbar详情
const toolbar = [ { name: 'document', items: [ 'Source', // 源码 '-', // 分组符 'Save', // 保存 'NewPage', // 新建 'Preview', // 预览 'Print', // 打印 '-', 'Templates' // 模板 ] }, { name: 'clipboard'.
2020-09-03 17:41:09
631
原创 如何搭建一个npm脚手架
首先脚手架功能比较简单，只是拉取远程的模板项目到本地，再执行npm install先贴上项目结构，bin目录存放的是我们node执行文件的入口，command目录存放的是现实的命令，目前只实现了“create”命令，template目录存放我们的模板项目，就是我们在执行命令后拉取的项目第一步就是要说明入口文件smy.js了，入口文件用来注册命令，比较简单主要就是了解commander类库，这个类库主要是提供用户命令行输入和参数解析接下来就是create命令文件了，第一张图是使用到的模
2020-08-26 18:24:43
2451
原创 js计算元素到窗口顶部距离
function getElementTop(el, targetEl) { const parent = el.offsetParent; const top = el.offsetTop; return parent && parent !== targetEl ? getElementTop(parent, targetEl) + top : t...
2020-03-27 15:16:06
2496
原创 js节流函数
function throttle(fn, delay, interval = delay) { let timer = undefined; let start = Date.now(); return function() { const _self = this; const args = arguments; let current = Date.n...
2020-03-27 15:02:42
103
原创 基于wangeditor封装的vue富文本编辑器
<template> <div class="sm-editor-component"> <div id="sm-editor-toolbar" class="editor-toolbar"></div> <div id="sm-editor-container" class="editor-container">&...
2020-03-26 20:26:46
354
原创 移动端适配方案-rem
(function () { // 获取viewport var getViewport = function () { let meta = document.getElementsByName('viewport')[0]; if (!meta) { meta = document.createElement('meta'); meta.set...
2019-07-11 10:22:16
108
原创 简单实现监听window.open打开的页面close事件
实现原理：利用window.open返回的window对象，监听window.onload事件，在回调中监听window.unload事件，unload事件表示页面卸载，即实现了close目标let page = window.open('www.baidu.com')page.onload = function(){ // unload事件放在load事件中是因为直接监听un...
2019-01-23 10:59:02
6947
2
原创 CSS3 linear-gradient实现圆形进度条
<div class="progress"></div>.progress { width: 100px; height: 100px; border-radius: 50%; background: linear-gradient(90deg, #02cb73 50%, #f2f2f2 50%);}我们设置一个从左到右的渐变，上面这段代...
2019-01-11 17:15:22
1672
原创 JS日期格式化函数
function format(date, ft = "yyyy-MM-dd hh:mm:ss") { if (!date) return; if (Object.prototype.toString.apply(date) === "[object String]") { date = new Date(date); } let o = { "(M+)": ...
2019-01-07 09:49:50
173
原创 node.js学习笔记——跨域设置
1.在app.js中加入下列代码，需要注意这段代码必须在router之前// Setting up cross - domain access must be before routerapp.use(function (req, res, next) { res.header('Access-Control-Allow-Origin', '*'); res.header('Ac...
2018-03-05 12:26:59
531
原创 vue项目用户登录状态管理，vuex+localStorage实现
一、实现思路1.利用localStorage本地存储用户登录状态token2.在vuex中封装localStorage操作，因为vue是SPA应用， 直接使用localStorage操作数据，无法监听数据改变。3.在App.vue生命周期钩子函数中调用登录接口，验证用户登录状态4.解释一下使用vuex的原因项目中可能多个地方需要用到用户登录状态，利用vuex的响应式状态存储，通过vuex封装的方法...
2018-03-05 11:34:14
27438
2
原创 nodejs安装及npm配置（windows）
1.node.js官网下载.mis安装包，https://nodejs.org/en/download/2.安装node.js，安装路径可以修改，新版node.js自动配置node环境变量，安装完成后打开命令行输入node -v查看版本3.在node.js目录下新建node-global，node-cache文件夹4.在命令行输入npm config set prefix "F:\Develop\...
2018-03-03 17:02:04
451
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人