熊宗的博客

原创 vue友好vscode 插件

【代码】vue友好vscode 插件。

原创 项目性能优化--gzip

使用compression-webpack-plugin插件 https://www.npmjs.com/package/compression-webpack-plugin。deleteOriginalAssets为true时，会删除js文件，访问时会报404。1.项目放到服务器上访问，查看js请求，加载的是js文件；1.vue.config.js中配置。第一种方式：纯nginx服务器配置。2.build后产生gzip文件。2.请求，发现请求的是gzip。第二种方式：前端生成gzip。

原创 数组转树形数据

【代码】数组转树形数据。

原创 ES6 Promise 练习

Promise功能看似简单，但认真整理却发现Promise内容确实挺多的.

原创 Service worker是什么？

Service worker

原创 浏览器中进程和线程的理解

进程和线程

原创 ES6中对象的一些拓展

ES6

原创 JavaScript中的数组有哪些常用的方法？

JavaScript

原创 WebSocket如何兼容低版本浏览器？

WebSocke

原创 获取英文状态日期

获取英文状态日期

原创 .reduce()方法

reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。...

原创 Vue实现Enter键查询

单个条件：@keyup.enter.native="CurrentChange(1)"@submit.native.prevent多个条件：创建时监听：window.addEventListener('keydown',this.handleKeyDown,true);//开启键盘监听模式触发： handleKeyDown(e){ let key = null; if(window.event === undefined){ key = e.ke

原创 Vue3和Vue2的组件通信

Vue3 组件通信方式props$emitexpose / ref$attrsv-modelprovide / injectVuexmittVue3 通信使用写法:props用 props 传数据给子组件有两种方法，如下// Parent.vue 传送<child :msg2="msg2"></child><script setup> import child from "./child.vue" import { ref,

原创 组合式函数

Vue3.0

原创 vue、js 保留小数点位数以及转化为百分比

