自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(39)
  • 资源 (9)
  • 收藏
  • 关注

原创 JS 判断用户设备是移动端还是PC端

【代码】JS 判断用户设备是移动端还是PC端。

2023-06-17 11:51:47 1208

原创 mapbox总结

mapbox

2022-12-26 12:20:47 5471 4

原创 V3加ts上的vue-hooks-puls封装

【代码】V3加ts上vue-hooks-puls封装。

2022-11-17 17:26:37 1848

原创 map-box地图点击图标高亮事件

【代码】map-box地图点击图标高亮事件。

2022-10-05 19:47:53 1126

原创 3D饼图pie,Ecahrts插件

首先确保在项目中引入了echarts和echarts-gl<template> <div class="water-eval-container"> <div id="cityGreenLand-charts" class="cityGreenLand-charts"> </div> </div></template><script>import echarts from 'e...

2021-12-27 16:20:19 2114 4

原创 饼图提示框自动播放案例pie简单易懂

先引入echars插件<template> <div id="ed-pie"></div></template><script>export default { data() { return { data: [ { value: 1048, name: 'Search Engine' }, { value: 735, name: 'Direct' }, {

2021-12-27 16:05:02 485

原创 给dom元素添加背景水印

/** * @Description:生成水印 * @Author: pancj * @Date: 2021-08-18 */export function addWatermark(element, config) { // 获取元素的坐标 function getOffset(el) { if (el.offsetParent) { return { x: el.offsetLeft + getOffset(el.offsetParent).x,.

2021-12-03 17:14:30 754

原创 Echarts 自定义指示框

option中tooltip是提示框! tooltip: { trigger: "axis", axisPointer: { type: "shadow", }, backgroundColor: null, borderWidth: 0, textStyle: { align: "left", ...

2021-12-02 10:28:26 970

原创 Echarts x轴文本内容太长解决办法

Echarts x轴换行

2021-11-30 09:37:25 286

原创 前端本地测试服务器

首先需要创建一个文件夹,利用vscode打开,下载4个相应的插件yarn add koa koa-static koa2-connect-history-api-fallback koa2-proxy-middleware下边如图所示:然后创建app.js在里面引入配置一下:把打包后的html平级的整个目录复制到public目录下.然后启动项目node app.js输入端口号就可以了....

2021-10-28 10:05:18 285

原创 vue2无限滚动触发事件

详细操作:父盒子引入组件-放到浏览器的最底端-里面传个(show)的Boolean值防止发送请求失败-还有个change事件,触底后会触发这个触底事件,表示可以发送请求了,发送请求前先把传的(show)改为fasle,数据请求回来再给他改为true代码:<template> <div ref="srcoll"></div></template><script>export default {...

2021-10-10 18:11:20 379

原创 报错: error in ./node_modules/@vueuse/core/index.mjs

如图:解决办法:在vue.config.js里面配置一下:module.exports = { configureWebpack: { module: { rules: [{ test: /\.mjs$/, include: /node_modules/, type: 'javascript/auto' }] } }}

2021-09-27 10:26:52 9627 6

原创 员工权限管理之-----左侧导航栏显示

1. RBAC权限设计思想 管理员给用户分配角色 再给角色分配权限点, 管理员退出登录 角色登录显示自己能使用的权限 2.权限应用 - 控制动态路由(导航菜单) 拿到当前用户可访问的所有菜单标识 拿到本地所有的动态路由列表 俩份数据配合做过滤处理得到当前用户所有可以访问的动态路由表 将路由表添加到路由系统中,让路由可被访问 将路由表添加到导航菜单里显示到左侧 开始写代码了: 1. 找到当前用户个人信息接口,把...

2021-09-14 11:58:06 966

原创 vue中axios请求拦截器和响应拦截器的大至步骤

大致操作都差不多import axios from 'axios'import store from '@/store'import router from '@/router'// 创建axios实例const service = axios.create({ // process.env.VUE_APP_BASE_API可以拿到.env文件里面的值 baseURL: process.env.VUE_APP_BASE_API, // url = base url + request

2021-09-12 20:03:36 295

原创 vue中的路由守卫router.beforeEach

router.beforeEach ( to , from , next )三个参数的意思to 要去哪里的路径from 从哪里来的路径next 放行,就是我们可以让他哪里都去 next(),或者强制去的路径 next('你想要去的路径')// 权限控制import router from '@/router'//路由对象import store from '@/store'//vuex对象const whiteList = ['/login', '404']//称为白名单,意思就是

2021-09-12 19:21:38 725

原创 js全屏事件,进入全屏,退出全屏操作

上面是全面化方案,下面还有个简单的实现功能1.进入全屏function launchFullscreen(element) { if (element.requestFullscreen) { element.requestFullscreen() } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen() } else if (element.msRequestFullscreen

2021-09-12 19:12:10 2494 1

原创 路由传参取值-------推荐使用query

接下来都是一图片的形式总结不多!实例:

2021-09-10 21:05:42 106

原创 作用于插槽语法

了解: 1、父组想把某些数据显示在子组:父亲给子组件通信 2、父组想控制子组件某些部分HTML结构:插槽 3、父组(子组件内部有些初始化数据),既要控制结构,又要显示子组件内数据作用域插槽(把子组件数据反出来)定义子组件:<template> <div class="shi"> <h1>诗的题目</h1> <d...

2021-09-10 20:54:59 81

原创 实现深拷贝方法---------浅拷贝简单理解

const data = { name: 'cp', age: 20, list: [{ height: 180 }], info: { msg: '123' } } function deepCopy(source) { if (!isObject(source)) return source //如果不是对象的话直接返回 let target = Array.isArray(source) ? [] :...

2021-09-10 20:11:40 86

原创 注册全局组件,必要步骤

<!--vue插件page-tools->全局组件核心api:Vue.component('page-tools', 导入的组件名)一开始:main.js只做初始化的操作为了保持main.js精简->插件化的形式完成全局注册定义importPageToolsfrom'vue文件路径'1.对象定义exportconstplugin...

2021-09-10 19:16:50 251

原创 使用现成的excel导出组件,也是在vue-element-admin上面抽离出来的代码,上面都有.时间问题,我就直接复制代码了

是它里面的这个路由模块Export2Excel.js我就直接复制代码了,里面有需要下功夫找找里面需要下载一个工具包yarn add file-saver --save 或者 npm install file-saver --save/* eslint-disable */import { saveAs } from 'file-saver'import XLSX from 'xlsx'function generateArray(tabl...

2021-09-10 18:07:42 231

原创 浏览器导入excel文件,封装成组件

目前的方案是第一种,前端主导 首先打开gitee,因为github相对比较慢很多(因为国外的网站嘛) 打开gitee搜索 vue-admin-element把它的项目拉下来,下载一下依赖,然后让项目跑起来,我们要用人家一部分代码提取出来,定位到需要代码区域给复制过来因为他这个项目中需要下载相应的xlsx包 我们下载一下yarn add xlsx -S 或者 npm install xlsx ...

2021-09-10 17:52:16 279

原创 上传本地图片,回显自己本地图片的url地址

前期工作:需要在腾讯云注册一个账号,需要实名认证,到时候会用到里面的COS对象存储下面是图片给大家展示操作:如下:创建完成后,需要吧地址记住,等会要用前边配置挺多,耐心点配置下边是秘钥配置可配置完了,开始复制代码吧下载工具包:cos-js-sdk-v5npm i cos-js-sdk-v5 --save 或者 yarn addcos-js-sdk-v5 --save我们抽离出来一个组件专门做上传数据 我的组件...

2021-09-09 17:18:33 1960

原创 vue中把url(可以是图片url)地址生成二维码步骤!

先安装生成二维码的工具包yarn add qrcode -S 或者 npm install qrcode -S我们先了解一下,一般做功能的时候,是点击生成二维码,先让他弹框我这里用的是 Element组件我们先,生成个弹窗里面放个布画标签<canvas>准备放生成的二维码<!-- 分享展示, 预览的二维码的弹层 --><el-dialog title="二维码" :visible="showCodeDialog" @cl...

2021-09-09 16:02:46 2963

原创 数组改为树形结构,便于组件铺页面,封装函数思路流程

前提思路:代码实现:export function tranListToTreeData(list) { // 最终要产出的数组 const treeList = [] // 所有项都使用对象存储起来 const map = {} list.forEach(item => { // 给每个对象添加一个children数组 if (!item.children) { item.children = [] } // map.

2021-09-05 11:02:12 55

原创 token过期跳转到登录页面,登录成功后又跳回原来的操作页面

// 在相应拦截器后面写以下代码if (error.response.status === 401) { // 身份过期 // token续签方式1: 去登录页重新登录, token无用, 清掉-确保路由守卫if进不去 store.commit('setToken', '') console.log(router.currentRoute.fullPath) // router.currentRoute.fullPath,获取跳转前的地址,放到登录页面地址的后面 .

2021-08-24 21:17:55 5914 2

原创 美化页面代码--(如果浏览器页面有代码片段,可以添加高亮美化)

英文文档(更全): https://highlightjs.readthedocs.io/en/latest/index.html中文文档: https://fenxianglu.cn/highlight.html1 . 下载此插件到项目中==一定要带.js名字==yarn add highlight.js -S2 . 在main.js 引入即可import hljs from 'highlight.js' // hljs对象import 'highlight.js/s.

2021-08-24 20:23:19 508

原创 封装本地储存,便于修改

代码如下:const Storage = { // 存 set (key, val) { window.localStorage.setItem(key, JSON.stringify(val)) }, // 取 get (key) { return window.localStorage.getItem(key) }, // 删 remove (key) { window.localStorage.removeItem(key) }}e

2021-08-21 14:24:33 68

原创 机器人对话,返回内容滚动到可视区scrollIntoView()

代码如下: // 滚动到页面底部 scrollToBottom () { // 获取到所有的聊天 原生标签 项 // const chatItem = document.querySelectorAll('.chat-item') 原生jsdom标签 const chatitem = this.$refs.chatitem // 获取到最后一项对应的 DOM 元素 const lastItem = chatitem[cha...

2021-08-20 01:50:01 181

原创 上传头像,后台接口需要文件对象格式,方法分享

接口代码如下// 修改头像const updatePhotoAPI = (form) => { return request({ url: '/v1_0/user/photo', method: 'PATCH', data: form // 如果你的请求体内容是表单对象, 浏览器会自动携带请求头Content-Type为multipart/form-data })}这是调用图片下边还有代码代码如下 // <input.

2021-08-19 23:38:33 265

原创 设置输入的关键字高亮(输入的内容和后台取来的内容区分开)

// 创建一个js文件,导出以下内容// str 是后台获取的内容, target 是用户输入的内容// i 是不分大小写, g 是校验全部.export const lightFn = (str, target) => { const reg = new RegExp(target, 'ig') // new RegExp固定写法 return str.replace(reg, (match) => { // match是关键字匹配的值(尽量保持原样) retu.

2021-08-12 21:33:22 150

原创 Vue脚手架 之 input自动获取焦点 全局设置自定义指令

import Vue from 'vue'// 调用时直接在input或textarea标签上添加v-focus指令Vue.directive('focus', { //全局注册自定义指令 inserted (el) { if (['INPUT', 'TEXTAREA'].indexOf(el.tagName) !== -1) { el.focus() } else { let node = el.querySelector('input') .

2021-08-08 09:37:20 270

原创 下载ESLint插件以及个人的setting.json配置(超好用)

以下是setting.json配置{ //主题设置 "workbench.colorTheme": "Monokai", // 默认编辑器字号 "editor.fontSize": 14, //是否自动换行 "editor.wordWrap": "on", // tab几个缩进 "editor.tabSize": 2, // 文件自动保存 "files.autoSave": "afterDelay", ...

2021-08-06 23:56:04 726

原创 vscode使用格式化代码时取消自动添加的符号

// 在用户配置中添加"vetur.format.defaultFormatterOptions": { "prettier": { // 格式化不加分号 "semi": false, // 格式化为单引号 "singleQuote": true } }, // 在方法括号之间插入空格 "javascript.format.insertSpaceBeforeFunctionParenthesis": true...

2021-08-02 17:47:02 841

原创 前端必备插件与主题(Vs code插件与设置)

Vs code插件{ "liveServer.settings.donotShowInfoMsg": true, "editor.fontSize": 20, "editor.fontFamily": "Consolas, 'Courier New', monospace", "emmet.variables": { "lang": "zh-CN" }, // #值设置为true时,每次保存的时候自动格式化;值设置为fa...

2021-07-28 22:05:35 545

原创 Vue设置全局指令之随机背景颜色

// 全局指令:背景色就会随机变:在任何组件内都可以使用Vue.directive("bgc", { // 使用时给标签添加v-bgc就可以了 inserted(el) { let a = () => Math.floor(Math.random() * 256); el.style.backgroundColor = `rgb(${a()},${a()},${a()})`; // 拓展:给dom注册事件 },});// 拿走直接在脚手架中用...

2021-07-28 20:19:34 559

原创 <拖拽移动案例>之Vue设置全局指令

// 哪个盒子需要移动给哪个盒子的标签添加v-moveVue.directive("move", { // inserted指令所在标签,被插入网页就触发 inserted(el) { // el是需要拖动盒子的标签 let father = el.parentNode; // 获取当前页面宽度减去盒子宽高度 let mx_ = father.offsetWidth - el.offsetWidth; let my_ = father.offsetHeig.

2021-07-28 20:14:39 103

原创 原生JS上传图片案例

<input type="file" name="" id=""> <!-- <h1></h1> --> <img src="" alt=""> <script> let dian = document.querySelector('input') dian.onchange = function () { //设置一个变量获取文件 ...

2021-07-28 15:17:22 98

原创 本地储存与本地删除----localStorage.setItem与localStorage.removeItem----里边都有注释

<input type="text" name="" id="q2"> <input type="checkbox" name="" id="q1">用户账号 <script> let q1 = document.querySelector('#q1') let q2 = document.querySelector('#q2') // if判断本地储存是否有name这个数据。如果有,执行里面的内容...

2021-07-28 14:56:13 2151

ChatGPT题词,可以翻译成中文跟GPT对话

ChatGPT题词,可以翻译成中文跟GPT对话

2023-08-31

apijison无调用接口方法

无后端

2022-12-27

Sourcetree和服务器可视化工具

Sourcetree和服务器可视化工具

2022-02-17

yarn命令使用.txt.txt

yarn命令使用.txt.txt

2021-12-07

node命令大全.txt

node命令大全.txt

2021-12-07

git使用方法大全.txt

git使用方法大全.txt

2021-12-07

vue笔记更新2023-2-6

vue笔记更新2023-2-6

2021-11-30

bookmarks_2021_11_13.html

bookmarks_2021_11_13.html

2021-11-13

小程序资料之项目资料大全

小程序资料之项目资料大全

2021-10-26

用于文件打包后,启动的本地服务

下载解压完记得, 更改一下请求地址

2021-09-02

vue2-3笔记2023-8-31

自用笔记想要拿走,前端笔记

2021-08-27

2024-03-22更新笔记vue

适用于初学前端者,建议自己参考,然后化为自己的笔记

2021-07-28

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除