- 博客(130)
- 收藏
- 关注
RSS订阅原创 Vue-count-to(数字滚动计时)
在控制台输入npm install vue-count-to来安装vue-count-to插件。在需要使用的页面导入插件,并声明使用。下面是可以设置的一些参数,可供参考!这样就实现了数字滚动的效果.
2022-08-23 09:32:11
497
原创 点击按钮 某个div全屏展示
<html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style> #container { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: red; }</style> <body>
2022-05-30 14:00:52
482
原创 生成唯一字符串
// 生成唯一字符串function getUuid() { var s = []; var hexDigits = "0123456789abcdef"; for (var i = 0; i < 25; i++) { s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1); } s[14] = "4"; // bits 12-15 of the time_hi_and_ver
2022-05-24 17:02:53
266
原创 pinia 配置教程
Pinia.js 是新一代的状态管理器，由 Vue.js团队中成员所开发的，因此也被认为是下一代的 Vuex，即 Vuex5.x，在 Vue3.0 的项目中使用也是备受推崇。Pinia.js 有如下特点：完整的 typescript 的支持；足够轻量，压缩后的体积只有1.6kb;去除 mutations，只有 state，getters，actions（这是我最喜欢的一个特点）；actions 支持同步和异步；没有模块嵌套，只有 store 的概念，store 之间可以自由使用，更好的代码分割
2022-05-24 16:56:09
525
原创 快速删除 node_modules 文件
1）安装删除工具npm install rimraf -g2）执行删除命令rimraf node_modules
2022-05-24 14:59:43
137
原创 encodeURI和encodeURIComponent 加密，url乱码
encodeURI编码范围encodeURI()不编码字符有82个：! # $ & ’ ( ) * + , - . / : ; = ? @ _ ~ 0-9 a-z A-ZencodeURIComponent编码范围encodeURIComponent不编码字符有71个：! ’ ( ) * - . _ ~ 0-9 a-z A-Z所以encodeURIComponent比encodeURI编码的范围更大。举个例子虽然上面写了二者的编码范围的区别，但是还是不够直观，我们通过下面这里例子来看一下
2022-03-28 16:35:12
1523
原创 axios上传文件，监听上传进度
let formData = new FormData() formData.append("id", id); formData.append('file', item.raw) axios.post('http://192.168.30.244:8001/api/minio/upload',formData,{ onUploadProgress(e){ if(e.lengthComputable){ ...
2022-03-14 14:15:22
1270
原创 axios取消接口操作
// 发送axios接口 let fileList = this.restfileList fileList.forEach((item, index) => { setTimeout(() => { let notifyKey = 'q' + nanoid() //生成唯一的id window.sessionStorage.setItem("cancelAxiosId", notifyKey)// 存浏览器session里面，请求拦截器用
2022-03-11 10:57:47
371
原创 Vue脚手架中唯一id生成库nanoid
安装：npm i nanoid导入import { nanoid } from "nanoid";生成一个随机idconst id = nanoid();
2022-02-28 17:55:03
412
原创 mysql安装教程
下载地址链接: https://dev.mysql.com/downloads/windows/installer/.点击Next：点击Next：点击Execute ：点击Yes ：点击Execute：点击Next：点击Next：点击Next：点击Next：点击Next：输入用户名root和密码root后点击Next：点击Execute：点击Finish：若安装完连接不上数据库可再次点击安装程序重新配置点击第一个的Reconfigure：点击Next
2022-02-28 10:47:58
323
原创 canvas截图，html2canvas.js 截图整个div，canvas下载图片
html2canvas.js（下载地址）https://html2canvas.hertzen.com/saveFile.js（下载图片）var saveAs = saveAs || function (e) { "use strict"; if (typeof e === "undefined" || typeof navigator !== "undefined" && /MSIE [1-9]\./.test(navigator.userAgent)) {
2022-02-22 10:55:02
673
原创 tinymce富文本编辑框使用
引用 <link rel="stylesheet" href="./tinymce/skins/ui/oxide/skin.min.css" /> <link rel="stylesheet" href="./tinymce/tinymce.min.js" /> <script src="/tinymce/jquery.tinymce.min.js"></script> <script src="./tinymce/tin
2022-02-22 10:42:49
1348
原创 vue hook 使用
用途一：在同一个组件中如何监听实例的某个生命周期，并执行相应的操作？简单语法如下： this.$on/$once('hook:生命周期'，callback)除了文档中的例子，我们最常用到的是定时器的使用与销毁。export default{ data(){ timer:null }, mounted(){ this.timer = setInterval(()=>{ //具体执行内容 console.log('1'); },
2022-02-21 10:21:07
2094
原创 echarts 数据自动滚动效果
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title></title> </head> <body> <div id="echBox" style="width: 800px; height: 400px"></div> <script src="../li
2022-01-19 17:39:29
4671
原创 vue项目，在.js文件中使用element ui
import Vue from 'vue';import ElementUI from 'element-ui'; //Message 消息提示ElementUI.Message({ message: '恭喜你，这是一条成功消息', type: 'success'});//Notification 通知ElementUI.Notification({ title: '警告', message: '这是一条警告的提示消息', type: 'warning'
2022-01-12 17:41:31
1946
1
原创 vue生成环境开发环境配置
process.env.NODE_ENV 监听当前是生成环境还是开发环境process.env.NODE_ENV==='development'// 开发环境.env 默认全局配置文件.env.development 开发环境配置文件.env.production 生产环境配置文件 文件名为Vue的约定，不可随意更改 配置环境变量格式 VUE_APP_{自定义环境变量名} = {值} 其中“VUE_APP_”是规定的环境变量名前缀，如果变量名不是以此开头，则在程序中不能调用此环境变
2022-01-12 11:20:46
644
原创 js继承7中方式
// 定义一个动物类 父类 function Animal(name) { // 属性 this.name = name || "Animal"; // 实例方法 this.sleep = function () { console.log(this.name + "正在睡觉！"); }; } // 原型方法 Animal.prototype.eat = function (food) { console.log(this.name
2022-01-11 17:39:22
99
原创 解决element ui tree组件往组件外拖拽，鼠标样式显示禁止放置问题
在可以放置的div上绑定dragover方法<div class="map-con" id="mapDiv" @dragover="allowDrop"></div>allowDrop(ev){ ev.preventDefault();},参考链接：链接: https://www.w3school.com.cn/tiy/t.asp?f=eg_html5_global_draggable.示例代码：<!DOCTYPE HTML><html>
2022-01-11 15:58:15
2226
原创 升级node.js版本之后，node-sass 启动vue项目报错： PostCSS received undefined instead of CSS string
解决 Syntax Error: Error: PostCSS received undefined instead of CSS string解决方法卸载当前版本的node-sass和sass-loader,因为版本和当前的不兼容,安装对应版本的包即可。#卸载node-sas和sass-loadernpm uninstall node-sassnpm uninstall sass-loader安装其他版本#安装node-sas和sass-loadernpm install node-sa
2022-01-10 13:10:21
3031
原创 vue中引入及使用wow.js
安装npm install animate.css --savenpm install wowjs --savemain.js全局引入import "animate.css"import "wowjs/css/libs/animate.css"// 巨坑... 此地方要引入两个cssimport wow from 'wowjs'Vue.prototype.$wow = wow在相应的组件中使用 <div class="container"> <.
2022-01-07 11:17:32
1918
原创 监听div宽高变化
//监听div大小变化(function($, h, c) { var a = $([]), e = $.resize = $.extend($.resize, {}), i, k = "setTimeout", j = "resize", d = j + "-special-event", b = "delay", f = "throttleWindow"; e[b] = 250; e[f] = true; $.e
2021-12-20 14:48:47
1197
原创 angular 使用service 实现兄弟组件间的消息传递
安装ng g service event Angular会自动在项目的app目录下生成 event.service.ts 和 event.service.spec.ts 两个文件。我们在 event.service.ts 文件中完成相关业务代码即可。event.service.ts ：import { Injectable } from '@angular/core';import {Observable,Subject} from "rxjs";@Injectable({ prov
2021-12-02 10:45:35
925
原创 前端js压缩图片并上传
<input type="file" accept="image/*" class="filesBtn" id="addWgBtn" name="outPhotos"> var wgtArr = []; $("#addWgBtn").change(function (e) { var files = this.files if (files) { for (var i = 0; i < files.length; i++.
2021-12-01 09:02:27
508
原创 vue element-ui按需加载，安装完成后项目启动报错Error: Cannot find module ‘babel-preset-es2015‘
项目使用vue cli3脚手架工具构建按照element 官方文档中所示。npm install babel-plugin-component -D然后添加.babelrc文件{ "presets": [["es2015", { "modules": false }]], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName":
2021-12-01 08:52:47
1008
转载 使用H5Stream实现rtsp流播放，并整合到web项目中
链接: https://blog.csdn.net/yanmuchen/article/details/98207002#comments_13039506.
2021-12-01 08:49:33
531
原创 前端实现录屏
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <titl
2021-11-11 17:21:25
717
原创 element ui 遇到的问题
element ui 遇到的问题element-ui tree 树形控件复选框实现单选element-ui tree 树形控件折叠已经展开节点element-ui tree 树形控件打开指定节点element-ui tree 树形控件复选框实现单选<el-tree :data="treeData" :props="defaultProps" node-key="id" ref="treeRef" show-checkbox check-strictl
2021-11-10 15:19:03
578
原创 vue双击实现编辑功能
<template> <div> <el-tree :data="data" show-checkbox node-key="id" default-expand-all :expand-on-click-node="false"> <span class="custom-tree-node" slot-scope="{ n
2021-10-21 18:36:43
3814
原创 webpack性能优化
1.HMR热模块替换hot module replacement 热模块替换 / 模块热替换作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块）极大提升构建速度。样式文件：可以使用HMR功能：因为style-loader内部实现了~js文件：默认不能使用HMR功能 --> 需要修改js代码，添加支持HMR功能的代码注意：HMR功能对js的处理，只能处理非入口js文件的其他文件。html文件: 默认不能使用HMR功能.同时会导致问题：html文件不能热更新了~ （不用做HMR
2021-10-20 11:21:29
70
原创 监听文件下载进度
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style></style> <style> </style> </head> <body> <script> /*** 将url文件下
2021-10-13 09:15:51
715
1
原创 sass语法整理
sass语法整理1、变量（定义变量后，在选择器里可以直接引用）2、嵌套（父选择器里可以嵌套子选择器）3、mixin 混合 （相当于预先写好了一组样式，其它地方直接引用）4、 继承/扩展（一个选择器可以继承另一个选择器的全部样式）5、计算功能6、if判断（不常用）7、for循环（不常用）8、列表循环（不常用）9、 while循环，有判断条件更灵活。1、变量（定义变量后，在选择器里可以直接引用）$yanse: rgb(223, 148, 148);h1{ color: $yanse；
2021-09-30 09:40:27
56
原创 实现复制功能
<template> <div class="copy-content"> <input type="text" v-model="value"> <div v-for="item in list" > {{item}} <button type="primary" @click="copyHandle(item)">点击复制</button> </d
2021-09-29 16:44:37
88
原创 element ui 上传文件组件，可以选中文件夹并上传文件夹内所有文件
<template> <el-upload class="upload-demo" action="#" :on-remove="fileRemoveHandle4" :on-change="fileChangeHandle4" accept="" :auto-upload="false" multiple
2021-09-29 16:01:18
5538
3
原创 修改滚动条样式
&::-webkit-scrollbar { width: 6px !important; height: 6px !important; } &::-webkit-scrollbar-corner{ background-color: transparent; } &::-webkit-scroll
2021-09-26 11:13:31
55
原创 使用 markdown-it-vue加载 .md文件
安装 cnpm i markdown-it-vue使用<template> <div class="md-content"> <markdown-it-vue class="md-body" :content="htmlMD"/> </div></template><script>import axios from 'axios';import MarkdownItVue from 'ma
2021-09-26 11:06:04
894
原创 element ui框架上传文件去掉文件动态切换的效果
.upload-demo { display: flex; } /deep/ .el-list-enter-active, /deep/ .el-list-leave-active { transition: none; } /deep/ .el-list-enter, /deep/ .el-list-leave-active { opac..
2021-09-24 19:45:36
422
原创 React.forwardRef和connect的联合使用问题
//子组件let Component = (props)=>{ const {refInstance} = props; // 只要是实例都行useForm和useRef创建的都可以 const [form] = Form.useForm(); useImperativeHandle(refInstance,()=>({ submit:()=>{ form.submit(); } }));
2021-09-18 17:58:01
559
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人