一梦晓三生的博客

原创 vue全局自定义拖拽指令

// 全局自定义拖拽组件export default (Vue) => { Vue.directive('drag', { //1.指令绑定到元素上回立刻执行bind函数，只执行一次 //2.每个函数中第一个参数永远是el，表示绑定指令的元素，el参数是原生js对象 bind: function (el, elementObj) { let dragBox = el; //获取当前元素 drag.

原创 vue限制输入框数字只能输入正整数的指令（direct） v-int

// 限制输入框数字只能输入正整数的指令 v-intexport default (Vue) => { // 通过Vue的指令方法，定义指令名称 Vue.directive("Int", { // bind绑定 获取当前目标的input（就是在哪个文本框上使用指令） bind: function (el) { const input = el.getElementsByTagName("input")[0]; if (input) {

原创 box-shadow在ios中不生效

在电脑端和模拟器上调试都正常显示，安卓机上也正常显示。但是在ios真机上box-shadow的效果就不显示了。 重点在```-webkit-appearance```这个属性，去掉ios默认的输入框自带样式input { width: 100%; height: r(88); line-height: r(88); border: 0; outline: none; background-color: #ffffff; border-radius: r(44); padd

原创 px、em、rem、vw、rpx之间有什么区别

转载 javascript中call()、apply()、bind()的用法

其实是一个很简单的东西，认真看十分钟就从一脸懵B到完全理解！先看明白下面：例1 obj.objAge; //17 obj.myFun() //小张年龄undefined例2shows() //盲僧　比较一下这两者this 的差别，第一个打印里面的this 指向obj，第二个全局声明的shows()函数 this 是window ；1.call()、apply()、bind() 都是用来重定义 this 这个对象的！如：　　obj.myFun.call(db)；　　　　

原创 ios日期无法展示2022-02-07这种带‘-‘的格式，解决办法

原创 Date对象的getMonth()对象的错误使用导致页面1月份时报错

日期方法报使用错误，getMonth()获取月份是从0到11页面组件报错信息

原创 element-ui大图预览el-image-viewer组件示例

<!-- 大图预览 --><el-image-viewer v-if="showBig" :on-close="closeViewer" :url-list="showImgList"/>// 示例<script> import ElImageViewer from 'element-ui/packages/image/src/image-viewer' export default { name: ""

原创 基于elementUI的上传+大图预览功能

uploadFile.js<template> <el-upload class="avatar-uploader upload-file" :action="action" :multiple="multiple" :drag="drag" :show-file-list="false" :headers="{signature}" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :

原创 导出文件方法封装

导出文件，下载文件流

原创 vue项目文件流下载功能

vue文件流下载

原创 单例demo

单例demopackage cgb.java.model.singleton;import java.util.ArrayList;import java.util.List;/** * 需求：设计一个类，保证此类的实例在一个JVM内部只有一份 */class Singleton01{//此设计在多线程环境中存在不安全 private Singleton01(){} privat...

原创 vue实现移动端可拖拽浮动球按钮

vue实现移动端可拖拽浮动球按钮<template> <transition> <div ref="dragIcon" class="dragIcon" @click="onBtnClicked" @touchstart.stop="handleTouchStart" @touchmove.prevent.stop="handleTouchMove($event)" @touchend.stop="handleTouchEnd" :style="{le

原创 git常用基础命令

1.远程仓库新建/删除了分支，本地还是原来的分支git remote update origin –prune // 更新本地的分支2.版本回退git reset [--soft | --mixed | --hard] [HEAD]** 示例 **git reset –hard HEAD~3 # 回退上上上一个版本 git reset –hard bae128 # 回退到某个版本回退点之前的所有信息。 git reset --hard origin/master # 将本地的状态

原创 不同的页面都出现vue的警告[Vue warn]: Property or method “toJSON“ is not defined on the instance but referenced…

打开项目不同的页面都出现vue的警告[Vue warn]: Property or method "toJSON" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: h

原创 数组常用方法

1.判断一个数组是否包含另一个数组全部元素的方法let a=[1,2,3,4,5,6]let b=[1,2,3,4,5]let c = b.every(item=>{ return a.some(v=>{ return item===v })})console.log(c) //true2.过滤两个数组相同的数据（获取两个数组不同数据）let a=[1,2,3,4,5,6]let b=[1,2,3,4,5]let c = a.filter(item=>{ re

原创 问题记录：img标签下展示图片，图片下端有一条空白的解决办法

div标签嵌套img标签时，展示出的图片底部会出现白边原因：img默认是按基线(baseline)对齐的。对比一下图片和右边的p, q, y等字母，你会发现这三个字母的“小尾巴”和图片下方的空白一样高。下面这张图中的黑线就是那条基线。解决办法：要去掉空白部分可以使用vertical-align: bottom或将img标签变为块级元素。基线知识补充...

原创 垃圾回收机制

垃圾回收机制​ 我们知道垃圾回收机制是引擎来做的，JS引擎有很多种（各个浏览器都不同），其垃圾回收机制在一些细节及优化上略有不同。本文以V8引擎为例（市场占有率大，例如chrome浏览器），来帮助我们了解垃圾回收机制。因为只有真正了解垃圾回收机制，后面才能理解内存泄漏的问题以及手动预防和优化什么是V8引擎​ 了解V8引擎之前我们先要知道什么是javascript引擎。简单来说，CPU并不认识我们的js代码，而不同的CPU只认识自己对应的指令集，javascript引擎将js代码编译成CPU认识的指

原创 vue监听浏览器窗口大小变化,做对应的操作

页面初始化mounted的时候，通过`` document.body.clientWidth ``和`` document.body.clientHeight ``获取到浏览器的宽和高，然后通过 ``window.onresize`` 来监听浏览器窗口的变化，在这里来改变我们的变量宽和高即可。（created()的时候不行，因为此时document还没有生成）<template> <section class="p-10"> <h1> {{ scree.

原创 TortoiseGit使用配置 SSH key配置

1、前提Git已经安装且配置好可以正常使用，后来又安装了TortoiseGit2、常规设置Git路径：是你安装的Git的实际路径3、凭证4、网络这里要注意，默认是TortoiseGit的路径，要改成Git的路径下的。5.Tortoisegit 的SSH Key配置示例如果需要克隆一个项目（分别从github仓库、自己搭建的gitblit 仓库上获取），那就需要配置SSH Key补充一个知识点：本地仓库和远程git仓库的连接方式有两种：HTTPS 和 SSH，很多时候都是直接使用

原创 解决Tortoise Git 的 no supported authentication methods avaiable的问题

解决no supported authentication methods avaiable在（小乌龟）向github远程推送文件的时候会报错 no supported authentication methods avaiable解决方法：因为git（小乌龟）和Git的冲突我们需要把乌龟git设置改正如下。找到TortoiseGit–》Settings（设置）–》Network（网络）将SSH client指向D:\soft\Git\usr\bin\ssh.exe （我的Git工具安装在D盘）

原创 win10出现vue：无法加载文件C:\Users\Administrator\AppData\Roaming\npm\vue.ps1因为在此系统上禁止运行脚本……解决办法

vue : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本解决方法：1、管理员身份运行PowerShell（命令提示符，来源于Linux的命令提示符也叫Shell2、执行：set-ExecutionPolicy RemoteSigned （签名或运行这些脚本）...

原创 js将RGB颜色转为16进制颜色

RGB转换为16进制String.prototype.colorHex = function () { // RGB颜色值的正则 var reg = /^(rgb|RGB)/; var color = this; if (reg.test(color)) { var strHex = "#"; // 把RGB的3个数值变成数组 var colorArr = color.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");

转载 Vue项目开启gzip压缩

转载于：Vue项目开启gzip压缩做了很多Vue项目，都有一个通病，随着代码越来越庞大，首页加载越来越慢，有时候出去演示，网络不好的时候，转半天，登录页面还没有出来。这主要是一些大的js文件造成的，这就是Vue的缺点吧，所有的代码都打包到一个JS文件里，网络传输太慢，有的项目都十几兆。gzip的本质，个人觉得是在build的时候打包两份代码，一份压缩的，一份未压缩的，然后nginx在接收请求时，优先选择压缩后的格式返给客户端。这里主要测试了使用gzip进行压缩，来压缩js和css文件大小，提升加载速度

原创 flex布局布局之flex:1属性详解

弹性布局基本概念采用Flex布局的元素，称为 Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main

转载 静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

转载自：https://www.cnblogs.com/yanayana/p/7066948.html静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别一、静态布局（Static Layout）即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景

原创 vue渲染时数据对象里面的子对象的属性报错undefined，但页面正常渲染

vue渲染时数据对象里面的子对象的属性报错undefined，但页面正常渲染。报如图所示错误页面中报错的位置原因是在data中申明了空对象，页面在渲染的时候，数据还没获取到的时候，首先渲染的是初始值，所以会报错。而数据获取回来之后，由于vue双向绑定的特点，页面会再次正常渲染。所以从结果上看是页面既成功渲染了，又有报错信息。解决办法1.使用v-if判断2.申明对象时为对象设置初始值 export default { data() { return { da

原创 vue项目打包element-icons路径错误

问题描述vue项目打包之后，部署运行时报错显示字体路径错误/static/css/static/fonts/element-icons.535877f.woff，正确路径是/static/fonts/element-icons.535877f.woff。解决办法1.在build/utils下的ExtractTextPlugin.extract下添加publicPath:'../../' // (which is the case during production build) if

原创 vue引用第三方组件修改组件样式在scoped下作用无效可添加/deep/或者＞＞＞

以ElementUI为例。在使用el-card组件的时候,想修改hearder的样式<style scoped>.el-card .el-card__header{ background-color: salmon;}<style/>在scoped的状态下，这样修改并不生效这个时候用/deep/或者>>>就会生效了<style scoped>.el-card /deep/ .el-card__header{ back

原创 最新MySQL下载安装教程

1.下载MySQL数据库可以访问官方网站：https://www.mysql.com/2.点击DOWNLOADS，滑到最底部，点击MySQL Community（GPL） Download3.点击MySQL Community Server 进入下载4.选择左边是通用最新版本，选择右边可以选择之前的老版本5.版本选择，下载...

原创 windows下无法安装node-sass解决办法

解决办法：主要是windows平台缺少编译环境 python 2.7， 接着1、先运行：npm install -g node-gyp2、然后运行：运行npm install –global –production windows-build-tools可以自动安装跨平台的编译器：gym或者set SASS_BINARY_SITE=https://npm.taobao.org/mirro...

原创 js实现点击图片就下载图片，适用于Google，Firefox浏览器

// 图片下载 /** * url: 图片的路径,必需参数 * name：图片的名称,非必需参数 */ downloadByBlob(url, name) { let image = new Image() image.setAttribute('crossOrigin', 'anonymous') image.src = url image.onload = () => { let ...

原创 windows系统查看端口被占用，杀掉进程方法

原创 图片转换ArrayBuffer转Base64

const arrayBufferToBase64Img = (buffer) => { const str = String.fromCharCode(...new Uint8Array(buffer)); return `data:image/jpeg;base64,${window.btoa(str)}`;}

原创 如何使用filter方法递归过滤Tree数组对象

const treeData = [{ title: "1", key: "1", children: [{ title: "1-1", key: "1-1", children:[{ title:"1-1-1", key:"1-1-1", },{ title:"1-1-2", key:"1-1-2", }] }, { title: "1-2", key: "1-2", },{

原创 本地代码上传到码云仓库的办法，以及上传失败的解决办法

1.先在码云线上仓库创建一个项目，项目名为XXX2.在本地电脑新建一个文件夹，文件夹名为xxx(要跟线上仓库项目名一致)3.进入本地xxx文件夹内，右键Git Bash Here,打开git命令窗口4.执行git init命令 ，初始化本地仓库git init5.将要上传的码云的代码文件放入xxx文件夹内，再执行git status命令，查看工作区代码与暂存区的区别,会发现工作区已修改的文件都是红色字体标识出来的git status6.红色表示代码还在工作区，要将代码放入缓存区，也就是暂存

原创 vue生命周期详细图解

原创 如何解决node-sass安装报错的问题

//首先卸载已安装的[email protected] uninstall [email protected]//重新安装npm install [email protected]//如果报关于gyp的错，安装相关的gyp编译环境npm install -g node-gyp//再重复执行以上的卸载安装步骤//安装完成启动项目试试npm run dev...

原创 JAVA单例设计测试

单例demopackage cgb.java.model.singleton;import java.util.ArrayList;import java.util.List;/** * 需求：设计一个类，保证此类的实例在一个JVM内部只有一份 */class Singleton01{//此设计在多线程环境中存在不安全 private Singleton01(){} privat...

转载 【转载】Java中String常用方法

转自博客园：https://www.cnblogs.com/liujiquan/p/7808501.htmljava中常用的String方法length（）字符串的长度String a = "Hello Word!";System.out.println(a.length);输出的结果是字符串长度10。charAt（）截取一个字符String a = "Hello Word...