我是个小垃圾lj-CSDN博客

原创 Vue全屏插件使用

Vue全屏插件使用（screenfull）一个用于全屏显示的简单Vue.js组件。安装（Installation）$ npm i screenfull用法（Usage）1.封装全屏显示的插件 src/components/ScreenFull/index.vue<template>  <div>  <svg-icon icon-class="fu

2021-07-13 14:37:20 287

原创 Vue前端实现打印

Vue前端实现打印项目中遇到需要打印的需求，摸索的两种方法1.使用vue+iframeiframe结构  <div ref="print" id="print" > <iframe id="frame" :src="httpUrl + iframeUrl" frameborder

2021-07-12 15:08:55 1020

原创 RBAC的权限设计思想

RBAC的权限设计思想1.传统的权限设计首先，我们先了解下什么是传统的权限设计从上面的图中，我们发现，传统的权限设计是对每个人进行单独的权限设置，但这种方式已经不适合目前企业的高效管控权限的发展需求，因为每个人都要单独去设置权限2.RBAC的权限模型基于此，RBAC的权限模型就应运而生了，RBAC(Role-Based Access control) ，也就是基于角色的权限分配解决方案，相对于传统方案，RBAC提供了中间层Role（角色），其权限模式如下RBAC实现了用户和权限点的分离，想对

2021-07-09 16:19:12 273

原创 el-table滚动条样式修改

CSS3自定义滚动条样式 -webkit-scrollbar当内容超出容器时，容器会出现滚动条，其自带的滚动条有时无法满足我们审美，那么我们可以通过css伪类来实现对滚动条的自定义。首先我们要了解滚动条。滚动条从外观来看是由两部分组成：1，可以滑动的部分，我们叫它滑块2，滚动条的轨道，即滑块的轨道，一般来说滑块的颜色比轨道的颜色深。1.滚动条的css样式主要有三部分组成::-webkit-scrollbar 定义了滚动条整体的样式::-webkit-scrollbar-thumb 滑块部分

2021-07-07 09:15:42 2073

原创图片地址生成二维码

图片地址生成二维码我们想完成这样一个功能，当我们拥有头像地址时，将头像地址生成一个二维码，用手机扫码来访问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 568

原创 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 231

原创二次封装上传组件到腾讯云代码

<template> <div>  <!-- action这里不写上传地址因为我们是调

2021-07-05 16:44:28 164

原创腾讯云存储桶配置教程

腾讯云Cos配置教程1.我们必须先拥有一个腾迅云的开发者账号(注意腾讯云的广告电话)2.实名认证选择个人认证填写个人身份信息扫描二维码授权点击领取免费产品选择对象存储COS到这一步，账号的部分就操作完毕，接下来，我们需要来创建一个存储图片的存储桶登录对象存储控制台，创建存储桶。设置存储桶的权限为公有读，私有写设置cors规则这里要注意如果出现跨域问题就是这里没有配置好到这里，我们的腾讯云存储桶就设置好了。...

2021-07-05 16:41:38 2952

原创导入,导出，模板下载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 280

原创将列表型的数据转化成树形数据

将列表型的数据转化成树形数据将列表型的数据转化成树形数据 => 递归算法 => 自身调用自身 => 一定条件不能一样，否则就会死循环首先是需要转换的列表型的数据0: {id: "1175310929766055936", pid: "", companyId: "1", name: "总裁办", code: "ZCB", managerId: null,…}1: {id: "1175311213774962688", pid: "", companyId: "1", name:

2021-06-29 09:20:43 609 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 213

原创 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 455

原创 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 4894

原创 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 4849 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 94

原创 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 253

原创 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 804

原创前端项目部署

前端项目部署一、前期工作前端项目打包 npm run build安装部署项目工具下载地址：https://www.netsarang.com/zh/all-downloads/二、部署项目1.使用Xshell2.点击文件-新建填写对应配置下面是我的配置（仅供参考）3.输入用户名密码4.使用命令进入对应文件5.使用Xftp上传项目界面如下将前端打包好的项目拉到右侧如果之前打包过就直接覆盖...

2021-06-08 14:44:05 85

weixin_56290799的博客