- 博客(64)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 简单理解事件冒泡和事件捕获
解释：点击一个位置（这个位置既属于最外层，又属于中间层，还属于最内层），那么事件发生顺序为：内层—>中间----->外层。示例4：将最外层div1和中间层div2都绑定为捕获事件，那么触发顺序为：外层—>中间---->内层。示例3：只将最内层div3绑定为捕获事件，那么触发顺序为：内层—>中间----->外层。示例1：将最外层div1绑定为捕获事件，那么触发顺序为：外层—>内层---->中间。示例2：只将中间层div2绑定为捕获事件，那么触发顺序为：中间—>内层—>外层。
2023-09-21 11:12:58
471
原创 Echart图最大化最小化图表resize没效果，渲染延迟
之后，窗口【扩大、缩小、最大化、最小化】时都能触发resize方法，并打印‘窗口变化啦’，但是echarts图表只在窗口【扩大、缩小】时实时变化，在窗口【最大化、最小化】时不能实时变化，有延迟。2、也可能给存放echart图的父元素不仅设置了 display: flex;页面上添加一个echart图，无论是引入子组件的方式添加，还是直接在当前组件添加echarts图，在设置了。1、 可能是给存放echart图的父元素设置了固定宽度。方法1、去掉父元素的固定宽度。总之，就是不能设置固定宽度。
2023-06-20 11:50:44
2164
原创 1、Vue3固定定位的元素怎么设置宽度和父元素一样？2、Vue3怎么使用store的数据？3、深度监听watch数据？4、Vue3怎么使用路由router跳转?
使用 fixed 进行布局的元素，在一般情况下会相对于屏幕视窗来进行定位。但是如果父元素的 transform, perspective 或 filter 属性不为 none 时，position为fixed 的元素就会相对于父元素来进行定位。：通过设置left和right即可（实现随窗口大小会自动变化宽度）：当在一般情况下，怎么保证元素宽度跟其他元素宽度一样呢？1、从vue-router引入useRouter。2、接着从vuex引入useStore。1、首先从vue引入computed。
2023-04-13 10:29:00
718
1
原创 CSS绘制气泡对话框样式（有边框）
画两个不同大小的div，使其基本重叠（两个大小不同，不完全重叠，让红色的露出一点边边），让白色div放到最上层（设置z-index）：上面那个和带边框的小三角不好实现。
2023-04-07 10:11:59
1849
原创 Vue3 父组件数据改变Echarts子组件图表没有变化
使用vue3写页面，引入一个echarts图，父组件数据改变，图表没有重新渲染。1、echarts图组件监听数据（数据改变，重新渲染）注意：父组件正常调接口 传值即可。
2023-03-29 15:31:51
2968
6
原创 vue3 +前端实现单元格合并
如果接口数据没有给相关合并属性，那么需要前端自行处理进行合并，需要自行添加rowSpan属性（实现上图样式）代码如下：(只把修改数据的方法展示出来，开发中根据实际需要的数据格式进行修改)如果后端接口返回的数据直接给定相关合并的属性，那么直接使用即可，不需要以下方法。
2023-03-17 11:17:12
1256
原创 antd级联选择器（a-cascader）动态加载和动态回显效果实现
需要实现级联选择器动态拿到每一层级的数据并显示，同时在编辑数据时弹框回显对应的层级关系。 给组件添加 这个属性就可以实现单独勾选一级、二级、三级组织关系。（官方api没有写） 首先先在html里 模态框上写上a-cascader组件（2）data数据（3）实现动态加载数据 先实现只有动态加载数据的功能（根据官网https://1x.antdv.com/components/cascader-cn/示例即可实现）2、methods方法注意：（初始化时会先获取第一层级的数据）3、
2022-12-06 16:40:44
11018
1
原创 undefined、null、空数组、空对象是true还是false
【代码】undefined、null、空数组、空对象是true还是false。
2022-10-09 11:12:49
3059
原创 vue表单校验json数组格式和普通数组格式数据
说明：3种动作，对应3种验证规则，动作1：数字对象或数组均可（空也可）；动作2：只有数组对象可通过验证；动作3：数字类型可通过验证。（1）template（注意这里的循环数据的key值必须有，否则虽然验证有效，但是提交时不会进行验证）
2022-09-14 15:20:36
1643
转载 dom 转pdf 导出 加分页
转载自https://blog.csdn.net/xiaozhi122/article/details/124940094。
2022-08-19 09:28:40
173
原创 单行、多行文本超出显示省略号
在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面实现比较简单，可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp；注意：这是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。...
2022-08-04 17:08:42
1779
原创 Iview2 Result 处理结果自定义组件
200px;margin-top100px;height100px;#5cb85c;white;margin24px;height50px;text-aligncenter;">申请处理中...您的申请已收到，系统正在处理中。https。
2022-07-29 17:16:02
271
原创 新建和编辑共用一个表单，编辑之后新建，form表单resetFields失效
或者注意如果使用resetFields方法清空，虽然可以清空，但是在先编辑再新建时，提交的字段会有很多，而且都是编辑的那一行的数据。即使加上this.$nextTick(()=>{}）也会有同样的问题，所有直接使用赋值的方法清空。...
2022-07-28 18:57:35
660
原创 iview 表单验证问题 Select 已经选择 还是弹验证提示
问题iview的Select下拉框的时候，数据验证必填，明明选择了数据，却一直提示验证不能通过。
2022-07-20 12:07:12
1435
1
原创 vue实现excel表格复制粘贴
说明想要实现从excel表格复制内容之后，在vue页面上粘贴。有两个情况（1）无论从哪一列点击开始粘贴，都是从点击的列开始粘贴。效果如上图1（2）点击哪一列开始粘贴，从此列开始粘贴，如果点击的列不是可以粘贴的列，那么也是从可以粘贴的列开始粘贴（只能点击可以粘贴列的前面列才可以粘贴，点击后面列不能粘贴）效果如上图2注意如果多列需要粘贴，那么这些列必须是。比如columns=[name,key,age],那么不能只粘贴{name,age},中间。.........
2022-07-20 11:45:55
4448
2
转载 Echarts图表效果图（Make A Pie替代）
Make A Pie 是由社区贡献者维护的用于 Apache ECharts 作品分享的第三方非官方社区。平时做Echarts图表经常需要用到，近期官方已经关闭，找到以下几个可替代的网站。（Make A Pie替代网址）1、http://analysis.datains.cn/finance-admin/#/chartLib/all2、makeapie 复刻站点1：http://ppchart.com/3、Make A Pie复刻站点2：http://www.isqqw.com/ 备用地址http://
2022-06-14 15:03:36
507
原创 零碎知识点总结
零碎知识点总结记录相关功能写法，以供以后参考1、跳转页面写法（1）this.$router.resolve 新窗口跳转页面checkProcessInfo(row) { const design = this.$router.resolve({ name: 'form-render-db', //跳转到的路由name query: { evaluationtInformationId: row.evalu
2022-05-20 08:59:46
300
原创 element ui动态渲染表单（数组）并验证
element ui动态渲染表单（数组）并验证1、需求：点击编辑按钮，弹出编辑框（表单），从后端拿到字段后动态渲染到页面上，并校验必填2、代码实现其中：specialColumns是从后端拿到的json数组,格式如下：[ { columnName: "操作" columnType: "enumeration" columnValue: "再次上报,废弃" controlId: "FormProperty_08tc63f"
2022-05-16 13:44:19
2995
1
原创 页面滚动定位
页面滚动定位一、文本框类型的滚动介绍：点击右侧框，左侧对应的文本框出现红色边框并定位到此处。1、效果图2、代码实现<template> <div id="app"> <Row> <Col span="16" v-for="(item,i) in list"> <Input style="width: 95%;margin: 10px 0" v-model="item.templateNa
2022-05-07 18:30:43
573
原创 两个三目运算符计算规则
两个三目运算符计算规则前言：今天遇到这样的表达式不知道怎么运算，查阅资料之后记录一下。。。 step == currentStep ? 'md-create' : steps[step].completed ? 'ios-checkmark-circle' : 'md-create'示例：（1）两个三目运算符表达式（表达式没什么实际意义，仅供理解）var a=1va
2022-04-15 11:20:44
3162
原创 Json字符串和Json对象相互转换
Json字符串和Json对象相互转换(JSON.stringify和JSON.parse)1、转为Json字符串（JSON.stringify）var a={a:1,b:2,c:3};var b=JSON.stringify(a);console.log(b);//{"a":1,"b":2,"c":3}/****************************************/var a={a:"1",b:"2",c:"3"};var b=JSON.stringify(a);co
2022-03-15 15:03:46
764
原创 Bpmn.js的简单使用
Bpmn.js的简单使用Bpmn.js有两种功能：（1）将XML格式字符串文件和.bpmn为后缀的文件转化为流程图。（2）作为建模工具包，在网页上显示，绘制流程图。文章目录Bpmn.js的简单使用一、将字符串转为流程图安装代码xml字符串文件格式二、将.bpmn后缀的文件转化为流程图安装代码app.bundled.js文件diagram.bpmn文件三、搭建建模工具包安装代码四、注意：一、将字符串转为流程图安装npm install --save bpmn-js代码<!--vue
2022-02-10 16:37:03
3410
原创 CSS特殊边框
CSS特殊边框在粉红色区域可以添加想要的内容代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale
2022-02-10 13:55:47
662
原创 CSS实现水波纹效果
CSS实现水波纹效果记录如下以供以后使用效果图如下代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-s
2022-02-10 11:54:26
1735
原创 Echarts图中关系图graph和路径图lines结合使用
Echarts图中关系图graph和路径图lines结合使用一：关系图graph和路径图lines结合：1、效果图：2、整体代码：（注意lines图的数据集格式）<template> <div> <div id="about" style="width: 800px;height: 400px"></div> </div></template><script>import echarts f
2021-12-28 15:41:45
3637
转载 Mock的基本使用方法
Mock的基本使用方法一、mock解决的问题开发时，后端还没完成数据输出，前端只好写静态模拟数据。数据太长了，将数据写在js文件里，完成后挨个改url。某些逻辑复杂的代码，加入或去除模拟数据时得小心翼翼。想要尽可能还原真实的数据，要么编写更多代码，要么手动修改模拟数据。特殊的格式，例如IP,随机数，图片，地址，需要去收集二、mock优点1、前后端分离让前端工程师独立于后端进行开发。2、增加测试的真实性通过随机数据，模拟各种场景。3、开发无侵入不需要修改既有代码，就可以拦截Ajax请求，返回
2021-12-20 09:53:18
65327
2
原创 ES6中let和var、const定义变量的区别
ES6中let和var、const定义变量的区别注意：作用域只有全局作用域和函数作用域（函数作用域是在函数内，for和if不是函数，他们的大括号内不算函数作用域）（1）var1、var 限制函数作用域，let限制块级作用域2、JavaScript没有块级作用域3、var 声明的变量，无论在哪里声明，都会被当成在当前作用域顶部声明的变量（作用域为函数内）var i=10;for(var i=0;i<6;i++){//do nothing}console.log(i)//6（2）l
2021-12-10 11:20:15
595
原创 Vue中computed和watch的区别
Vue中computed和watch的区别watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个或多个数据（称它们为依赖数据）发生变化的时候，所有依赖这些数据的 “相关” 数据 “自动” 发生变化，也就是自动调用相关的函数去实现数据的变动。（1）computed1、 支持缓存，只有依赖数据发生改变，才会重新进行计算；2、 不支持异步，当computed内有异步操作时无效，无法监听数据的变化；3、 computed是计算属性，也就是依赖某个值或者prop
2021-12-09 10:27:25
9612
原创 Vuex实战之 todos待办事项列表的状态管理
Vuex实战之 todos待办事项列表的状态管理效果图：store.js文件代码import Vue from 'vue'import Vuex from 'vuex'import axios from 'axios'Vue.use(Vuex)export default new Vuex.Store({ state: { //所有的任务列表 list:[], inputValue:'aaa', nextId:0, viewKey:'all',
2021-12-08 15:46:23
1190
原创 Vue简单组件封装之按钮组件
Vue简单组件封装之按钮组件实现效果：传递不同的属性值，按钮名称和按钮颜色不一样封装组件代码：<template><input type="button" :class='type' :value='name' @click="defaultClick"></input></template><script>export default { name: "CoolButton", methods: { default
2021-12-06 16:14:17
1439
原创 js小数运算精度丢失问题
小数运算精度丢失问题问题：小数的加减法会出现精度丢失，乘除法也会存在精度丢失，示例如下：var a=0.1;var b=0.2;console.log(a+b) //0.30000000000000004console.log(1.001*1000) //1000.9999999999999不能直接使用(a*10+b*10)/10了，虽然此案例可以正确显示，但是因为乘法也会精度丢失，有时候也会错误，示例如下：var a=1.001;var b=2.002;console.log((a*
2021-12-03 15:36:02
2177
原创 Echarts图中模板变量a,b,c,d的含义
Echarts图中模板变量a,b,c,d的含义在此记录，方便查看（1）echarts图中的模板变量有 {a}, {b}，{c}，{d}，{e} 几种，分别表示系列名，数据名，数据值等。（2）在 trigger 为 ‘axis’ 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。（3）不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：折线（区域）图、
2021-12-02 15:09:45
963
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人