- 博客(43)
- 收藏
- 关注
RSS订阅原创 动态修改当前页面url 后面拼接参数
场景：在进去页面后，在当前页面操作之后，由于url 参数不会改变，刷新页面之后会返回初始值页面。再刷新保留当前页面做刷新就要动态修改url 参数。
2022-11-25 10:03:32
724
1
原创 indexDB本地存储
HTML5新增了一种被称为indexDB的数据库，indexDB数据库是一种存储在客户端本地的NOSQL数据库。indexDB是一个对象数据库，而不是关系数据库。1、创建（打开）本地数据库// indexedDB.open("数据库名"，版本号);var request = indexedDB.open("mydb", 1.0);// onerror 事件表示请求失败 触发的事件request.onerror = function () { console.log('创建或打开数据库失
2022-05-30 10:57:07
1223
原创 vue npm 装包失败解决办法
在使用npm install问题npm ERR! code ERESOLVEnpm ERR! ERESOLVE unable to resolve dependency treenpm ERR!npm ERR! While resolving: ruoyi@3.4.0npm ERR! Found: webpack@5.35.0npm ERR! node_modules/webpacknpm ERR! peer webpack@"^4.0.0 || ^5.0.0" from html-we
2022-02-18 13:25:24
1842
原创 echart 配置
显示echarts数据千位符<template> <div id="vulnerabilityLevel" class="vulnerabilityLevel" /></template><script>import * as echarts from 'echarts'import { reportByLevel } from '../../../api/coraxObj'export default { name: 'Vulnerab
2021-10-09 17:04:52
95
原创 VUE 生成二维码插件
1. qrcodejs2安装 qrcodejs2 （注意：安装的是qrcodejs2，不要安装qrcode —> 会报错）npm install qrcodejs2 --save页面中引入<script> import QRCode from "qrcodejs2" export default { data(){ link: 'https://baidu.com' }, co
2021-09-26 11:54:00
162
原创 vue复制到剪切板
VUE 中实现复制到剪切板，在电脑任何位置可复制功能1、环境vue 、 clipboard2、使用步骤1 安装依赖包 npm install vue-clipboard2 --save2.引入安装包1、 脚手架搭建的用户import Vue from 'vue'import VueClipboard from 'vue-clipboard2'Vue.use( VueClipboard )2、独立使用( 注意：vue-clipboard2 需要再vue.js后面引
2021-09-26 11:46:45
1600
原创 MD5、Base64、jsencrypt， sha256 加密
1、前端MD5加密1.1 npm 安装js-md5 npm install js-md51.2 项目中引入 MD5// vue 项目中引入 js-md5import md5 from "js-md5";// script 中引入 js-md5<script src="~/js-md5"></script>1.3 项目中使用MD5加密方法// 123456 ==> e10adc3949ba59abbe56e057f20f88
2021-09-26 11:40:48
441
原创 Vue.directive 自定义指令
1、简介：除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。有的情况下，仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。问题：当页面加载时，该元素将获得焦点 (注意：autofocus 在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', {
2021-09-26 11:30:19
58
原创 vue Bus总线
vue中我们经常遇到组件之间的通信，通常的通信方式有 父 → 子、子 → 父、兄弟组件 之间的通信。通常处理方式如下：父 → 子：props传递数据 / vuex；**子 → 父：bus事件总线 / vuex;**兄弟组件：bus事件总线 / vuex;兄弟组件：bus事件总线 / vuex;1、创建事件总线创建一个名为 bus.js 的JS文件import Vue from 'vue';export default new Vue();或者直接在项目中的 main.js 初始化 Bu
2021-09-26 11:22:52
319
原创 VUE中的 provide 和 inject
使用provide和inject的属性，然而自己在以往的VUE开发中基本没有使用过。provide / inject 是在 VUE 2.2.0 的版本新增的类型：provide: Object | () => Objectprovide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 property。在该对象中你可以使用 ES2015 Symbols 作为 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作inject: A
2021-09-26 11:18:37
289
原创 vue下载数据流文件
日常开发中我们常常需要下载文件，但是后端返回给前端需要下载的文件大致有两种：一种url链接，另一种文件流的形式；1、前端下载url链接文件方法1、通过a标签的href直接下载<a href="https://www.baidu.com/img/bd_logo1.png" download="logo"></a>方法2、通过 window.open(url) 直接下载window.open("https://www.baidu.com/img/bd_logo1.png")
2021-09-26 11:14:42
586
原创 常用 git 命令汇总
1、git 配置git config --global user.name 'XXXX' //设置全局用户名git config--global user.email 'XXXXX' //设置全局用户邮箱2、git 基本操作（ 表示任意字符）*git init // 创建仓库git add * //将文件加入暂存区git commit -m 'XXXXX' //将暂存区的文件提交到仓库中git status // 查看状态gi
2021-09-26 11:09:16
86
原创 vue_axios请求封装、异常拦截统一处理
1、前端网络请求封装、异常统一处理vue中采用axios处理网络请求，避免请求接口重复代码，以及各种网络情况造成的异常情况的判断，采用axios请求封装和异常拦截操作；axios 请求封装// 引入axios文件包import axios from 'axios'// POST 方法封装 (参数处理)export const postRequest = (url, params) => { return axios({ method: 'post', url: u
2021-09-26 10:57:55
498
原创 Vue实现动态路由
通常我们在vue项目中都是前端配置好路由的，但在一些项目中我们可能会遇到权限控制，这样我们就涉及到动态路由的设置了。动态路由设置一般有两种：(1)、简单的角色路由设置：比如只涉及到管理员和普通用户的权限。通常直接在前端进行简单的角色权限设置(2)、复杂的路由权限设置：比如OA系统、多种角色的权限配置。通常需要后端返回路由列表，前端渲染使用1、简单的角色路由设置（1）配置项目路由权限// router.jsimport Vue from 'vue'import Router from 'vu
2021-09-26 10:45:36
391
原创 vue token解析 解析token中携带的数据
1. 安装插件 npm install jwt-decode --save2. 在需要使用的地方引入 import jwtDecode from 'jwt-decode' const code = jwtDecode(res.data.data.accessToken) console.log(code)// 就可以解析成功了====================== over ===========================...
2021-09-17 17:34:58
1121
原创 vue 导出pdf
使用html2canvas和jspdf插件实现这个方式是通过html2canvasl来把html页面转换成图片，然后再通过jspdf将图片转换为pdf文件这个方法有个非常不好的缺点生成的pdf质量不高，画面有些模糊，失真严重如果在分页的地方有图片的话，可能会把图片也给你一分为二了1. 安装插件加粗样式先安装第一个 html2canvas 插件，这个作用是实现将 html 页面转换成 图片在你的控制住台输入下面指令npm install --save html2canvas然后再安
2021-09-14 11:10:48
148
原创 数据可视化大屏适配方案（vue+px2rem）
数据可视化大屏适配方案（vue+px2rem）项目构建：基于vue-cli3构建，使用postcss-px2rem px2rem-loader进行rem适配实现原理：每次打包，webpack通过使用插件postcss-px2rem，帮我们自动将px单位转换成rem单位前方有坑：UI框架部分组件使用JavaScript将css作为内联样式直接写在html标签内，打包适配时不会读取相关css,所以要配置相关样式，在style中需要" !important "进行样式覆盖。1.安装postcss-px
2021-09-10 11:19:51
560
原创 动态路由 vue
通常我们在vue项目中都是前端配置好路由的，但在一些项目中我们可能会遇到权限控制，这样我们就涉及到动态路由的设置了。动态路由设置一般有两种：(1)、简单的角色路由设置：比如只涉及到管理员和普通用户的权限。通常直接在前端进行简单的角色权限设置(2)、复杂的路由权限设置：比如OA系统、多种角色的权限配置。通常需要后端返回路由列表，前端渲染使用1、简单的角色路由设置（1）配置项目路由权限// router.jsimport Vue from 'vue'import Router from 'vu
2021-09-10 11:14:34
323
原创 多层级 复选框 勾选 vue
html相关代码如下：<div class="intent-course-wrapper"> <div class="class-category" v-for="(firItem, firIndex) in tabledata" :key="firIndex"> <div class="intent-course-header"> <el-checkbox v-model="firItem.mychecked" @chang.
2021-09-07 17:01:05
333
原创 Vue渲染Markdown数据
Vue渲染Markdown数据今天在找基于Vue的markdown编辑器时，找到了mavonEditor模块，本来想着通过抽离抽出展示Markdown数据相关的代码，结果忙活了一阵，突然看见文档有提示怎么只展示Markdown数据仅用作展示可以设置props: toolbarsFlag: false , subfield: false, defaultOpen:“preview”一 ，前言由于需要，要把Markdown数据渲染在页面上。刚开始在网上找了一大圈，要么只能把md文件通过插件转换为vu
2021-08-24 19:26:49
203
原创 rem 适配 pc
1.安装依赖npm install postcss-pxtorem -D2.设置规则（更改postcss.config.js,该文件为使用vue-cli3自动创建的文件）module.exports = { plugins: { 'autoprefixer': { browsers: ['Android >= 4.0', 'iOS >= 7'] }, 'postcss-pxtorem': { rootValue: 16,//结果为：设计
2021-08-06 18:57:21
102
原创 pxtorem 做适配
安装所需要的依赖包npm i amfe-flexible -Snpm i postcss-pxtorem -Damfe-flexible来根据屏幕动态改变根元素font-size，postcss-pxtorem把代码中px转为rem;在项目根目录建vue.config.jsvue.config.js内容：module.exports = { css: { loaderOptions: { postcss: { plugins: [ re
2021-08-06 17:24:20
206
原创 vue-admin-element 后台菜单加载 动态路由
修改src/router/index.js文件import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)/* Layout */import Layout from '@/layout'export const constantRoutes = [] // 没有权限的页面export const asyncRoutes = [] // 后台加载的菜单 添加 const createRouter = () =
2021-05-07 18:07:14
283
原创 WebSocket
let Socket = ''let setIntervalWesocketPush = null/** * 建立websocket连接 * @param {string} url ws地址 */export const createSocket = url => { Socket && Socket.close() if (!Socket) { console.log('建立websocket连接') Socket = new WebSocket
2021-05-07 17:44:27
100
原创 .eslintrc.js 配置
module.exports = { root: true, parserOptions: { parser: 'babel-eslint', sourceType: 'module' }, env: { browser: true, node: true, es6: true, }, extends: ['plugin:vue/recommended', 'eslint:r
2021-04-25 09:39:51
1181
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人