- 博客(39)
- 资源 (9)
- 收藏
- 关注
RSS订阅原创 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
原创 前端本地测试服务器
首先需要创建一个文件夹,利用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
原创 作用于插槽语法
了解： 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
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人