- 博客(64)
- 资源 (1)
- 收藏
- 关注
原创 简单理解事件冒泡和事件捕获
解释:点击一个位置(这个位置既属于最外层,又属于中间层,还属于最内层),那么事件发生顺序为:内层—>中间----->外层。示例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关注的人