- 博客(41)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 vue、js获取页面中所有css样式（包括link标签）案例为打印使用
最近碰到一个需求：将弹窗中的表单打印出来，还要保留弹窗表单的样式，为了对页面造成的影响最小采取iframe方案。
2023-09-06 15:40:33
1140
1
原创 使用JetBrains Toolbox丢失idea、webstorm右键启动菜单
在使用JetBrains Toolbox下载idea和webstorm或者其他编辑器的时候不会生成右键菜单
2023-01-12 15:04:37
710
1
原创 vite项目、vue-cli项目环境配置
我们在不同环境需要使用不同的配置，例如：线上环境上传文件地址 和测试环境的上传文件地址是不一样的，我们在打包的时候不想手动修改这些地址，使用不同的打包命令就可以生成不同环境的包，这个时候就需要使用到环境变量。例如线上环境的baseUrl为/api,测试环境为/proapi,就可以使用这个方式进行区分，只要使用不同npm命令即可。在这里面定义的常量都是可以被读取的：vite和vue-cli有一点区别。vue-cli读取的常量必须VUE_APP开头的。vite读取的常量必须VITE_APP开头的。...
2022-08-12 10:07:01
993
原创 在electron中使用sqlite数据库
本文章仅仅介绍如何在electron中使用sqlite数据库，sqlite的sql语句不做解释。
2022-07-18 10:10:21
6244
2
原创 vue简单实现无缝滚动
效果实现思路在vue中如何复制一份列表出来呢且不能丢失绑定的事件，很简单使用slot插槽，使用两个插槽我们就拥有了两个列表<div class="listScroll" ref="box"> <slot></slot> <slot></slot> </div>组件完整代码<template> <div class="listScroll" ref="box"> &l
2022-03-22 15:56:05
4409
4
原创 在vue3中使用defineProps在eslint中报错的问题
问题：使用 Vue 3 Setup 时 ESLint 报错 ‘defineProps’ is not defined官网描述：defineProps 和 defineEmits 都是只在 script setup 中才能使用的编译器宏。他们不需要导入且会随着 script setup 处理过程一同被编译掉。理论上我们不需要导入就可以使用，但是eslint会报警。我的eslint配置module.exports = { root: true, env: { node: true,
2022-03-15 09:38:22
5225
1
原创 记录一下Swiper7以上import { Swiper, SwiperSlide } from “swiper/vue“报错问题
首先是官网实例<template> <swiper :slides-per-view="3" :space-between="50" @swiper="onSwiper" @slideChange="onSlideChange" > <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide>
2021-12-07 11:48:07
2438
1
原创 一个简单个人简历网站
效果图简介技术栈：reactreact-router-domreduxantdreact-transition-groupreact-motion这个项目是使用create-react-app脚手架创建的，我在这个项目里使用了less。不想 eject 项目，但想对项目中 wepback 进行自定义配置，于是我使用了craco。package.json中 "devDependencies": { "@craco/craco": "^6.2.0", "craco-l
2021-07-16 11:29:37
394
原创 React列表动画实现
在React列表动画实现列表动画使用的react-transition-group中的TransitionGroup,CSSTransition。使用TransitionGroup包裹CSSTransition实现列表。效果图首先安装react-transition-group包npm i -s react-transition-groupstate内容this.state = { list:[], input:'' }
2021-07-08 17:25:08
798
原创 React异步加载组件以及加载动画
异步加载较大页面和组件在使用时一般使用异步加载，因为这些比较大的组件如果是同步引入，页面加载时间会特别长。React组件异步引入在react中，异步导入使用react.lazy配合Suspense引入const Home = React.lazy(()=>import('组件路径'))使用const ComponentLoading = Component=> <Suspense fallback={'<div>组件未加载完成时显示的内容</div&
2021-07-07 15:28:31
1070
原创 vue拖拽窗口
vue拖拽窗口简单实现效果实现代码<template> <transition> <!-- 绑定style中top和left--> <div class="moveBox" :style="position" v-show="show"> <div class="moveHead" @mousedown="mousedown" @mousemove="mouse
2021-06-24 16:36:43
875
原创 taro上传文件踩坑
在使用taro开发支付宝小程序时，遇到上传图片的需求，看了taro的官方文档就开写了。我们可以看到option有三个必填参数：url、filePath、name，然后我就照着写了。 Taro.uploadFile( { url:process.env.BASE_API+'/filing/uploadPicAddWaterMark', filePath:item.file, name:'file', he.
2021-05-28 19:18:14
4707
3
原创 使用taro-ui-vue报错Error in nextTick: “TypeError: Cannot read property ‘_wrappe
这几天做跨端选择了taro框架，使用vue开发，UI框架选择taro-ui-vue但是出现了一些问题，Error in nextTick: "TypeError: Cannot read property '_wrappe，导致vue数据失去响应式。这里看到报错全是AtButton这个组件，知道问题就可以解决了。将项目中使用到这个AtButton组件的地方全部删除，使用原生button组件代替，好了问题解决。...
2021-05-22 10:15:42
548
原创 微信小程序请求wx.request封装
微信小程序的wx.request使用很不方便，习惯于es6的promise之后简直不能忍，故想使用promise将其重新封装一下，以后就可以和axios一样的使用了。封装const baseUrl = 'http://127.0.0.1:3000';function request(url,methods,data={}){ return new Promise(((resolve,reject) => { wx.request({ url:.
2021-04-21 14:56:00
160
原创 简单封装一个vue右键菜单
封装一个简单的右键菜单，要求右键处出现菜单，点击除了菜单部分可以关闭菜单。组件<template> <div class="ContextMenu" @click="close" v-show="show"> <ul class="menuMain" ref="menuMain" :style="{ top: y, left: x }"> <slot></slot> </ul> <.
2021-02-22 11:02:17
446
1
原创 vue点击输入框复制文字
要求是点击这个输入框复制链接给input加一个获取焦点的监听select() 选取内容使用document.execCommand(‘copy’)复制内容注意document.execCommand()不能在异步函数中使用 比如setTimeout<el-input :value="upPic" @focus="copyUrl" />copyUrl(e) { if (this.upPic) { e.target.select() c
2021-01-29 16:43:59
322
原创 原生js简单实现App Store 卡片展开效果
先看效果由于代码很简单就不进行说明了 代码在下面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style type="text/css"> h
2021-01-15 17:41:31
551
原创 vue实现仿网易云音乐客户端
快毕业了要做毕设，因为在公司实习的是前端所以选择使用vue实现一个网易云音乐客户端。预览地址GitHub 欢迎star主界面拥有五套主题配色播放器界面多人聊天室拖动网站内对象到此可分享任意内容歌词滚动使用better-scroll聊天室使用socket.io播放器自己封装的，使用html5 video全局主题色使用css变量实现后台使用 开源的网易云api NeteaseCloudMusicApi新人开发不足之处请谅解...
2021-01-14 10:20:37
1327
6
原创 使用socket.io遇到跨域问题 记录一下
在使用node中使用了socket为了搭建一个聊天室。代码如下，端口3000const server = app.listen(3000)require('./socket/socket')(server)module.exports = app =>{ const io = require('socket.io')(app,{cors:true}) console.log('io服务开启') const moment = require('moment')
2021-01-07 17:15:59
5130
4
原创 css兼容性处理，自动加前缀的方法
在webpack中，你可以安装npm包postcss-loader来启用Autoprefixer。var autoprefixer = require('autoprefixer'); module.exports = { module: { loaders: [ { test: /\.css$/, loader: "style-loader!css-loader!postcss-loader" }
2020-12-29 09:18:20
213
原创 汇总一下经常用到的数组和字符串方法
数组// concat() 连接两个或更多的数组，并返回结果。// every() 检测数组元素的每个元素是否都符合条件。// filter() 检测数组元素，并返回符合条件所有元素的数组。// indexOf() 搜索数组中的元素，并返回它所在的位置。// join() 把数组的所有元素放入一个字符串。// lastIndexOf() 返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。// map() 通过指定函数处理数组的每个元素，并返回处理后的数组。// po
2020-12-29 09:17:53
101
原创 浅拷贝和深拷贝的问题
浅拷贝对象类型在赋值的过程中其实是复制了地址，从而会导致改变了一方其他也都被改变的情况所以需要使用值拷贝。首先可以通过 Object.assign 来解决let obj={ name:'age', age:12}let obj1=Object.assign({},obj)obj1.age=13console.log('obj：'+obj.age)//obj：12还有一种通过解构来拷贝let obj={ name:'age', age:12}let obj1={...obj}
2020-12-28 16:14:23
119
原创 React hooks
什么是 Hook ？官方介绍：Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。为什么要用hook？改变了原始的React类的开发方式，改用了函数形式;它改变了复杂的状态操作形式，让程序员用起来更轻松;它改变了一个状态组件的复用性，让组件的复用性大大增加 。它可以说是react 2019年最最火的新特征了。所有的hookuseStateuseEffectuseContextuseReduceruseCal
2020-12-28 16:11:41
106
原创 webpack基本配置
webpack配置const {resolve} = require('path')//引入html打包const htmlplugin = require('html-webpack-plugin') //提取单独的css文件const MiniCssExtractPlugin = require('mini-css-extract-plugin')//压缩css代码const OptimizeCss = require('optimize-css-assets-webpack-plugin
2020-12-28 16:10:40
71
原创 useMemo的使用
useMemo用来缓存一个组件在父组件中定义俩个时间值传给子组件//app.jsimport React,{useState} from 'react';import Memo from './useMemo'function App(){ const [time,setTime]=useState(new Date().getTime()) const [day,setDay]=useState(new Date().getDay()) return( <div&g.
2020-12-28 16:09:02
1484
原创 useState 的简单实现
//定义useStateconst React = (function(){ let _val return { useState(initValue){ _val = _val || initValue function setVal(value){ _val = value } return [_val, setVal] }.
2020-12-28 16:07:28
378
原创 手动实现call的功能
Function.prototype.myCall=function (context){ if(typeof this != 'function'){ throw new TypeError('not a function') } context = context || window const args=[...arguments].slice(1) context.fn=this const res = context.fn(...ar
2020-12-28 16:06:26
129
原创 [] == ! [] 的结果为什么会是true
①、根据运算符优先级 ，！ 的优先级是大于 == 的，所以先会执行 ![]！可将变量转换成boolean类型，null、undefined、NaN以及空字符串('')取反都为true，其余都为false。所以 ! [] 运算后的结果就是 false也就是 [] == ! [] 相当于 [] == false②、根据上面提到的规则（如果有一个操作数是布尔值，则在比较相等性之前先将其转换为数值——false转换为0，而true转换为...
2020-12-28 16:05:21
963
原创 原型继承和 Class 继承
其实在 JS 中并不存在类，class 只是语法糖，本质还是函数。 class Person{ }console.log(Person instanceof Function)//true组合继承组合继承是最常用的继承方式function Parent(value) { this.val = value}Parent.prototype.getValue = function() { console.log(this.val)}function ..
2020-12-28 16:04:37
110
原创 React使用useReducer，createContext，useContext实现redux的功能
封装的共享数据组件（核心）import React,{useReducer,createContext} from 'react';export const prodata=createContext({})//创建共享数据export const reducer=(state,action)=>{ //创建reducer条件 switch (action.type){ case 'color': return action.color.
2020-12-28 16:03:05
365
原创 html5 拖拽练习
首先是预览点我预览效果完整代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> .box1, .box2, .box3, .box4 { width: 200px; height: 100px; margin:
2020-12-28 14:59:18
353
原创 纯js实现滚动底部加载和返回顶部动画
先看效果滚动加载代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> html,body{ margin: 0; padding: 0; height: 100%; overflow: auto; } div{ h
2020-12-18 11:28:59
580
原创 博客中点击任意地方出现文字或者图片
效果如下因为点击都是body里面就行的所以给body设置一个样式html,body{ width: 100%; height: 100%; overflow: auto; margin: 0; pad: 0; }再给我们点击出现的文字设置一个样式.box{ position: fixed; transition:all 0.5s ease-in-out; opacity: 1; font-size: 20px; }.move{ transform: t
2020-12-17 16:25:22
145
原创 vue点击头像上传图片
写毕设遇到个头像上传的问题要求：点击图片选择文件，并显示在头像框里首先给图片添加点击事件<el-avatar @click.native="upStart" :src="userDetail.upAva.url " :size="50" />方法如下upStart() { //创建input const upload = document.createElement("input"); //设置type为file upload.
2020-12-10 15:52:22
1822
2
原创 解决el-Dialog闪烁的问题
问题描述在使用了饿了么ui弹出组件的时候惊人的发现弹窗会闪烁一下。问题解决我检查了代码和数据确定只触发一次，然后我又打了几个断点终于发现了问题，是由于它的动画问题，于是我便去搜索了解决办法发现都是用v-if来解决的，但是使用了v-if动画直接没有了，在美观上这是我不能忍的。于是就继续检查了下去，终于发了是动画冲突的问题，在全局加上这一行代码就完事了，再打开一看果然不会闪动了。.el-dialog__wrapper{ transition-duration: 0.3s;}希望对后面同样问题的
2020-11-20 16:56:58
3232
原创 vue实现不跳转下载文件
问题描述遇到一个需求，需要单独下载一个MP3或者图片文件，使用正常的a标签会跳转另一个网址且只能预览图片和文件。问题解决查了一些资料可以在请求里加blob属性来解决，办法是将你的图片地址或者音频地址拿过去再请求一遍，请求里要带上在responseType: "blob"这个然后按照正常的下载就行。亲测有效！...
2020-11-19 09:30:42
3279
1
原创 lyric-parser解析网易云音乐会有延迟
问题lyric-parser解析网易云音乐会有延迟，查看后台打印，原因是网页云秒的单位有三位数，而lyric-parser解析只解析俩位数。问题解决知道了问题出在哪，接下来当然是解决问题啦，在lyric-parser源码内加这一行代码就可以啦！...
2020-11-16 18:03:42
862
4
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人