- 博客(55)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 处理元素卡在视野边界，滚动到视野内
本示例处理场景：点击底部的折叠面板，展开后移动端滚动条位置不变，导致展开内容在视图外。造成面板展开无内容的错觉。此API可绑定元素并监听元素是否在视野内。
2024-12-27 17:51:53
469
原创 Element-ui table组件：单元格未溢出，悬浮出现popover提示框
源码中，给开启溢出提示的列单元格都添加了class,并且宽度为实际列宽-1。若单元格内容宽度100%撑开，则会计算为溢出情况。单元格内容宽度设置100%-1。
2024-12-25 10:13:45
328
原创 css实现边框双色凹凸半圆
使用伪元素after画出缺口外框，伪元素before画出圆形框（若带有阴影，裁取时坐标需加上阴影扩散宽度）。裁出显示区域,内凹圆可任意移动显示位置。
2024-10-30 15:09:57
584
原创 Vue组件实例化(普通+进阶版)
原因：new出一个实例时，propsData传参时先进行了getter取值（依赖收集），再将值传入实例中，此值不会进行依赖收集，失去响应性。普通版实例化只能通过propsData属性传参，且传入的响应式变量失去了响应性。进阶版通过render函数转化实现响应式。
2024-04-11 18:04:43
456
1
原创 dom伪元素——边框阴影效果
2.溢出滑动元素对应一端放一个空元素2，使其跟随元素滚动，伪元素层级高于阴影空元素1，设置背景颜色。3.滚动条滑动至边界，元素2将元素1覆盖，即达成阴影消失。1.目标阴影处放一个空元素1，设置其伪元素有阴影效果。元素溢出滑动阴影覆盖，滑动到达顶部阴影消失。
2024-02-04 09:54:11
516
原创 流程图的渲染实现
效果图如下：流程节点类型：1.普通节点2.分支节点难点：1.数据结构定义2.节点有序渲染3.分支节点渲染数据结构：flowNodesMap：节点映射对象；(以节点id为关键字存储节点数据)：起始节点Id；（方便从映射对象中找出起始节点数据）节点数据中关键 ：nextId：下一节点id（若后面无节点默认值为-1）preId :前一节点id（起始节点默认值为1）
2022-12-08 16:43:19
599
原创 关于element-ui form组件自定义校验
validator 传入自定义校验回调参数。自定义校验内容可直接在data方法中定义。form表单内 元素关联值为对象关键字。
2022-09-28 10:32:55
755
原创 element-ui 源码学习 代码规范及实用方法
kebabCase方法：将字符串转换成以 - 链接的字符串const kebabCase = function(str) { const hyphenateRE = /([^-])([A-Z])/g; return str .replace(hyphenateRE, '$1-$2') .replace(hyphenateRE, '$1-$2') .toLowerCase();};ES6 的Object.assign()方法:合并两个对象为一个对象( 这里使....
2022-06-16 10:23:23
517
原创 vue2插件 @vue/composition-api知识概览
vue2中若想使用Vue3的API可通过安装引入@vue/composition-api
2022-05-18 17:44:40
882
原创 vue 路由
路由的基础使用流程 引入 vue-router.js (在 vue.js 之后) 定义相关的路由组件（定义方式与普通组件相同，只需要通过路由来跳转） 进行路由配置（路由表） 新建路由对象，并进行配置 在vue组件实例中配置路由 在模板中展示路由组件的位置，设置<router-view> 通过 router-link 标签中的to属性 实现路由跳转（默认解析为a标签，可以用tag属性改变为其他标签）路由的原理：当url地址的hash值改变时，就会去路由表中进行.
2022-02-18 16:00:02
153
原创 css布局问题
1.行内文本不换行：单行overflow: hidden; // 移除隐层也必须添加text-overflow: ellipsis; // 这是出现省略号的关键代码white-space:nowrap; // 强制不换行多行： overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; // 控制截取几行...
2022-02-18 15:58:01
140
原创 canvas实现扩散涟漪效果
实现思路：canvas 画圆，通过改变圆的半径及其透明度实现涟漪效果。实现效果如下：代码实现：涟漪配置：let config = {'cut': 0.2,'startRadius': 5, //起始半径'haloRadius': 25, //扩散半径'times': 3, //次数'stepTime': 2, //间隔时间'stroke': 'RGBA(255,185,0,0.5)', //线的颜色'color': '#ffcb56', //颜色'time': 3,
2022-01-20 10:22:15
1140
原创 Echarts——中国地图绘制
首先准备中国城市分布Geo数据 china.jsonhttps://download.csdn.net/download/heal_l/75671467https://download.csdn.net/download/heal_l/75671467
2022-01-13 17:08:50
18045
原创 Echarts大屏饼图（可自动轮播）
API: highlight 启动高亮downplay 关闭高亮设置定时器：逐个开启饼块的高亮（注意：在开启下一个前将上一个高亮关闭）import * as echarts from 'echarts';var chartDom = document.getElementById('main');var myChart = echarts.init(chartDom);var option;option = { title: { text: 'Refe...
2022-01-13 15:17:13
2439
原创 Echarts 大屏柱状图(可自动切换图标)
import * as echarts from 'echarts';var chartDom = document.getElementById('main');var myChart = echarts.init(chartDom, 'dark');var option;var data = { 日: true, 月: false, 年: false};// X轴数据集var xAxisArry = { 日: ['1号', '2号', '3号'], 月: ['1月.
2022-01-10 10:40:41
902
转载 Vue——$atters、$listeners作用
$atters官方解释：包含了负作用域中不作为prop被识别(且获取)的特性绑定(class 和 style 除外)。当一个组件没有生命任何prop时，这里会包含所有负作用域的绑定(class 和 style 除外),并且可以通过v-bind="$attrs"传入内部组件 ——在创建高级别组件时非常有用。解析:接收除了props声明外的所有绑定属性（class 和 style 除外）。图解：由于child.vue 在 props 中声明了 name 属性，$att...
2022-01-05 15:03:09
957
原创 点击事件动态调用不同组件
通过一个点击事件动态的调用相应的组件传入的参数中包含对应组件路径数据{pageComponent: entry.component }openTopEntry (entry) { this.kPromptPage({ pageComponent: entry.component // 对应组件 }) }map.js//获取对应options的配置，并以对象的形式返回const getProps = function (options, d...
2021-12-29 17:05:31
667
原创 前端：this指向问题，强制改变this指向
this指向问题全局函数中调用thisthis指向window在对象的方法中调用thisthis指向的是调用者事件处理函数中的thisthis指向事件源定时器/计时器中的this‘this指向window强制改变this指向的三种方法 apply() 函数名.apply(this指向对象，[原函数的参数数组])【注意：】apply会让原函数立即执行。apply第二个参数是一个数组 call() 使用格式：函数名.ca...
2021-11-18 14:38:48
177
原创 前端路由拦截
路由拦截器路由全局守卫（在渲染之前执行），router.beforeEach((to,from,next)=>{ let token = localStorage.getItem("token"); if(token){ // next放行 next(); }else{ if(to.fullPath === '/login'){ next(); }else{ next("/login"); } }})...
2021-11-18 14:34:50
837
原创 登录鉴权中前端验证部分
一 前端部分： 路由验证 应用场景 ：例如首页，分类是没有登录的用户也可直接进入 购物车、个人中心等版块需要登录才能进入 实现步骤： (1) 在路由配置中，需要给登录进入的路由添加meta元信息 { path: '/...
2021-11-18 14:32:26
258
原创 SASS样式穿透三种实现方式
// 第一种 >>>.my-el-form-item{ & >>> .el-form-item__content{ line-height:12px; }} //第二种 /deep/.my-el-form-item{ /deep/ .el-form-item__content{ line-height:12px; }}// 第三种::v-deep 和第二种类.
2021-11-03 12:19:16
5731
2
原创 构造函数
什么是构造函数？用new关键字来调用的函数被称为构造函数var arry = new Array();创建对象的方式：new Object(){}工厂函数：加工原料 ，形参 进行原料加工 创建对象，并将传进来的参数赋值给对象 将产品运出 ，return 将创建好的对象返回构造函数：构造函数的命名规范：首字母大写。不要使用create之类的字。执行过程：当以new 关键字调用该函数时，会创建一个新的内存空间 函数内部this指向该内存空间 执行函...
2021-10-12 15:56:11
336
原创 nodejs 框架：Express
express时基于http模块封装出来的框架，能够提高我们的开发效率。安装：npm install express创建服务器：// 创建服务器// 1.导入模块const express = require("express");// 2.使用express（）实例化创建一个服务const app = express(); //创建的express的实例// 添加路由app.mothod(path,handler) mothod：表示请求方式 get/post等 ,
2021-10-12 15:52:03
237
原创 闭包详解链接
指的是：有权访问另一个函数作用域中变量的函数。（函数嵌套函数，外 部函数就是闭包函数）作用域：全局变量缺点：（尽可能减少使用）可能造成命名冲突全局变量比较占内存。局部变量：定义在函数内部的变量。闭包的应用：闭包可以延长变量的作用域...
2021-10-12 15:51:02
100
原创 组件的生命周期
3阶段，8个钩子函数生命周期阶段：创建阶段： beforeCreate created beforeMount mountedbedorCreate :第一个生命周期函数，vue实例刚被创建出来，此时还不能访问data和methods中的属性 created ：data 与 methods 已经初始化，但是还没有编译好模板（还未按vue语法解析html标签中的数据引用） beforeMount ：模板已解析完成，但是没有放入到页面中 mounted：模板已编译完成，...
2021-10-12 15:48:11
113
原创 vue组件通信基础常用方式
组件关系：父子关系，非父子关系通信方式：父子通信 ： 父组件的数据传递给子组件 子父通信 ： 子组件的通信传递给父组件 非父子通信 ： 非父子关系组件之间的数据通信父子通信步骤：数据传递 子组件绑定自定义属性，传递要传递的数据 <son :father-meg="fatherMeg"></son> （father-meg为自定义属性名 fatherMeg为传给子组件的数据） 数据接收 props属性接收数据 数...
2021-10-09 17:00:33
79
原创 Session 会话
先谈 cookie 网络传输基于的Http协议，是无状态的协议，即每次连接断开后再去连接，服务器是无法判断此次连接的客户端是谁。 如果每次数据传输都需要进行连接和断开，那造成的开销是很巨大的。 为了解决这个问题，cookie就应运而生，当用户登陆成功，服务器会在返回响应数据的同时也携带着cookie给到客户端， 之后客户端每次发起请求只要携带着这个cookie，那就免去登录的步骤。cookie是保存在客户端的数据。 这确实极大改善了网络传输的效率。当时由于cookie是保存在.
2021-09-24 08:48:29
113
原创 文件的上传和加载
multer 第三方依赖包Multer 是一个 node.js 中间件，用于处理multipart/form-data类型的表单数据，它主要用于上传文件。它是写在busboy之上非常高效。注意: Multer 不会处理任何非multipart/form-data类型的表单数据。使用：Multer 会添加一个body对象 以及file或files对象 到 express 的request对象中。body对象 ：包含表单的文本域信息，file...
2021-09-24 08:47:57
344
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人