toFixed [MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed)toFixed() 方法使用定点表示法来格式化一个数值。一、保留小数点后两位四舍五入export function NumFilter (value) { // 截取当前数据到小数点后两位 let realVal = parseFloat(value).toFixed(2)

原创 el-upload 自定义上传失败，文件列表处理

自定义上传：uploadFile(file) { const param = new FormData() //提交formData let files= file.file param.append('files', files) uploadFile(param).then(response => { // 上传成功提示等 }).catch((err) => { let uid = files.uid let idx = t

原创 js获取当天0点时间兼容ie写法

//当前时间let time = new Date();//当天0点(京8时区写法)let day = time - time % (24 * 60 * 60 * 1000) - 8 * 60 * 60 * 1000;网上大部分的写法是new Date( new Date( new Date().toLocaleDateString() ).getTime() );在IE上获取到的是NaN...

原创 formatDate方法

//inputTime 参数是毫秒级时间戳function formatDate(inputTime) { var date = new Date(inputTime); var y = date.getFullYear(); var m = date.getMonth() + 1; m = m < 10 ? ('0' + m) : m; var d = date.getDate(); d = d < 10 ? ('0' + d) : d;

原创 Vue3.0 + Vite + Ant Design Vue + TypeScript 管理后台vue-vben-admin

Vue3.0快速上手

原创 yarn install 运行出错-异常处理

处理：升级依赖yarn config set ignore-engines true

原创 uniapp之pdf预览

1.引入 https://mozilla.github.io/pdf.js/getting_started/#download2.HTML <view class="enclosureList" @tap="preview(item.attachName,item.attachUrl)" v-for="(item,index) in info.attachList" :key="index">{{item.attachName}}</view> p

原创 vue-quill-editor使用小结

1.HTML <quill-editor ref="QuillEditor" v-model="form.context" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"

原创 正则替换富文本图片url

context.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, p1) => { return `<img src='${p1.indexOf('http') > -1 ? p1 : baseUrl + p1}' />` })下面的正则表达式会全局匹配所有img标签：/<img [^>]*src=['"]([^'"]+)[^>]*>

原创 时间格式化 yyyy-MM-dd hh:mm

this.formatDate(this.form.effectiveTimeStart, 'yyyy-MM-dd hh:mm') formatDate(date, fmt = 'yyyy-MM-dd') { if (typeof (date) === 'number') { date = new Date(date) } var o = { "M+": date.getMonth() + 1, //月

原创 uniapp 单行文本溢出隐藏

实现：.text{ display: -webkit-box; /*弹性伸缩盒子模型显示*/ -webkit-box-orient: vertical; /*排列方式*/ -webkit-line-clamp: 1; /*显示文本行数(这里控制多少行隐藏)*/ overflow: hidden; /*溢出隐藏*/}

原创 Cannot set property ‘status‘ of undefined 之elementUI上传问题

1.原因：fileList在上传过程或者处理函数中被修改或清空，导致fileList数据错误，打印即可看出异常。2.处理：文件过滤应该放在beforeUpload中，显式返回false即可过滤文件中止上传，尽量将fileList的清空操作放在业务完成之后。...

原创 js 获取一个月有多少天的方式

方法一：new Date()第3个参数默认为1，就是每个月的1号，把它设置为0时， new Date()会返回上一个月的最后一天，然后通过getDate()方法得到天数function getMonthDay(year, month) { let days = new Date(year, month + 1, 0).getDate() return days}方法二：可以把每月的天数写在数组中，再判断时闰年还是平年确定2月分的天数function getDays(year, month)

原创 uniapp之Web-view遮挡导航方案

方案一：pages.json定义原生导航{ "path": "pages/checkout/checkout", "style": { "app-plus": { "navigationBarTitleText": "个人中心", "titleNView": { "autoBackButton": false,

原创 Node.js的多版本方法NVM

NVM 快速入门如果你使用 Node.js ，有时想快速更新 Node.js 版本快速切换 Node.js 版本，而不知道怎么做？本篇文章教你如何使用 NVM 安装管理多个版本的NodeJS**引子**安装Node的方式目前有两种从官网获取安装就是从官网下载然后安装，也是安装NodeJS最简单的方式每次更新 NodeJS 版本都需要重新去官网下载覆盖安装系统中只能存在一个版本的 NodeJS，不适合对比学习使用版本管理器安装这里使用 nvm 就是为了解决

原创 uniapp 轮播示例

<template> <view class="content"> <view class='home'> <swiper indicator-dots circular autoplay interval=3000 > <swiper-item v-for="(item,index) in swipers" :key="index"> <image :src="item"&gt

原创 uniapp 密码显示隐藏

<template><view class="container"> <view class="pwd-view"> <input type="text" :password="showPassword" placeholder="请输入密码"/> <view :class="[!showPassword ? 'icon iconfont iconesey' : 'icon iconfont

原创 uniapp计算和清理缓存

1.计算缓存data(){ return { fileSizeString:'' }},//methodsformatSize() { let that = this; plus.cache.calculate(function(size) { let sizeCache = parseInt(size); if (sizeCache == 0) { that.fileSizeString = "0B"; } else if

原创 PC端和移动端适配

Vue PC端框架Element中文文档：http://element-cn.eleme.io/#/zh-CNgithub地址：https://github.com/ElemeFE/elementiView中文文档：https://www.iviewui.com/github地址：https://github.com/iview/iviewvue-element-admin中文文档：https://panjiachen.github.io/vue-element-admin-si

原创 postcss-px-to-viewport 适配 uniapp

参考：https://uniapp.dcloud.io/component/page-meta?id=page-metamodule.exports = { css: { loaderOptions: { postcss: { plugins: [ require(‘postcss-px-to-viewport‘)({ unitToConv

原创 el-input 只允许输入整数、整数和小数（保留小数点后两位）

方法一：el-input “type=number“ 隐藏上下箭头/deep/ input::-webkit-inner-spin-button { -webkit-appearance: none !important;}/deep/ input[type='number'] { -moz-appearance: textfield !important;}方法二：事件控制（兼容）1.只允许输入整数或小数只保留小数点后两位<el-input size="small" o

原创 小程序中运用到echarts图表，在echarts图标上进行拖动上划有时echarts图表隐藏掉？

处理：1.主要是鼠标触发提示框导致的，可设置tooltip: { triggerOn: ‘click’ }2.设置tooltip{ animation: false, }

原创 CSS3 word-break 属性

原创 JavaScript 树形结构数组处理之递归

一.经典示例var data = [ { name: "所有物品", children: [ { name: "水果", children: [{name: "苹果", children: [{name: '青苹果'}, {name: '红苹果'}]}] }, { name: '主食', children: [

原创 EasyPlayer网页全终端播放器

EasyPlayer.jsEasyPlayer.js H5播放器，是一款能够同时支持HTTP、RTMP、HTTP-FLV、HLS（m3u8）视频直播与视频点播等多种协议，支持H.264、H.265、AAC等多种音视频编码格式，支持mse、wasm等多种解码方式，支持Windows、Linux、Android、iOS全平台终端的H5播放器。Github：https://github.com/tsingsee/EasyPlayer.js文档：http://open.tsingsee.com/sdk/eas

原创 阿里云播放器组件 vue-aliplayer

一.第一步：首先在项目目录下安装阿里云视频插件npm install vue-aliplayer -S二.配置AliPlayer.vue路由三.在index.html里引入js四.Aliplayer详情如下代码参考地址：https://player.alicdn.com/aliplayer/tutorial/tutorial.html全局引入步骤：安装npm install vue-aliplayer -Syarn add vue-aliplayer -S使用import VueA