大前端
文章平均质量分 51
前端小白۞
这个作者很懒,什么都没留下…
展开
-
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 · 664 阅读 · 1 评论 -
CSS绘制气泡对话框样式(有边框)
画两个不同大小的div,使其基本重叠(两个大小不同,不完全重叠,让红色的露出一点边边),让白色div放到最上层(设置z-index):上面那个和带边框的小三角不好实现。原创 2023-04-07 10:11:59 · 1771 阅读 · 0 评论 -
Vue3 父组件数据改变Echarts子组件图表没有变化
使用vue3写页面,引入一个echarts图,父组件数据改变,图表没有重新渲染。1、echarts图组件监听数据(数据改变,重新渲染)注意:父组件正常调接口 传值即可。原创 2023-03-29 15:31:51 · 2675 阅读 · 6 评论 -
vue3 +前端实现单元格合并
如果接口数据没有给相关合并属性,那么需要前端自行处理进行合并,需要自行添加rowSpan属性(实现上图样式)代码如下:(只把修改数据的方法展示出来,开发中根据实际需要的数据格式进行修改)如果后端接口返回的数据直接给定相关合并的属性,那么直接使用即可,不需要以下方法。原创 2023-03-17 11:17:12 · 1190 阅读 · 0 评论 -
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 · 9778 阅读 · 1 评论 -
vue-seamless-scroll 无缝滚动 使用方法
【代码】vue-seamless-scroll 无缝滚动 使用方法。原创 2022-10-21 15:26:37 · 579 阅读 · 0 评论 -
undefined、null、空数组、空对象是true还是false
【代码】undefined、null、空数组、空对象是true还是false。原创 2022-10-09 11:12:49 · 2869 阅读 · 0 评论 -
vue表单校验json数组格式和普通数组格式数据
说明:3种动作,对应3种验证规则,动作1:数字对象或数组均可(空也可);动作2:只有数组对象可通过验证;动作3:数字类型可通过验证。(1)template(注意这里的循环数据的key值必须有,否则虽然验证有效,但是提交时不会进行验证)原创 2022-09-14 15:20:36 · 1480 阅读 · 0 评论 -
iview表格显示缩略图,鼠标悬停显示图片
【代码】iview表格显示缩略图,鼠标悬停显示图片。原创 2022-09-07 16:23:59 · 549 阅读 · 0 评论 -
vue 使用 driver.js 页面分步引导
【代码】vue 使用 driver.js 页面分步引导。原创 2022-08-23 10:56:17 · 1216 阅读 · 0 评论 -
dom 转pdf 导出 加分页
转载自https://blog.csdn.net/xiaozhi122/article/details/124940094。转载 2022-08-19 09:28:40 · 149 阅读 · 0 评论 -
HTML 元素超出部分可以滚动, 并隐藏滚动条
代码】HTML 元素超出部分可以滚动, 并隐藏滚动条。原创 2022-08-17 09:52:57 · 1900 阅读 · 0 评论 -
前端⽣成 json ⽂件并导出
代码】前端⽣成 json ⽂件并导出。原创 2022-08-15 15:53:06 · 1433 阅读 · 0 评论 -
单行、多行文本超出显示省略号
在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp;注意:这是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。...原创 2022-08-04 17:08:42 · 1747 阅读 · 0 评论 -
Iview的Tab栏校验不通过不跳转
代码】Iview的Tab栏校验不通过不跳转。原创 2022-07-29 17:25:48 · 304 阅读 · 0 评论 -
Iview2 Result 处理结果自定义组件
200px;margin-top100px;height100px;#5cb85c;white;margin24px;height50px;text-aligncenter;">申请处理中...您的申请已收到,系统正在处理中。https。原创 2022-07-29 17:16:02 · 256 阅读 · 0 评论 -
iView表格显示图片和文字过长显示省略号,并且Tooltip提示
iView表格显示图片和文字过长显示省略号,并且Tooltip提示。原创 2022-07-29 17:08:24 · 1062 阅读 · 0 评论 -
新建和编辑共用一个表单,编辑之后新建,form表单resetFields失效
或者注意如果使用resetFields方法清空,虽然可以清空,但是在先编辑再新建时,提交的字段会有很多,而且都是编辑的那一行的数据。即使加上this.$nextTick(()=>{})也会有同样的问题,所有直接使用赋值的方法清空。...原创 2022-07-28 18:57:35 · 638 阅读 · 0 评论 -
iview 表单验证问题 Select 已经选择 还是弹验证提示
问题iview的Select下拉框的时候,数据验证必填,明明选择了数据,却一直提示验证不能通过。原创 2022-07-20 12:07:12 · 1355 阅读 · 1 评论 -
vue实现excel表格复制粘贴
说明想要实现从excel表格复制内容之后,在vue页面上粘贴。有两个情况(1)无论从哪一列点击开始粘贴,都是从点击的列开始粘贴。效果如上图1(2)点击哪一列开始粘贴,从此列开始粘贴,如果点击的列不是可以粘贴的列,那么也是从可以粘贴的列开始粘贴(只能点击可以粘贴列的前面列才可以粘贴,点击后面列不能粘贴)效果如上图2注意如果多列需要粘贴,那么这些列必须是。比如columns=[name,key,age],那么不能只粘贴{name,age},中间。.........原创 2022-07-20 11:45:55 · 4123 阅读 · 2 评论 -
零碎知识点总结
零碎知识点总结记录相关功能写法,以供以后参考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 · 286 阅读 · 0 评论 -
element ui动态渲染表单(数组)并验证
element ui动态渲染表单(数组)并验证1、需求:点击编辑按钮,弹出编辑框(表单),从后端拿到字段后动态渲染到页面上,并校验必填2、代码实现其中:specialColumns是从后端拿到的json数组,格式如下:[ { columnName: "操作" columnType: "enumeration" columnValue: "再次上报,废弃" controlId: "FormProperty_08tc63f"原创 2022-05-16 13:44:19 · 2931 阅读 · 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 · 564 阅读 · 0 评论 -
两个三目运算符计算规则
两个三目运算符计算规则前言:今天遇到这样的表达式不知道怎么运算,查阅资料之后记录一下。。。 step == currentStep ? 'md-create' : steps[step].completed ? 'ios-checkmark-circle' : 'md-create'示例:(1)两个三目运算符表达式(表达式没什么实际意义,仅供理解)var a=1va原创 2022-04-15 11:20:44 · 2975 阅读 · 0 评论 -
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 · 753 阅读 · 0 评论 -
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 · 3344 阅读 · 0 评论 -
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 · 621 阅读 · 0 评论 -
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 · 1694 阅读 · 0 评论 -
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 · 3402 阅读 · 0 评论 -
Mock的基本使用方法
Mock的基本使用方法一、mock解决的问题开发时,后端还没完成数据输出,前端只好写静态模拟数据。数据太长了,将数据写在js文件里,完成后挨个改url。某些逻辑复杂的代码,加入或去除模拟数据时得小心翼翼。想要尽可能还原真实的数据,要么编写更多代码,要么手动修改模拟数据。特殊的格式,例如IP,随机数,图片,地址,需要去收集二、mock优点1、前后端分离让前端工程师独立于后端进行开发。2、增加测试的真实性通过随机数据,模拟各种场景。3、开发无侵入不需要修改既有代码,就可以拦截Ajax请求,返回转载 2021-12-20 09:53:18 · 60092 阅读 · 1 评论 -
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 · 589 阅读 · 0 评论 -
Vue中computed和watch的区别
Vue中computed和watch的区别watch和computed都是以Vue的依赖追踪机制为基础的,它们都试图处理这样一件事情:当某一个或多个数据(称它们为依赖数据)发生变化的时候,所有依赖这些数据的 “相关” 数据 “自动” 发生变化,也就是自动调用相关的函数去实现数据的变动。(1)computed1、 支持缓存,只有依赖数据发生改变,才会重新进行计算;2、 不支持异步,当computed内有异步操作时无效,无法监听数据的变化;3、 computed是计算属性,也就是依赖某个值或者prop原创 2021-12-09 10:27:25 · 9285 阅读 · 0 评论 -
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 · 1152 阅读 · 0 评论 -
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 · 1394 阅读 · 0 评论 -
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 · 2079 阅读 · 0 评论 -
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 · 926 阅读 · 0 评论 -
如何在CSDN中插入动图gif
如何在CSDN中插入动图gif(1)方法一:在线制作多图合成gif动画在线制作gif动画链接①选择需要制作gif动画的图片将其添加②调整时间间隔,图片宽高等设置③一键生成gif将其下载到本地就可以了~2、GIF录制软件①选用GifCam录制屏幕操作GifCam软件下载链接GifCam百度网盘下载链接转载自:https://blog.csdn.net/qq_41008567/article/details/117322575...转载 2021-11-22 10:29:04 · 1104 阅读 · 0 评论 -
vue实现分页的两种方式
vue实现分页的两种方式(1)方法一:使用slice方法一次调用后端接口返回所有数据tableData,然后使用tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)使得数据根据页码改变 <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" stripe style="width: 100%"> <原创 2021-11-22 10:00:41 · 10573 阅读 · 2 评论 -
join、split、slice、splice、substring、substr、unshift方法的使用
join、split、slice、splice、substring、substr、unshift方法的使用(1)join() 方法将数组作为字符串返回。 元素将由指定的分隔符分隔。默认分隔符是逗号 (,)。 注释: join() 方法不会改变原始数组。语法array.join(separator)参数值参数描述separator可选。要使用的分隔符。如果省略,元素用逗号分隔。技术细节返回值:字符串值,表示数组值,由指定原创 2021-11-22 09:42:54 · 607 阅读 · 0 评论 -
ElementUI多个表格自动滚动数据
ElementUI多个表格自动滚动数据(两个表格示例)功能介绍:实现表格动态循环滚动,当鼠标滑入暂停滚动,鼠标离开继续滚动模板部分代码: <el-row :gutter="24"> <el-col :span="12"> <center style="font-size: 24px">待验收项目提醒</center> <br/> <el-table :data="tableD原创 2021-11-18 11:56:27 · 2187 阅读 · 1 评论