- 博客(58)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 Vue 插槽 Slot 的数据传递
在某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据。要做到这一点，我们需要让子组件在渲染时将一部分数据提供给插槽。可以像对组件传递 props 那样，向一个插槽的出口上传递数据和内容，然后再父组件里面使用 slot-scope 的方式去接收传递过来的数据，获取数据的方式有两种， 可以通过结构赋值的方式去获取，或者把所有传递过来的内容保存到一个对象中，然后再去使用。
2023-05-18 16:39:21
2523
1
原创 Vue 集成 luckySheet在线文档
Luckysheet ，是一款纯前端类似 excel 的在线表格，支持 excel 的大部分功能，行和列操作、单元格操作、公式和函数、图表、插入图片等功能，该插件功能强大、配置简单、完全开源。在线案例。
2023-03-31 14:32:24
1949
原创 CSS+ JS 实现手电筒效果
JavaScript 结合 CSS 打造的一款图片特效，当鼠标拖拽滑块时，让本该置灰的图片局部恢复本来的颜色。且该效果随着你的鼠标的按下时的移动而移动。
2023-03-24 10:31:10
964
原创 前端实现登录拼图验证
不知各位朋友现在在 web 端进行登录的时候有没有注意一个变化，以前登录的时候是直接账号密码通过就可以直接登录，再后来图形验证码，数字结果运算验证，到现在的拼图验证。这一系列的转变都是为了防止机器操作，但对于我们来说，有亿点麻烦，但也没办法呀。今天我们也一起实现一个拼图验证。
2023-01-17 15:17:17
8365
5
原创 Vue 实现拖拽模块(五) - 上 定义元件的触发事件
本文主要介绍了选中元件后配置元件的事件，同时支持配置触发方式、事件类型、事件参数（演示参数，可拓展...）
2023-01-03 15:47:49
1058
2
原创 Vue 实现拖拽模块(二)自定义拖拽组件位置
上文介绍了 [拖拽添加组件](https://blog.csdn.net/qq_40146638/article/details/127686169) 的简单实现，本文将继续给大家分享如何自定义拖拽组件位置的简单实现，文中通过示例代码介绍，感兴趣的小伙伴们可以了解一下
2022-11-17 11:40:16
5782
7
原创 Vue 实现拖拽模块(一)拖拽添加组件
本文主要介绍了vue拖拽组件实现构建页面的简单实现，文中通过示例代码介绍，感兴趣的小伙伴们可以了解一下。
2022-11-04 15:09:36
6588
原创 原生实现滑块解锁功能(简易版本)
本文实例为大家分享了 js 实现简单滑动解锁功能，供大家参考，具体内容有解锁功能、重置功能、进度条功能、结果提示功能、随机生成滑块位置。
2022-10-13 15:07:31
1365
原创 JS 获取图片的实际大小
根据图片链接获取图片大小,width/heightlet image = new Image() image.onload = function() { let width = image.width let height = image.height let fileSize = image.fileSize console.log(image)
2022-07-25 18:02:21
5563
原创 使用 Fragment ，实现 Vue 的模板编译
Vue会把用户在template标签中写的内容进行编译，找出原生的html和非原生的html内容，经过处理生成Fragment，而Fragment会经过patch过程从而得到将渲染的视图中的Fragment，最后根据Fragment创建真实的DOM节点并插入到视图中，最终完成视图的渲染更新。AFragment是原生JS的一种创建文档片段的方法，如果我们对根元素中的每个元素做逐个处理的话，这会引起很大的性能问题，会多次触发浏览器的回流和重绘。......
2022-07-18 16:13:18
729
原创 彻底掌握 Promise - 原生 Promise.catch 的实现(七)
@[TOC](彻底掌握 Promise - 原生 Promise.catch 的实现(七))前言在之前的文章中我们实现了简易版本的 Promise 以及它的大部分原生方法提示：以下是本篇文章正文内容，下面案例可供参考Promise.catch 方法实现起来比较容易理解，所以本文中的描述可能较少Promise.catch 的实现在 Promise 内部使用 static 关键字定义一个静态方法catch 方法接收一个失败的函数作为参数创建一个 Promise 对象，调用失败的 r
2022-05-17 11:30:12
517
原创 使用CSS变量实现切换主题
使用CSS变量实现切换主题什么是 CSS 变量具体实现主要逻辑light 文件drak 文件使用变量效果参考drak 模式light 模式什么是 CSS 变量在 CSS 中，在整个代码中重复使用单一颜色或文本大小是很普遍的，这意味着在整个文档中多次重复使用相同的颜色或文本大小。 使用 CSS 变量，可以将颜色或文本大小值分配给变量，并在多个位置使用。 与使用传统 CSS 值相比，这使更改值更容易并且更方便。如果不懂 CSS 变量 的话可以去看 这篇文章 CSS 变量具体实现创建两个保存不同
2022-04-28 16:21:14
1266
原创 彻底掌握 Promise - 原生 Promise.finally 的实现(六)
目录前言一、finally的使用方法具体使用方法执行结果二、实现原理三、具体实现总结前言在 [\[ 彻底掌握 Promise - 原生 Promise.all 的实现(四)\]](https://blog.csdn.net/qq_40146638/article/details/123813571) 中我们已经实现了 Promise 的 all 方法，下面这篇文章，主要讲述 Promise.finally 方法的实现。finally()方法返回一个Promise。在promise结束时，无论结果是
2022-04-22 11:47:46
3292
原创 彻底掌握 Promise - 原生 Promise.resolve 的实现(五)
目录前言一、resolve 的使用方法语法参数返回值示例1： 普通类型的调用示例1：执行结果示例2： 传入一个 Promise 对象示例2：执行结果二、实现原理三、具体实现总结前言在 [\[ 彻底掌握 Promise - 原生 Promise.all 的实现(四)\]](https://blog.csdn.net/qq_40146638/article/details/123813571) 中我们已经实现了 Promise 的 all 方法，下面这篇文章，主要讲述 Promise.resolve 方法
2022-04-18 16:17:51
1884
2
原创 CSS变量的声明和修改
CSS变量的使用CSS变量描述CSS变量的声明CSS变量的使用CSS变量的修改CSS变量描述复杂的网站都会有大量的 CSS 代码，通常也会有许多重复的值。举个例子，同样一个颜色值可能在成千上百个地方被使用到，如果这个值发生了变化，需要全局搜索并且一个一个替换（很麻烦～）。自定义属性在某个地方存储一个值，然后在其他许多地方引用它。CSS变量的声明CSS 变量的声明一般都是在根元素上面声明，确保根元素下的所有元素都可以访问到这个CSS 的自定义属性。这里根元素使用 :root 来表示，也可以在其他
2022-04-15 15:56:08
2077
原创 彻底掌握 Promise - 原生 Promise.all 的实现(四)
在 Promise 中内置了一些静态方法可以供我们更好的去处理异步操作，比如Promise.all语法 Promise 接收一个可迭代对象作为参数，也就是 Array、Set的数据结构，并且只返回一个Promise 的实例，返回结果是一个数组，数组包含了所有的回调结果。说明 此方法在集合多个 promise 的返回结果时很有用。 完成（Fulfillment）： 如果传入的可迭代对象为空，Promise.all会同步......
2022-03-29 11:31:53
1327
原创 彻底掌握 Promise - 原生 Promise 的实现(三) 将then方法的回调函数变成可选参数
在 [ 彻底掌握 Promise-原生Promise的实现(二) ] 中我们在 Promise 简易版本的基础上，实现了 Promise 的链式调用和 Promise 执行过程中对函数执行的异常情况的处理。下面我们思考一个问题：如果 Promise 一直调用 then 方法不给他传递任何的回调函数的话，那么我们通过 resolve / reject 传入的值，会被第一个 then 方法获取到？ 还是会被最后一个 then 方法获取到这个 resolve 中返回的值呢？......
2022-03-25 16:20:10
545
原创 彻底掌握 Promise-原生Promise的实现(二) Promise的链式调用
在 彻底掌握 Promise- 原生 Promise 的实现(一)已经初步实现了 promise 的简易版本，这距离实现完整版本的 Promise 还有一段距离，下面我们将在简易版本的基础上增加Promise 的链式调用 异步情况下 Promise 的链式调用 处理函数执行的异常情况以下代码都是对简易版本 Promise 去实现的，所以这里只显示变更的地方，完整版本在文末贴出Promise 的链式调用 下面我们依然还是通过逆解析的方式去通过 Promise 的链式调用的用法.....
2022-03-23 16:26:29
5970
原创 彻底掌握Promise-原生Promise的实现(一) Promise 的简易版本
Promise简介 在ES6(ES2015)正式发布时中，Promise被列为正式规范，作为ES6中最重要的特性之一。 Promise的出现主要是为了解决回调地狱问题，通过调用.then方法逐层去向下调用 Promise 对象有以下两个特点:1、对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：pending: 初始状态，不是成功或失败状态。 fulfilled: 意味着操作成功完成。 reject......
2022-03-21 16:58:47
765
4
原创 Vue + ElementUI的el-cascader实现多选三级省市区(全选省 / 市 保存的是省市)
el-cascader多选三级省市区(全选省/市 保存的是省市Code)业务场景：需求是多选三级省市区, 开发一个区域组功能(而且产品也是比较希望使用el-cascader来进行实现)需求实现截图:那就开始整呗, 找ElementUI的组件去实现这个// Vue的基本样式<el-cascader v-model="regionList" ref="cascader" :options="treeList" :props="{ multiple
2021-01-27 14:52:48
6157
17
原创 Vue二次封装ElementUI的tree树形组件
项目场景： 在多数后台管理系统中都会有dom-tree树形选择组件的需求, 所以对elementUI的el-tree做了二次封装解决方案： 二次封装需要完成的目标让组件可复用 满足项目基本需求 兼容多种使用场景<template> <div class="select-city"> <el-input v-if="showFilter" p...
2020-11-29 10:51:13
2308
2
原创 ES6的reduce用法
1. 求和数组(基本用法)let list = '12345'.split('')const total = list.reduce((val, oldVal) => val + oldVal)console..log(total) // 152. 去重数组
2020-08-24 18:27:51
7218
原创 JS的变量声明方式以及区别类型
目录 JS的数据类型 JS的变量JS的数据类型1.String(字符串)2.Number(数值)3.undefined(表示未找到)4.null(空值)5.Boolean(布尔值 true/false)6.Object(对象)7.Symbol(ES6新增 表示一个唯一的值/标识)JS的变量声明方式变量的概念：变量是存储数...
2020-06-22 17:55:54
322
原创 JS通过原型链检测变量所属类型
1.Object.prototype.toString.call(a) // 所有类型都能判断 返回值为 [object type]Object.prototype.toString.call('An') // "[object String]"Object.prototype.toString.call(1) // "[object Number]"Object.prototype.t...
2020-06-22 17:54:24
319
原创 使用iview的表格实现数据导出
需求场景：需要将前端的数据导出为.csv或者excel文件出来前端导出的弊端：当前端导出数据量较大的数据时,会比较卡顿(建议还是后端用java来做导出比较好)具体实现：在Iview里面已经内置了exportCsv()方法我们在使用iview这个框架的时候可以调用这个API来实现数据导出的需求<i-table :columns="columns8" :data="data7" size="small" v-ref:table></i-table>1..
2020-06-11 14:40:43
1993
原创 ElementUI手动控制popover弹层的显示与隐藏状态
场景复现： 在我们需要在列表表头增加筛选条件的时候需要组合使用Table + popover组件，同时增加上table的loading功能，就会出现table显示加载中的状态，而popover的弹层也并没有被关闭，popover的显示状态一般都是由我们手动去触发，开 / 关。无图无真相：就会出现这种情况，我这里使用的是click的手动触发，所以出现这种情况时候的解决方案为<popover ref="popover"></popover>// Elem...
2020-05-18 16:41:06
9263
1
原创 修改ElementUI的message组件的样式
ElementUI的组件适用于大部分场景，但是部分组件的样式需要更改，今天就简单说一下修改ElementUI的message组件的样式
2020-01-06 10:15:07
21676
5
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人