前端
tao-cht
一个努力成长的前端小码农
展开
-
记录前端开发常用js库
1、url参数解析,对象与queryString互转:qs.js2、本地存储,localStorage:store.js3、剪切板操作:clipboard.js,vue版本:vue-clipboard2原创 2021-03-08 11:45:05 · 107 阅读 · 0 评论 -
vue 前端权限控制
什么是前端权限控制一般来说,在管理系统中,权限控制分为以下2种情况:1、页面级访问权限;2、页面操作权限 如:增删改。而这2种情况的本质,都是从视觉上的隔离,目的是为了让用户体验变得更友好。真正的数据安全则是由后端控制。权限控制需要做什么侧边栏菜单的显示。 进入无权限路由时的拦截。 进入权限页面时,页面操作的显示。实现思路路由配置一份完整的路由表,在需要权限的路由上配置 meta: { permissions: ['home_1'] }。 根据permissionList 和路.原创 2021-03-01 17:14:14 · 1656 阅读 · 0 评论 -
element ui el-scrollbar横向滚动
用过element ui组件库的同学,应该会发现它有一个内置滚动组件,官网对此组件没有相关文档说明element ui官方文档右侧菜单即采用了该组件,如下图查看源码,发现有一下propsprops: { native: Boolean, // 是否使用原生滚动条,即不附加自定义滚动条 wrapStyle: {}, // wrap的内联样式 wrapClass: {}, // wrap的样式名 viewClass: {}, // v原创 2021-02-24 14:24:05 · 4708 阅读 · 0 评论 -
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 · 806 阅读 · 0 评论 -
vue简单实现瀑布流
瀑布流原理瀑布流,即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放宽高;瀑布流布局特点,从第2行开始,接下来的每一张图片都会放在现有列中高度最低的那一列,如下图:再继续排列下去,第6张图片应该放在第1列,以此类推,如下图:所以每次排列一张图片时,就需要判断一次现有列中累计高度最小的列,下一张图片就排在哪一列,即瀑布流算法去判断图片的确定位置;实现思路目前常见瀑布流实现都采用定位布局+js计算位置(left,top)方式,搭配后端返回图片真实宽高,实原创 2021-02-20 15:07:53 · 2574 阅读 · 0 评论 -
记录ckeditor4 toolbar详情
const toolbar = [ { name: 'document', items: [ 'Source', // 源码 '-', // 分组符 'Save', // 保存 'NewPage', // 新建 'Preview', // 预览 'Print', // 打印 '-', 'Templates' // 模板 ] }, { name: 'clipboard'.原创 2020-09-03 17:41:09 · 642 阅读 · 0 评论 -
如何搭建一个npm脚手架
首先脚手架功能比较简单,只是拉取远程的模板项目到本地,再执行npm install先贴上项目结构,bin目录存放的是我们node执行文件的入口,command目录存放的是现实的命令,目前只实现了“create”命令,template目录存放我们的模板项目,就是我们在执行命令后拉取的项目第一步就是要说明入口文件smy.js了,入口文件用来注册命令,比较简单主要就是了解commander类库,这个类库主要是提供用户命令行输入和参数解析接下来就是create命令文件了,第一张图是使用到的模原创 2020-08-26 18:24:43 · 2481 阅读 · 0 评论 -
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 · 2539 阅读 · 0 评论 -
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 · 131 阅读 · 0 评论 -
基于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 · 365 阅读 · 0 评论 -
移动端适配方案-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 · 120 阅读 · 0 评论