- 博客(42)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 TinyMce富文本编辑器使用【详细】
TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。
2023-11-10 14:48:48
1526
2
原创 JavaScript实现跨标签页通信
💡 在 Web 开发中，有时我们需要实现不同页面之间的数据传递和事件触发，比如一个页面打开了另一个页面，然后在新的页面中操作后需要更新原来的页面的内容。这种场景在电商、支付、社交等领域都很常见，那么如何用js来实现不同页面之间的交互呢？下面提供几种常见的方法供大家学习参考！
2023-11-02 15:01:43
1433
原创 Vue3+i18n多语言动态国际化设置步骤
i18n：Vue.js 的国际化插件。它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中
2023-05-23 09:41:38
1227
原创 Mac FortiClient VPN一直连接不上？正确的安装步骤来了！
FortiGate是全新的下一代防火墙，在整个硬件架构和系统上面都有新的设计，在性能和功能上面都有了很大提升，具有性能高、接口丰富、功能齐全、安全路由交换一体化、性价比高等优势。FortiGate全新下一代防火墙是面向云计算、数据中心和园区及企业网出口用户开发的新一代高性能防火墙设备
2023-05-16 10:00:49
7192
原创 BFC到底是什么？如何理解
BFC 全称：Block Formatting Context， 名为 "块级格式化上下文"。W3C官方解释为：BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行布局。
2023-02-16 10:29:44
1697
原创 H5页面在ios手机滑动卡顿问题
在我们开发中，H5页面多多少少会在外部打开，比如微信，钉钉，那么就会存在一些意想不到的bug！此次主要针对移动端H5页面在iOS端产生的 橡皮回弹（橡皮筋效果）造成滑动卡顿问题做一下相关记录，希望对遇到类似问题的同学有所帮助。
2022-11-23 10:51:46
2815
原创 纯css实现多行文本展开收起
这里我们也需要用到这个特性，首先加一个 input，然后把之前的 button 换成 label ，并且通过 for 属性关联起来！有一个技巧，凡是碰到需要动态修改内容的，都可以使用伪类 content 生成技术，具体做法就是去除或者隐藏按钮里面的文字，采用伪元素生成！这样，在点击 label 的时候，实际上是点击了 input 元素，现在来添加两种状态，分别是只显示 3 行和不做行数限制。这里还有一个小问题，“展开”按钮在点击后应该变成“收起”，如何修改呢？查看完整代码及体验效果。
2022-11-10 14:46:36
451
原创 canvas绘制video
canvas绘制video主要思路：Canvas中可以使用ctx.drawImage(video, x, y,width,height)来对视频当前帧的图像进行绘制，其中video参数就是HTML5中的video标签。故我们可以通过Canvas的动态效果不断获取video当前画面，渲染到Canvas画布上。并且通过改变video标签的属性，来实现在Canvas中处理视频的一整套效果。可以理解成在Canvas中新建一个播放器，该播放器视频源是video标签创建，播放器的各种方法最终指向对video标签本身
2021-12-30 10:34:37
3950
原创 移动端H5-iPhone安全距离适配
安全区域？安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响，如下图蓝色区域：也就是说，我们要做好适配，必须保证页面可视、可操作区域是在安全区域内。更详细说明，参考文档：Human Interface Guidelines - iPhoneXviewport-fitiOS11 新增特性，苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展，用于设置网页在可
2021-12-27 14:51:03
2167
原创 uniapp中scroll-view的下拉刷新
uniapp下拉刷新uniapp的下拉刷新有两个方法, 一种是整体的下拉刷新, 使用页面生命周期函数onPullDownRefresh; 另外一种是局部的下拉刷新也叫自定义下拉刷新, 使用scrpll-view组件中的自定义下拉刷新事件。一.整个页面的刷新(onPullDownRefresh)在 js 中定义 onPullDownRefresh 处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。【官方文档】这里不再做过多介绍！今天的重点在下面????二.自定义页面刷
2021-11-20 16:11:26
15935
5
原创 uniapp如何实现锚点定位?
在scroll-view组件中有一个scroll-into-view属性：（值应为某子元素id。设置哪个方向可滚动，则在哪个方向滚动到该元素）。【官方scroll-view说明】此属性的意思则是此属性的值为子元素设置的id时，则可跳转到子元素位置。先看下效果：直接上代码：html:<template> <view> <scroll-view scroll-y="true" :scroll-into-view="intoView" :style="`height
2021-11-12 14:22:47
3500
2
原创 前端分页加载功能实现？
分页功能一般是后台实现，前端请求就完事了。但是偶有情况…那也很无奈！数据少的情况，前端可做！数据多了，还是得建议后台来做！！【注】我这里其实主要用的是Array.slice(start, end)方法！直接上代码，不啰嗦！【效果】代码：html:<template> <view> <button @click="PageLoad">点击加载</button> </view></template>js:
2021-11-12 11:34:42
959
原创 uniapp + sqlite 缓存聊天数据
【前言】缓存，这是一个老生常谈的话题，也常被作为前端面试的一个知识点。H5端为localStorage，浏览器限制5M大小，是缓存概念，可能会被清理；App端为原生的plus.storage，无大小限制，不是缓存，是持久化的。今天这里主要演示sqlite在uniapp中的使用！除此之外，其他数据存储方案：H5端还支持websql、indexedDB、sessionStorageApp端还支持IO文件等本地存储方案。SQLitesqlite语法学习首先需要开启sqlite这样你就可以在
2021-10-25 11:26:05
2096
5
原创 nvm的安装与使用（Mac 版）
NVM是什么？nvm(node version manager)是一个用于管理nodejs版本的工具。有时我们的项目可能会依赖于不同版本的nodejs，需要进行node版本的切换，可能就是到官网下载、覆盖安装、当要回退时又得下载会原来版本、覆盖安装…这样子太麻烦了。那么nvm就是为解决这个问题而生的，让你方便快捷地切换node版本。删除本地node首先，你要确保目前没啥工作项目做，再来搞这个，不然出了什么幺蛾子，本楼不负责哈安装nvm前先记住当前已安装的node版本号、然后将其卸载删除。（原因：1、
2021-08-06 11:48:40
537
原创 Error connecting to 127.0.0.1:27017 :: caused by :: Connection refused
MongoDB对于MongoDB的安装请戳【MongoDB基础】官方【MacOS的安装下载】菜鸟教程【MongoDB】这里主要说一下意外关闭，再次启动MongoDB数据库，拒绝连接报错问题！报错信息如下：connecting to: mongodb://127.0.0.1:27017/?compressors=disabled&gssapiServiceName=mongodbError: couldn't connect to server 127.0.0.1:27017, co
2021-05-21 15:46:31
5887
1
原创 html2canvas 前端保存页面为图片
html2canvas前言：前端保存页面为图片，最常见的方案都是利用html2canvas来生成图片。html2canvas详细介绍html2canvas官网应用场景PM要求将公司子公司…获得的一些奖项，前端按要求展示；并且要把H5页面的局部保存图片分享出去。解决方案：html2canvas使用：npm install --save html2canvas将html2canvas引入到组件中 import html2canvas from "html2canvas"具体：取局部
2021-01-18 13:20:50
339
原创 Vue如何引入远程JS/css文件
Vue如何引入远程JS/css文件应用场景: 比如说你在某个项目单独要使用阿里巴巴矢量图标，又不想下载，想直接使用外部资源（cdn…等），import不可以，那么你就可以使用这种方法!(方法不错记录一下)使用Vue 的 createElement 方法：export default { components: { "remote-css": { render(createElement) { return createElement("link", {
2021-01-11 15:17:56
2217
2
原创 proxy代理-简单实现双向数据绑定（表单处理）
Proxy可以理解成，在目标对象之前架设一层 “拦截”，当外界对该对象访问的时候，都必须经过这层拦截，而Proxy就充当了这种机制，类似于代理的含义，它可以对外界访问对象之前进行过滤和改写该对象。我们直接上代码：html:<fieldset> <legend>proxy双向数据绑定</legend> <label for="uname">姓名：<input type="text" id="uname" v-model="uNam
2020-09-28 14:48:21
340
原创 JSProxy代理
前言Proxy 也就是代理，可以帮助我们完成很多事情，例如对数据（对象，数组）的处理，对构造函数的处理，对数据的验证，说白了，就是在我们访问对象前添加了一层拦截，可以过滤很多操作，而这些过滤，由你来定义。想了解更多请戳：官方文档语法let p = new Proxy(target, handler);参数1、target ：需要使用Proxy包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。2、handler: 一个对象，其属性是当执行一个操作时定义代理的行为的函数(
2020-09-28 10:53:05
306
原创 js 给url添加时间戳 解决浏览器缓存
为什么加时间戳比较好？在开发的过程中，需要给html的静态资源加上一个随机数，避免版本迭代的时候取本地缓存文件（地址如果一致，浏览器会认为这是同一个请求），可以给css文件，js文件自动加上时间戳 。html<fieldset> <legend>给url添加时间戳</legend> <img id="bgimg" alt=""> </fieldset>js<script> let cache
2020-09-28 09:27:04
2509
原创 async/await和promise的(eventloop)任务队列执行顺序？
前言:关于js异步执行顺序，宏任务、微任务这些，还有async/await已经有好多人写了。但是每个人都有自己的理解，最主要的是要自己琢磨，学习了一下，谈谈自己的理解。先上一张图压压惊！！！微任务与宏任务区别，纯白话理解：这个就像是去银行办理业务，得先排队取号。我们可以把每个办理业务的人当做是一个宏任务的存在。那么多个宏任务合在一起，可以说这就是一个任务队列。那么微任务是什么呢？一个宏任务在执行的过程中，是可以添加一些微任务的。那么微任务是什么呢？举个例子: 就像在柜台办理业务，你前边的.
2020-08-07 11:15:02
868
3
原创 移动端H5长按事件 自定义vue指令
import Vue from 'vue'Vue.directive('longpress', function (el, binding){ // if (typeof binding.value !== 'function') { // throw Error(binding.value + '不是函数') // } // Make sure expression provided is a function
2020-07-29 16:49:32
540
原创 Flutter构建失败Could not determine the dependencies of task :app:compileDebugJavaWithJavac
Flutter构建失败，ERROR：Could not determine the dependencies of task ‘:app:compileDebugJavaWithJavac’.第一种方法：FAILURE: Build failed with an exception.* What went wrong:Could not determine the dependencies of task ':app:compileDebugJavaWithJavac'.> Could n
2020-06-22 15:57:59
10152
9
原创 curl: (7) Failed to connect to raw.githubusercontent.com port 443: Connection refused的几种解决方式
curl: (7) Failed to connect to raw.githubusercontent.com port 443: Connection refused的几种解决方式？前言：最近随着flutter的发布，多数公司都开始着手使用了。但是想要开发，就要先搭建flutter开发环境。flutter安装看官网跟着操作就可以了「 flutter安装 」，这里我们要说的是 Homebrew.curl: (7) Failed to connect to raw.githubuserconten
2020-06-19 20:39:49
192063
57
原创 macOS 切换shell 更新后提示 The default interactive shell is now zsh.
macOS Catalina更新后提示 The default interactive shell is now zsh.1：在使用命令台时出现了：The default interactive shell is now zsh.To update your account to use zsh, please run `chsh -s /bin/zsh`.For more details, please visit https://support.apple.com/kb/HT208050.2
2020-06-18 16:43:18
1618
2
原创 vue刷新当前页面来重新获取一些数据
前言：有时候在页面里做了某些操作以后，需要页面刷新一下来重新获取数据。常用的几种方法：1、vue刷新当前页面有挺多种方法，比如window.location.reload()或者this.$router.go(0)但是这两种方法是会出现一瞬间的白屏，体验不好。还有就是：在需要页面刷新的地方写上this.$router.push('/emptyPage')，跳转到一个空白页。在emptyPage.vue里beforeRouteEnter 钩子里控制页面跳转，从而达到刷新的效果before
2020-05-18 19:04:09
2401
3
原创 vue-cli（vue脚手架）2.0 搭建项目超详细教程
1.安装vue-cli① 使用npm（需要安装node环境）全局安装webpack，打开命令行工具输入：npm install webpack -g或者（npm install -g webpack），安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。② 全局安装vue-cli，在cmd中输入命令:npm install --global vue-cli安装成功：安装完成之后输入 vue -V（注意这里是大写的“V”），如下图，如果出现相应的版本号，则说明安
2020-05-17 15:13:06
1583
2
原创 修改vue的配置项支持生产环境下二级目录访问的方法
1、常规打包在实际的项目中，我们通常都使用 npm run build 直接打包文件后丢到服务器上访问打包后的文件目录是这样的：访问的静态资源都是地址是这样的：我们现在要放在服务器的二级目录下访问地址，那么访问的路径就应该也加上二级目录，该如何配置尼？2、方法：找到项目的打包配置文件config下的index.js，对参数assetsPublicPath进行配置：先看一下默认的配置： build: { // Template for index.html index: p
2020-05-17 14:39:39
865
原创 callback && callback()简单理解
callback && callback()理解1、回调函数let fn = new Function('arg1', 'arg2', 'return arg1 * arg2')console.log(fn(2, 3)) // 6由此可见，函数亦可以这样创建。代码上来看，就只是对象。这样做的一个好处，可以传递代码给其他函数，函数亦是对象。function say(value) { console.warn('alert-1', value); // hi js. }cons
2020-05-12 10:18:28
3173
原创 前端加载水印？（局部 or 全局）
前端加载水印？（局部 or 全局）整理全局水印：watermark.js是一个给B/S网站系统加水印的插件，确保系统保密性，安全性，降低数据泄密风险。简单易上手，支持多属性配置，支持本地和npm包引入，支持commonjs和es6引入。全局API有init()，load()，remove()方法。使用的是css3的pointer-events事件穿透属性和opacity透明属性，Shadow ...
2020-01-14 16:20:14
2072
原创 JavaScript函数的继承---原型链、借用构造函数、组合继承
JavaScript函数的继承什么是继承？通俗来说就是子承父业。对象之间的继承（对象拷贝）for …in … 的作用以及语法// for ... in .语句可以遍历对象属性for(var key in 对象){ // key 每次遍历的属性名}获取属性值的方法：【1】对象. 属性名【2】对象[属性名]可以通过遍历对象的成员，将这些属性添加给另一个对象。从而实现继承，...
2019-11-11 15:46:51
451
原创 JavaScript---浅谈函数this指向之 call()、apply()、bind()方法
js函数之 call()、apply()、bind()引言：函数也是对象，所以函数也有属性和方法，例如：构造函数有1个prototype属性。我们也可以给一个函数对象，添加属性或者方法。 // 先声明一个构造函数 function Person(){ } console.log(Person.prototype) // Person 这个函数也是一个对象// 先声明一个...
2019-11-08 17:01:10
262
原创 Mac系统-终端命令Git操作方法
Git 操作方法将本地文件夹推送到(远程)网上Gitee/gitlab步骤 ：1、在码云新建一个仓库不要选readme2、在本地初始化git 如果没有就git init，初始化之后git add . 表示当前全部文件夹3、然后执行git commit -m “项目初始化” -m后面可以写自定义信息4、将本地仓库和网上仓库建立联系 git remote add origin ‘这里是码云...
2019-11-07 17:20:36
845
原创 JavaScript数组排序方法
JavaScript数组排序方法Es6 - sort()方法<script>let arr = [6,5,4,2,7,1,3];console.log(arr.sort()) // [1, 2, 3, 4, 5, 6, 7]function sortNumber(a,b){ // return a - b // [1, 2, 3, 4, 5, 6, 7] ...
2019-11-07 16:58:33
480
原创 websocket 初探·练习笔记
websocket 初探websocket的数据交互1、性能高2、双向 — 数据的实时性3、HTML5 IE9+4、socket.io跨域HTTP协议 — 一般文本数据流socket.io:1、兼容性？可以用来做兼容2、二进制数据流socket.io 应用场景：1、聊天室2、视频点播ajax 的跨域、以及 jsonp 的跨域性？使用工具...
2019-10-25 11:09:55
326
原创 浅谈深拷贝与浅拷贝？深拷贝几种方法。
深拷贝和浅拷贝的区别？如何区分深拷贝与浅拷贝，大白话来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。先看一个例子：let a = [0, 1, 2, 3, 4], b = a;console.log(a === b); // truea[0] = 9;console.log(a, b); ...
2019-10-16 16:05:26
554
1
原创 Es6 Object.assign()方法简单理解？
Object.assign() 的剖析？Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。【大白话：用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）】语法：Object.assign(target, ...sources) // 参数：（目标对象，...源对象） // 只有第一个是目标...
2019-10-16 13:18:16
452
1
原创 vue自动获取焦点(局部、全局指令)？
vue自动获取焦点？最简单的即是，自定义指令的方法：// 方法Vue.directive()创建，它有两个参数，一是自定义指令的名字，可以随便取，但是全部小写； // 另一个是一个对象，表示自定义指令的一些配置项// 创建一个名为 myfocus 的自定义指令,这里实际上创建了一个 v-myfocus 指令，元素中也使用 v-myfocus// 全局获取焦点Vue.directive...
2019-10-12 15:30:26
745
3
原创 vue组件之嵌套路由传参跳转？
vue组件之嵌套路由传参跳转？vue 路由传参的三种基本方式：现有场景如下，点击父组件的li 元素，跳转到 子组件，并携带参数，便于子组件获取数据。父组件中：<li v-for="article in articles" @click="getDescribe(article.id)">方案1：去目标组件页 Methods中：goPage( 携带参数 ) {//...
2019-10-12 14:33:48
1349
1
原创 JS 获取当天、上周、本周，下周开始时间，结束时间？
JS 获取当天、上周、本周，下周开始时间，结束时间？<script> // 注释：Date.parse() // 转化时间戳 // 时间 var now = new Date(); // 当前日期 var nowDayOfWeek = now.getDay(); // 今天本周的第几天 var nowDay = now.getDate(); ...
2019-10-12 14:09:33
953
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人