前端
我是个小垃圾lj
认认真真上班,这根本不叫赚钱,这是劳动换取报酬。只有偷懒,在上班的时候划水摸鱼,你才从你老板那赚到了钱。
展开
-
Vue全屏插件使用
Vue全屏插件使用(screenfull)一个用于全屏显示的简单Vue.js组件。安装 (Installation)$ npm i screenfull用法 (Usage)1.封装全屏显示的插件 src/components/ScreenFull/index.vue<template> <!-- 放置一个图标 --> <div> <!-- 放置一个svg的图标 --> <svg-icon icon-class="fu原创 2021-07-13 14:37:20 · 270 阅读 · 0 评论 -
Vue前端实现打印
Vue前端实现打印项目中遇到需要打印的需求,摸索的两种方法1.使用vue+iframeiframe结构 <!-- :src="httpUrl + iframeUrl" iframe链接的地址 --> <div ref="print" id="print" > <iframe id="frame" :src="httpUrl + iframeUrl" frameborder原创 2021-07-12 15:08:55 · 1005 阅读 · 0 评论 -
RBAC的权限设计思想
RBAC的权限设计思想1.传统的权限设计首先,我们先了解下什么是传统的权限设计从上面的图中,我们发现,传统的权限设计是对每个人进行单独的权限设置,但这种方式已经不适合目前企业的高效管控权限的发展需求,因为每个人都要单独去设置权限2.RBAC的权限模型基于此,RBAC的权限模型就应运而生了,RBAC(Role-Based Access control) ,也就是基于角色的权限分配解决方案,相对于传统方案,RBAC提供了中间层Role(角色),其权限模式如下RBAC实现了用户和权限点的分离,想对原创 2021-07-09 16:19:12 · 270 阅读 · 0 评论 -
el-table滚动条样式修改
CSS3自定义滚动条样式 -webkit-scrollbar当内容超出容器时,容器会出现滚动条,其自带的滚动条有时无法满足我们审美,那么我们可以通过css伪类来实现对滚动条的自定义。首先我们要了解滚动条。滚动条从外观来看是由两部分组成:1,可以滑动的部分,我们叫它滑块2,滚动条的轨道,即滑块的轨道,一般来说滑块的颜色比轨道的颜色深。1.滚动条的css样式主要有三部分组成::-webkit-scrollbar 定义了滚动条整体的样式::-webkit-scrollbar-thumb 滑块部分原创 2021-07-07 09:15:42 · 2063 阅读 · 0 评论 -
图片地址生成二维码
图片地址生成二维码我们想完成这样一个功能,当我们拥有头像地址时,将头像地址生成一个二维码,用手机扫码来访问1.安装依赖$ npm i qrcode`在这里插入代码片`qrcode的用法是// dom为一个canvas的dom对象, info为转化二维码的信息QrCode.toCanvas(dom, info)2. 准备一个弹框 <el-dialog title="二维码" :visible.sync="showCodeDialog" @opened="showQrCode"原创 2021-07-05 18:07:00 · 560 阅读 · 0 评论 -
Web前端腾讯云代管上传图片
Web前端腾讯云代管上传图片1.二次封装el-upload 上传组件2. 新建组件3. 进行组件的封装3.1组件的样式和结构3.2 实例化 Cos包3.2 data中的数据定义3.3 对方法逐一实现如果没有腾讯云的点击进入配置教程整个组件源代码1.二次封装el-upload 上传组件JavaScript SDK 需浏览器支持基本的 HTML5 特性(支持 IE10 以上浏览器),以便支持 ajax 上传文件和计算文件 MD5 值。安装依赖$ npm i cos-js-sdk-v5 --save原创 2021-07-05 16:45:59 · 227 阅读 · 0 评论 -
二次封装上传组件到腾讯云代码
<!-- * @Description: 上传图片组件 * @Version: @1.0.0 * @Autor: YJY * @Date: 2021-07-01 14:10:33 * @LastEditors: YJY * @LastEditTime: 2021-07-05 14:36:58--><template> <div> <!-- 放置一个上传组件 --> <!-- action这里不写上传地址 因为我们是调原创 2021-07-05 16:44:28 · 155 阅读 · 0 评论 -
导入,导出,模板下载Excel复制即用
导入,导出,模板下载Excel复制即用本文章就是和复制即用,只需要修改对应的参数就行1.导入组件封装excel导入功能需要使用npm包xlsx,所以需要安装xlsx插件1.1 安装依赖npm i xlsx1.3 引入vue-template-admin封装好的上传组件下载地址可能会更新 下面可以直接复制样式可以随便修改 js部分就不要动直接用 如果出错不需要检查这里的问题<template> <div> <input ref="excel原创 2021-07-01 10:41:03 · 279 阅读 · 0 评论 -
将列表型的数据转化成树形数据
将列表型的数据转化成树形数据将列表型的数据转化成树形数据 => 递归算法 => 自身调用自身 => 一定条件不能一样, 否则就会死循环首先是需要转换的列表型的数据0: {id: "1175310929766055936", pid: "", companyId: "1", name: "总裁办", code: "ZCB", managerId: null,…}1: {id: "1175311213774962688", pid: "", companyId: "1", name:原创 2021-06-29 09:20:43 · 600 阅读 · 1 评论 -
可拖拽弹框
可拖拽div 或者 el-dialog可拖拽指令1.自定义div拖拽指令/*****自定义div拖动指令 */Vue.directive('drag',{ inserted:function(el,binding){ el.onmousedown=function(e){ e.stopPropagation(); let disx = e.pageX - el.offsetLeft; let disy = e.pageY - el.offsetTop; document原创 2021-06-22 10:50:34 · 210 阅读 · 0 评论 -
Vue插件 注册常用全局方法
Vue插件 注册常用全局方法1.新建一个format.js一下是一些常用的全局方法/* * @Description: 全局格式化方法 * @Version: @1.0.0 * @Autor: YJY * @Date: 2021-06-22 09:32:51 * @LastEditors: YJY * @LastEditTime: 2021-06-22 10:10:20 */export default { install(Vue) { /** * 判断值是否为空原创 2021-06-22 10:20:15 · 454 阅读 · 0 评论 -
el-upload 仅上传一张图片
el-upload 仅上传一张图片1.el-upload组件使用 <el-upload action="#" list-type="picture-card" :auto-upload="false" :on-change="handleChange" :limit='1' :on-remove="handleRemove" :file-list="imgFilesList " >原创 2021-06-22 09:15:21 · 4746 阅读 · 0 评论 -
Vue + onlyOffice
前端 Vue + onlyOffice只是前段的基本使用1.引入后端配置好的office服务器 <script type="text/javascript" src="http://localhost:8081/web-apps/apps/api/documents/api.js"></script>2.占位元素 <div style="height: 700px;" id="table_excel"> <div id="placeho原创 2021-06-22 08:21:47 · 4782 阅读 · 2 评论 -
前端文件导出(2)
前端文件导出(2)前后端操作1.后端提供导出接口接口demo接口地址: /api-linzhang/oneAndOne/forestRanger/export请求方式: GET请求参数:省略2.前端操作 /** * 表格导出 */ exportExcel:function(){ // 参数 不重要 let params = { district:that.areaCode,原创 2021-06-21 17:29:54 · 92 阅读 · 0 评论 -
web前端表格导出(1)
前端文件导出纯前端操作和前后端操作1.文件导出web 前端,在firefox 和Chrome 中使用 a 标签(或者js)就可以实现,如下:其中download 设置下载的文件名。href 加上 data:text/txt;charset=utf-8 分别设置点击link 是下载文件, 编码是utf-8 . 这个逗号后面的就是保存在文件中的内容了如果文件导出的是一个table,需要解决的问题?问题1: 如何分行, 分列?理论上 : 分列使用 “,” 号分割, 分行用 \n。可以用以上原创 2021-06-21 16:42:20 · 244 阅读 · 0 评论 -
Blob.js and Export2Excel.js 文件下载
Blob.js and Export2Excel.jsBlob.js/* eslint-disable *//* Blob.js * A Blob implementation. * 2014-05-27 * * By Eli Grey, http://eligrey.com * By Devin Samarin, https://github.com/eboyjr * License: X11/MIT * See LICENSE.md *//*global self, un原创 2021-06-21 15:08:58 · 798 阅读 · 0 评论 -
前端项目部署
前端项目部署一、前期工作前端项目打包 npm run build安装部署项目工具下载地址:https://www.netsarang.com/zh/all-downloads/二、部署项目1.使用Xshell2.点击 文件-新建 填写对应配置 下面是我的配置(仅供参考)3.输入用户名密码4.使用命令进入对应文件5.使用Xftp上传项目界面如下将前端打包好的项目 拉到右侧如果之前打包过就直接覆盖...原创 2021-06-08 14:44:05 · 83 阅读 · 0 评论