- 博客(191)
- 收藏
- 关注
RSS订阅原创 JS VUE 用 canvas 给图片加水印
最近写需求，遇到要给图片加水印的需求。刚开始想的方案是给图片上覆盖一层水印照片，但是这样的话用户直接下载图片水印也会消失。后来查资料发现用 canvas 就可以给图片加水印，下面是处理过程。首先我们要确认图片的格式，我们通过 input 上传的图片格式一般是 File （File 对象是特殊类型的 Blob）即 Blob 格式。
2023-10-12 23:02:52
2124
原创 DOM 事件相关知识总结——事件绑定、事件流（事件冒泡、捕获）
onclickalert'我被点击了！优点：大家都会，几乎所有的浏览器都支持缺点：夹杂在HTML代码中，代码不简洁；这种事件写法效率不高；不符合“行为，样式，结构”相分离。
2023-04-16 18:57:59
791
原创 vue 事件修饰符.capture 和 .self
dom标准事件流的触发的先后顺序为：先捕获再冒泡，即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。不同的浏览器对此有着不同的实现，IE10及以下不支持捕获型事件，所以就少了一个事件捕获阶段，IE11、Chrome 、Firefox、Safari等浏览器则同时存在。）：通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。
2023-04-14 11:09:09
224
原创 ERROR: PostCSS received undefined instead of CSS string 问题解决
百度了下，发现是本机 node 版本和 node-sass 版本不匹配，node 版本和 node-sass 版本匹配表可以去。我本地 node 版本是 v16.16.0，按照对照表我需要安装 6.0+ 的 node-sass，所以直接。新接手了一个项目，npm run serve 怎么也启动不起来，报这样的错误。安装最新版 node-sass 就可以了。
2023-03-16 18:05:45
193
原创 VUE props 传参 单向数据流
所有的 props 都遵循着单向绑定原则，props 因父组件的更新而变化，自然地将新的状态向下流往子组件，而不会逆向传递。这避免了子组件意外修改父组件的状态的情况，不然应用的数据流将很容易变得混乱而难以理解。
2023-03-01 15:06:25
707
原创 Vuex4.0.0 源码解析
对store进行局部化，这里主要对module.namespaced= true 的module进行另外处理，其内部的成员都需要进行namespace路径处理处理。创建 Module 实例，先挂在到 root 属性上，然后看有没有 modules 属性，有的话就递归，给每个模块都创建一个 Module 实例对象，直接返回了一个 Store 的实例，所以我们知道 Store 肯定是一个 class，下面我们来看下 Store 类。这样每个模块就有自己单独的 state，实现独立管理自己模块的状态。
2022-12-17 19:32:37
908
原创 REACT Redux 入门
①：store必须是唯一的②：只有store可以改变自己的内容③：reducer 必须是纯函数只有store能改变自己内容说明在reducer里我们不能直接操作state,只能通过定义新变量copy state的值，然后对新变量进行操作并 return 出新变量，不允许直接改变state。什么是纯函数？给固定的输入，就一定会有固定的输出，并且不会有任何副作用。所以对于异步函数（定时器、ajax数据请求等）、动态时间都不适意在reducer里订阅。
2022-09-24 17:47:05
643
转载 LINUX 文件与目录管理 常用命令
我们知道Linux的目录结构为树状结构，最顶级的目录为根目录 /。其他目录通过挂载可以将它们添加到树中，通过解除挂载可以移除它们。在开始本教程前我们需要先知道什么是绝对路径与相对路径。路径的写法，由根目录 / 写起，例如： /usr/share/doc 这个目录。路径的写法，不是由 / 写起，例如由 /usr/share/doc 要到 /usr/share/man 底下时，可以写成： cd …/man 这就是相对路径的写法。......
2022-08-10 17:54:22
953
原创 VUE 实现拖拽效果
在我们平时做也无需求中，往往会遇到拖拽模块的需求。刚开始没有接触过拖拽的时候，会对拖拽有陌生感，会比较担心实现起来会比较的复杂，可能自己很难搞定。然后就会去网上百度一些vue拖拽相关的插件，比如vue-draggable它是基于sortable.js的二次封装，兼容了移动端，不过我们写toB项目的时候，可能只有pc端需要拖拽功能，所以这期就结合vue教大家手写实现拖拽。......
2022-07-31 20:07:44
22799
3
原创 VUE3 watch 和 watchEffect 和 computed 的区别
VUE3 watch 和 watchEffect 和 computed 的区别
2022-07-28 17:19:55
483
原创 VUE-CLI 项目搭建规范
EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。VSCode需要安装一个插件：EditorConfig for VS CodePrettier 是一款强大的代码格式化工具，支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言，基本上前端能用到的文件格式它都可以搞定，是当下最流行的代码格式化工具。1.安装prettier2.配置.prettier
2022-06-08 10:23:43
1567
1
原创 typescript class类中 public、private、protected、static、abstract 区别
类的修饰符public默认修饰符可以自由的访问程序里定义的成员private只能在类内部访问class Animal { private name: string; constructor(theName: string) { this.name = theName; }}let zoo = new Animal('panda')zoo.name // Property 'name' is private and only accessible within class
2022-05-23 01:33:03
763
原创 JS var、let、const 变量提升
1. varvar 是全局作用域和函数作用域全局作用域——变量在任何地方都可以使用var carName = " Volvo"; // 此处可调用 carName 变量function myFunction() { // 函数内可调用 carName 变量}函数作用域——变量在函数里才可以使用function myFunction() { var carName = "Volvo"; // 函数内可调用 carName 变量}// 此处调用 carNa
2022-05-03 20:57:19
1192
1
原创 vue3 reactive 和 ref 的区别
1. 定于数据角度对比：ref 用来定义：基本类型数据reactive 用来定义：引用类型，例如对象、或数组类型的数据备注：ref也可以用来定义对象或数组类型数据，它内部会自动通过 reactive 转为代理对象<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE
2022-04-25 17:57:14
5324
转载 HTML5 新特性 dataset
在HTML5中我们可以使用data-前缀设置我们需要的自定义属性，来进行一些数据的存放。<div data-id="test">test</div>这里的data-前缀就被称为data属性 ;我们可以通过dataset来获取data属性。下面是两个例子：例1：<body> <div id="div1" data-index="0" data-a="牛啊牛啊">test1</div> <div id="div2" data-i
2022-03-31 18:04:23
1619
原创 VUE computed watch 结合监听两个值的变化 有变化就调用方法
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui"> <!-- 引入样式 --> &
2022-03-31 16:43:38
813
原创 vue element el-dialog 自定义指令实现拖拽、双击全屏
'drag': { bind (el) { const header = el.querySelector('.el-dialog__header') const elDialog = el.querySelector('.el-dialog') let isFullScreen = false let originalHeight = 0 let originalWidth = 0 let originalLeft = 0..
2022-03-20 16:54:22
1913
原创 JS Array.apply()、new Array()、Array.form()的区别
本文内容有参考 Array.apply(),new Array(),arr =[] 三者的区别 文章看 vue 渲染函数的时候，发现了数组的一种新的写法，之前知道 new Array(20) 可以建一个长度为20的数组，还知道 Array.form({length: 20}) 也可以建一个长度为20的数组，可是不知道这三个的区别，所以有时间我就对这三种写法写了一个总结...
2022-03-20 01:06:24
2501
1
原创 JS 获取某年某月有多少天
/** * 获取某年某月天数 * @param {Date} date 年月 PS: 2022-03 */const getMonthDay = (date) => { let year = Number(date.slice(0, 4)) let month = Number(date.slice(5, 7)) let days = new Date(year, month, 0).getDate() return days}getMonthDay('2022-03')
2022-03-17 14:49:50
938
原创 VUE map area coords自适应
<template> <div class="imgBox"> <img ref="img" :src="imgUrl" alt="" usemap="#controlmap"> <map name="controlmap"> <area ref="oil" shape="poly" :coords="coordsArr[0]" @click="enter('oil')"/> <area ref="
2022-03-16 18:03:53
1314
1
原创 CSS 文本 \n 解析换行
message: '爱你的每个瞬间\n像飞驰而过的地铁'<h1 className='message'>{message}</h1>显示为爱你的每个瞬间 像飞驰而过的地铁而不是换行加个样式.message{ white-space: pre-wrap; }// pre-wrap 保留空白符序列，但是正常地进行换行。显示为爱你的每个瞬间像飞驰而过的地铁...
2022-03-16 16:45:32
8713
2
原创 js 截取字符串 subStr()、substring()、slice() 方法
1. subStr(start, length)substr() 方法可在字符串中截取从start下标开始到指定length数目的字符var str = "Hello world!";console.log(str.substr(3, 5));// lo wo没有设置 length 时默认到末尾var str = "Hello world!";console.log(str.substr(3));// lo world!2. substring(start, end)string.s
2022-03-16 15:09:40
6440
原创 JS 数组中元素转换类型
1. 例如 Number 类型数组转换成 String ler arr = [1, 2, 3] ; arr = arr.map(String); console.log(arr) // [ '1', '2', '3']2. String 转 Number ler arr = [ '1', '2', '3']; arr = arr.map(Number); console.log(arr) // [1, 2, 3]
2022-03-02 20:20:46
1601
原创 CSS .style 和 getComputedStyle 和 currentStyle 区别
三个方法都能获取元素的样式，不过他们之间还是有差别1. .style.style 只能获取元素行内样式2. getComputedStyle （chrome、火狐）它可以访问所有样式，即既可以是行内样式，也可以是内嵌或链式样式。它对所有标准浏览器都可用，但 IE6、IE7 和 IE8 不支持该方法。3. .currentStyle该属性只对 IE 浏览器有效，对 Chrome 和 FF 浏览器不可用，其主要是用于兼容 IE6、IE7 和 IE8。兼容写法const sty = d.cur.
2022-02-05 02:02:40
337
原创 element-ui el-input type=“number“ 清除上下箭头
在全局 css 加上input::-webkit-outer-spin-button,input::-webkit-inner-spin-button { -webkit-appearance: none;}input[type="number"]{ -moz-appearance: textfield;}
2022-01-27 19:38:31
740
原创 element-ui 引入图片的两种方式
1. require 引入<template> <img :src="require('@/images/lokka.png')"></template><script>export default { data () { return { } }}</script>2. import 引入<template> <img :src="imageSrc"></template>&
2022-01-19 13:48:02
3936
原创 VUE 监听对象中某一个属性的变化
第一种直接监听对象的属性，写法如下<!DOCTYPE html><html><head> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></head><body> <di
2021-12-16 13:04:12
2575
原创 JS escape、unescape encodeURI、decodeURI encodeURIComponent、decodeURIComponent转码与解码
看这篇文章前，请先看下我的这篇文章字符集和字符编码（Charset & Encoding），提前了解下编码格式1. escape 和 unescapeescape() 它的作用是返回一个字符的Unicode编码值。采用unicode字符集对指定的字符串除0-255以外进行编码。所有的空格符、标点符号、特殊字符以及更多有联系非ASCII字符都将被转化成%xx格式的字符编码（xx等于该字符在字符集表里面的编码的16进制数字）。比如，空格符对应的编码是%20。escape不编码字符有69个：*.
2021-12-08 16:44:52
333
转载 字符集和字符编码（Charset & Encoding）
字符集和字符编码 —— 每个软件开发人员应该无条件掌握的知识！相信大家一定碰到过，打开某个网页，却显示一堆像乱码？还记得HTTP中的Accept-Charset、Accept-Encoding、Accept-Language、Content-Encoding、Content-Language等消息头字段？这些就是接下来我们要探讨的。1.基础知识计算机中储存的信息都是用二进制数表示的；而我们在屏幕上看到的英文、汉字等字符是二进制数转换之后的结果。通俗的说，按照何种规则将字符存储在计算机中，如’a’
2021-12-08 14:26:54
755
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人