- 博客(45)
- 收藏
- 关注
RSS订阅转载 fetch 请求
fetch 是 XMLHttpRequest 的升级版，使用js脚本发出网络请求，但是与 XMLHttpRequest 不同的是，fetch 方式使用 Promise，相比 XMLHttpRequest 更加简洁。所以我们告别XMLHttpRequest，引入 fetch 如何使用？fetch() 是一个全局方法，提供一种简单，合理的方式跨网络获取资源。它的请求是基于 Promise 的，需要详细学习 Promise ，请点击《 Pr......
2022-06-22 18:26:53
948
原创 js懒加载图片
当用户什么时候想看我在加载后面的东西概括：懒加载其实就是延时加载，即当对象需要用到的时候再去加载。实现原理：首先你要有很多个第一张用来加载的图片，加载完毕之后显示后面所需的图片实现：1.加载load图片2.判断哪些图片要加载3.隐形加载图片4.替换真图片Htmlimg中有一张真图片和一张假图片，我们得用先用假图片进行加载，然后用真图片去替换，下图中假图片为左侧，真图片为右侧...
2022-06-22 18:00:08
232
原创 Promise详解
promise是一个对象，从它可以获取异步操作的消息。有all、race、reject、resolve这几个方法，原型上有then、catch等方法。Promise的两个特点：状态的缺点：无法取消Promise，一旦新建它就会立即执行，无法中途取消。如果不设置回调函数，Promise内部抛出错误，不会反应到外部。当处于pending状态时，无法得知目前进展到哪一阶段。Promise的优点Promise的缺点语法：let p = new Promise( (resolve,reject)=>{//resolv
2022-06-22 10:30:28
888
原创 Web Uploader 分片上传 组件
官网下载 Web Uploader包 放入项目 static 文件夹下下载 - Web Uploader http://fex.baidu.com/webuploader/download.htmlcomponents中新增upload.vue<template> <section class="content"> <div class="container"> <div class="alert ale..
2022-05-27 11:21:13
233
原创 Electron 自定义最小化、最大化、关闭、可拖拽
background.js 中 引入 ipcMain 在createWindow中 BrowserWindow下方新增 最小化 ,最大化,关闭事件//引入ipcMain import { app, protocol, BrowserWindow, ipcMain } from 'electron' ipcMain.on('min', e => win.minimize()); ipcMain.on('max', e => win.maximize()); ipc...
2022-05-27 11:03:32
2803
原创 electron + vue 桌面端应用
创建vue项目在项目目终端中运行命令：vue add electron-builder选择最新版vue add electron-builder下载electron会下载失败，使用淘宝镜像下载:cnpm i electron下载完成后在package.json文件中会增加几个包,以及运行命令自动新增background.js文件 在package.json文件中引入background.js将一下内容替换backgroun.js文件内容'use strict'...
2022-05-27 10:48:56
614
转载 前端面试题
简答题1、什么是防抖和节流？有什么区别？如何实现？参考答案防抖触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间思路：每次触发事件时都取消之前的延时调用方法function debounce(fn) { let timeout = null; // 创建一个标记用来存放定时器的返回值 return function () { clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉.
2022-05-06 15:48:53
1059
原创 封装socket
import { Message } from 'element-ui'import store from '../store'let websock = null// let messageCallback = null// const errorCallback = nullvar tryTime = 0let wsUrl = 'ws://localhost:9002'// 接收ws后端返回的数据function websocketonmessage(e, successCallba.
2022-04-24 14:38:48
230
原创 vue3 实现自定义时间之内免登录
utils文件夹中新建js文件 loginAuto.jsexport function setExpire(key, value, expire) { let obj = { data: value, time: Date.now(), expire: expire }; localStorage.setItem(key, JSON.stringify(obj));}export function getExpire(key)
2022-04-15 18:12:24
969
原创 vue3 右键菜单 vue3-contextmenu
由 Vue3 和 Typescript 编写的 Contextmenu 右键菜单组件。安装npm i -S v-contextmenu@next全局使用 main.jsimport contextmenu from "v-contextmenu";import "v-contextmenu/dist/themes/default.css";Vue.use(contextmenu);按需注册import { directive, Contextmenu, Contextme
2022-04-15 13:35:50
7502
1
原创 vue3 拖拽缩放
vue3-draggable-resizable gitHub地址vue3-draggable-resizablehttps://github.com/a7650/vue3-draggable-resizable安装vue3-draggable-resizablenpm install vue3-draggable-resizable全局使用// >main.jsimport { createApp } from 'vue'import App from './App.vu
2022-04-15 13:25:38
1603
原创 封装 sessionStorage
/** * @description 存储localstorage * @param {存储的keyName} name * @param {存储的值} value */export const setStore = (name, value) => { if (!name) return; if (typeof value !== 'string') { value = JSON.stringify(value) } window.sessionStorage.s.
2022-04-15 13:09:52
410
原创 rgbTo16/16Torgb
export function setRgbTo16(str){ let reg = /^(rgb|RGB)/; if(!reg.test(str)){return;} // 将str中的数字提取出来放进数组中 var arr = str.slice(4, str.length-1).split(","); let c = '#'; for(var i = 0; i < arr.length; i++){ // Number() 函数把.
2022-04-15 13:08:23
87
原创 js 修改动态修改class css样式
//添加类名变量 let danmakuWrapper = `.danmaku-wrapper{color:${this.danmakuData.color};font-size:${this.danmakuData.height}px;background:${this.danmakuData.bgColor};line-height:1 !important;}` function addNewStyle(newStyle) {//获取样式文件 var .
2022-04-15 13:00:43
2698
原创 vue H5页面调用手机相机拍照/图库上传
//ES5的写法function Person1(name, age) {//实例属性this.name = name;this.age = age;)/原型属性Person1.prototype.publicCount = 1;//原型函数Person1.prototype.getName=function ) {return this.name;);const p1 = new Person1('kingx',12);console.log(p1.getName(); l/ king.
2022-03-30 17:21:46
4195
3
原创 input去除自动填充后样式
此方式最直接有效，全局设置，延长自动填充背景色动画的时间，对原生或封装的UI都很友好，推荐使用。input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active { -webkit-transition-delay: 99999s; -webkit-transition: color 99999s ease-out, backgrou
2022-03-04 11:47:21
405
原创 vue2 封装get post请求 加密参数
import axios from 'axios'import { getStore, removeStroe } from '@/utils/storage'import { TOKEN_NAME } from '@/config/base'import app from '@/main'import store from "../store/index"import Qs from 'qs'import Route from '@/router/index'// 加密解密import .
2022-02-11 10:32:59
1554
原创 css normalize.css
/* normalize.css */html { line-height : 1.15; /* 1 */ -ms-text-size-adjust : 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */}body { margin: 0;}article,aside,footer,header,nav,section { display: block;}h1 { fon.
2022-02-11 10:24:07
161
原创 数组, 对象的深拷贝
（1）for循环实现数组的深拷贝var arr1 = [1, 2, 3];var arr2 = [];for (var i = 0; i < arr1.length; i++) { arr2.push(arr1[i]);}arr1[0] = 4;console.log(arr1); //4, 2, 3console.log(arr2); //1, 2, 3concat 方法实现数组的深拷贝 var arr1 = [1, 2, 3]; var arr2 = arr1
2022-02-10 11:15:35
777
原创 数组改变顺序
export const ArrayUtil = { swapItems: (arr, index1, index2) => { arr[index1] = arr.splice(index2, 1, arr[index1])[0]; return arr; }, // 上移 moveUp: (arr, $index) => { if ($index == 0) { return arr;.
2022-02-10 11:00:09
805
原创 vue dialog指令 拖拽位置及弹窗宽度拖大 拖小
utils/dialogDrag.jsimport Vue from 'vue'// v-dialogDrag: 弹窗拖拽Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header') const dragDom = el.querySelector('.el-di
2022-01-27 16:55:14
602
原创 高德地图自定义信息窗体 添加marker 点击列表切换marker
绘制地图initMap() { this.map.mapObject = new AMap.Map("mapContainer", { center: [this.lng, this.lat], zoom: this.zoom, resizeEnable: true, rotateEnable: true, pitchE
2022-01-25 16:56:43
1695
原创 echarts 关系图 力引导布局
<div id="myEcharts"></div>mouted(){this.echartsData = [ { category: "本人", id: 204418, itemStyle: { color: "#ff4343" }, color: "#.
2021-12-02 17:50:02
2107
原创 vue 拖拽排序
1.vuedraggable中文文档vuedraggablehttps://www.itxst.com/vue-draggable/tutorial.htmlvuedraggable组件式封装，并且将可拖动元素放进了transition-group上面，过渡动画都比较好。//下载npm i -S vuedraggable//引入import draggable from 'vuedraggable'//注册components: { draggable },//使用 //...
2021-11-18 15:39:17
712
原创 vue.config基本配置及跨域代理
const path = require("path");const resolve = function(dir) { return path.join(__dirname, dir);};module.exports = { css: { //将组件内的CSS 提取到一个单独的Css 文件(只用在生产环境中) //也可以是一一个传递给、 extract text -webpack-p1ugin^ 的选项对象 extract: true,//Default: 生产.
2021-11-15 11:49:06
1431
原创 html转canvas base64 转 domtoimage
下载npm install --save html2canvas引入import html2canvas from "html2canvas";使用 <div class="admit book" ref="imageWrapper"></div> data() { return { dataURL: "", showImg: false, }; }, moun
2021-11-15 10:29:28
619
原创 多维数组扁平化处理
1.循环递归var arr = [[1, 2, 8, [6, 7]], 3, [3, 6, 9], 4]function getNewArr(arr) { // 定义新数组用于存储所有元素 var newArr = [] // 遍历原数组中的每个元素 for (var i = 0; i < arr.length; i++) { // 判断当前元素是否为数组 if (Array.isArray(arr[i])) { // 若当前元素为数组时，调用函
2021-11-15 10:12:06
269
原创 canvas 绘制爱心 及鼠标点击显示爱心效果
鼠标点击显示爱心效果(function (window, document, undefined) { var hearts = []; window.requestAnimationFrame = (function () { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.
2021-11-12 18:01:07
943
原创 Jquery实现鼠标滚轮滚动切换整页
引入jq<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>csshtml, body { height: 100%; } body, ul, li, a, p, div { /*慎删*/
2021-11-12 17:50:30
1633
原创 canvas 绘制五子棋
//html<canvas id="chess" width="450px" height="450px"></canvas>//js<script> var chess = document.getElementById("chess"); var context = chess.getContext('2d'); var me = true; var chessBoard = []; var over = false; // AI .
2021-11-12 17:43:47
778
原创 生成二维码JavaScript库 vue-qr可生成logo
QRCode.jsqrcode.vue - npmA Vue.js component to generate QRCode.https://www.npmjs.com/package/qrcode.vue//下载npm install --save qrcode.vue//引入import QrcodeVue from 'qrcode.vue'/注册 components: { QrcodeVue },//使用html <qrcode-vue :va
2021-11-12 14:28:54
442
原创 高德地图坐标拾取
html <div class="getCoordinate" style="margin-top: 3px" @click="coordinatePicking">坐标拾取</div>//坐标拾取组件 <div class="mapbox" v-show="map.showMap"> <div class="searchDiv" style="display: flex;align-items: center">
2021-11-12 13:49:57
5255
原创 vue 3 响应/请求拦截 文件下载 上传
request.jsimport axios from "axios";import router from "../router/index";import { ElMessage } from "element-plus";const request = axios.create({ baseURL: "",});// 设置请求拦截器request.interceptors.request.use( (config) => { return c
2021-11-12 13:37:48
1301
原创 moment.js 封装时间格式化方法 将时间戳转换成日期格式
moment.js官网http://momentjs.cn/下载包npm install moment --save引入及使用import moment from 'moment';//距离目前时间差export const longAgo = (params) => { let time = moment(params).fromNow(); if (time == 'a few seconds ago') { return '1分钟前'..
2021-11-12 11:58:07
807
原创 表情包组件 封装使用(vue 3)
表情文件const appData = [ { "codes": "1F600", "char": "????", "name": "grinning face" }, { "codes": "1F603", "char": "????", "name": "grinning face with big eyes" }, { "codes": "1F6
2021-11-12 11:50:18
2552
1
原创 富文本编辑器(vue)
Tinymce(vue 3)封装组件 下载引入即用链接：https://pan.baidu.com/s/1t-wTS_7mdSZr8DlgBfBw4A提取码：luck组件中使用//引入import tinyMce from "../../../../components/Tinymce/index.vue";//注册components: { tinyMce },//使用 <tinyMce :value="ruleForm.content" @getTinyData=..
2021-11-12 11:39:23
243
原创 使用高德地图绘制区域及标题(vue 2)
public / index.html引入地图组件<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=f86393ef104bfc7ac7ea352a98d4b371&plugin=AMap.MouseTool&plugin=AMap.ControlBar&plugin=AMap.Geolocation&plugin=AMap.Poly...
2021-11-12 10:56:42
1761
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人