- 博客(40)
- 收藏
- 关注
RSS订阅原创 uni-datetime-picker组件填坑，在mounted后再赋值calendar日历不展示或错误展示回显的日期。
uni-datetime-picker组件填坑，在mounted后再赋值calendar日历不展示或错误展示回显的日期。通过清空再赋值或改造组件方法填坑！
2023-09-14 14:02:24
1682
1
原创 数据量特别大，自己手写虚拟dom节点展示数据。
原理：根据屏幕高度和一条数据展示所需要的dom节点高度，求出屏幕能展示的数据条数。在渲染数据的div的同级加一个div（高度为所有数据展示完的高度），目的是显示滚动条。监听滚动，根据滚动条位置，计算截取所有数据中能在屏幕中展示的数据段，进行渲染。当数据量特别大时，一次性全部展示出所有数据，会造成页面渲染慢，白屏，卡顿的现象。为解决这样的问题，可以尝试使用虚拟加载dom节点的方式。优化：可以配合节流函数进行优化，防止暴力滚动。
2023-08-04 11:50:31
220
转载 el-input框输入数字千分位保留两位小数显示，传给后端转为正常数字。
el-input框输入数字千分位保留两位小数显示，传给后端转为正常数字。
2022-11-14 10:36:51
3432
1
原创 文本框/文本域，部分文字不可编辑（输入/删除等）。
重点是要用到键盘删除事件@keydown.delete，通过该事件拿到input的e.target。如果在不能删除的区间，则阻止删除的事件@keydown.delete。以上还是存在bug，当正常输入字符发现没得问题，但当使用输入法进行文字字符等输入的时候，还是能正常的输入，因此需要再使用两个事件：@onCompositionStart输入法输入开始事件和@compositionend输入法输入结束事件。因此还需要键盘按下事件@keydown，当定位在1-7个字符之间时，阻止事件触发。......
2022-08-09 16:40:41
3470
2
原创 elementUI table 添加合计行，合计行放置顶部(标题下内容上)，合计行渲染所有数据的和(取后端接口数据)，合并合计单元格。
1.将设置为就会在表格尾部展示合计行。2.借用样式将合计行置顶3.使用vue.$el.querySelector()方法,table渲染时，调用封装好的合并方法。4.渲染合计，sumObj是通过后端接口得到的对应字段的合计（对象数据）。在并在此处调用合并“合计”文字的单元格...
2022-07-07 09:56:24
4421
原创 数据处理——给数字加千分位标识
千分位添加的方式，一般都是数组截取法，字符串截取法等等，但存在当为负数金额的时候，可能会存在 -,123.33 的情况，还需要考虑到负数的情况。（考虑情况较多）。使用正则匹配转化会省略考虑到一些情况，方便使用。下面我将正则法，数组转化截取法（字符串截取转化法和数组截取转化原理相同）的代码发在下面：定义一个函数moneyRegex ，形参number是要处理的金额数据，fix是需要对数据保留的小数位数。正则法：建议使用正则匹配的方式添加千分位，可以直接避免负数、数组字符串之间转化的情况。如下代码：（.
2022-05-27 14:39:03
880
原创 前端纯css实现循环滚动展示数据，通过鼠标移入移出事件实现——鼠标移入暂停，移出继续滚动
主要是用到css的动画属性：animation ， transform；vue的@mouseenter鼠标移入事件，@mouseleave鼠标移出事件。上代码：html: <div class="list_box"> <div id="scroll_box" ref="scroll_box" class="list anim" @mouseenter="stopAn" @mouseleave="leaveAn">
2022-05-25 16:23:33
3765
原创 数据处理——树形数组数据展开成一维数组，父节点在前，相应子节点尾随其后（注意判断是否存在children）
方式一：数据的map和concat方法，结合...展开运算符递归实现（推荐）function turnTreeIntoList(array) { return [].concat(...array.map(item => [].concat(item, item.children ? turnTreeIntoList(item.children) : [])))}上面代码如果不好理解，可以展开：function turnTreeIntoList(array) { r
2022-05-24 14:17:45
604
原创 el-table表格点击行实现行添加背景，再次点击取消背景。可以多次记录每次点击的行，且能实现有复选框的表格选中同时实现此功能。
需要用到elementui表格的 1，行样式添加的事件tableRowClassName ；2，行点击事件 rowClick；3，如果表格有复选框还需要用到复选框选择事件 select。直接干代码：1.页面组件***.vue<template> <div> <el-table :data="tableData" style="width: 100%" :row-key="getRowKey" :row-class-name="tableR.
2022-04-22 13:51:39
2081
原创 elementui树形表格数据量大时，会造成严重卡顿问题的解决方案
之所以会造成卡顿，是因为该组件是一次性将所有数据全部渲染，dom数量过于庞大，并且在展开树操作的时候，用了大量递归循环语句，性能受到严重影响，造成卡顿。我想到的解决方式有两种：一：分页，让后端添加分页查询，以节点数统计数据条数进行展示。（但实际需求中较少，一般树形表格都是不分页）。二：将请求到的树形数组数据备份（tableDataCopy），初始化仅仅展示指定层级（如第一层树）的数据，将第一层下面的所有的children全部置为null，并记录存在children的节点，设置hasChild..
2022-03-17 15:30:28
13339
原创 通过定义自定义指令v-dialogDrag，实现元素（弹框）拖拽移动。
1.创建dialogDrag.js文件，通过可见区域进行逻辑处理。代码如下：（可直接复制使用）import Vue from 'vue'; //引入vue// 指令v-dialogDrag: 弹窗拖拽Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header');
2022-03-10 16:11:26
2233
转载 文本框实现远程搜索的用法：ElementUI
<el-form-item label="用户列表"> <el-autocomplete class="inline-input" @clear="clearUser" clearable v-model="paramData.userName" :fetch-suggestions="querySearch" placeholder=".
2022-02-10 18:05:58
238
原创 vue3.x模板引用(通过ref获取dom节点)
在vue2.x中：<div ref="dom"></div>this.$refs.dom即可获取到div的dom节点但在vue3.x中不能通过this.$refs获取。正确获取的方式如下：<div ref="dom"></div>setup(){const dom = ref(null);onMounted(()=>{console.log(dom.va...
2022-01-04 17:37:18
985
原创 vue3.x常用的watch监听方式
方式一:监听单个基本数据类型(ref)，（ref定义的基本类型使用watch监听时候不需要.value） watch(sum, (newVal, oldValue) => { console.log(newVal, oldValue); });方式二:监多个基本数据类型(ref) watch([sum, tips], (newVal, oldValue) => { console.log(newVal, oldValue);// [12...
2022-01-04 16:48:41
2499
原创 elementui表格中使用Radio 单选框，并在数据加载完成时，回显状态为选中的数据。
效果如下：代码：html：<el-table :data="tableData" border style="width: 100%" ref="tableData"> <el-table-column label="" width="65"> <template scope="scope"> <el-radio :label="scope.row.id" v-model="radioRespo...
2021-10-25 10:23:37
5660
原创 postMessage消息传递——window.addEventListener的运用。实现不同框架之间混用时（iframe），页面或组件之间相互传值。
window.postMessage() 方法允许来自一个文档的脚本可以传递文本消息到另一个文档里的脚本，不用管是否跨域。一个文档里的脚本还是不能调用在其他文档里方法和读取属性，但他们可以用window.postMessage结合window.addEventListene这种消息传递技术来实现安全的通信。window.addEveantListener('message',(event)=>{})event 的属性有：data: 从其他 window 传递过来的数据副本。 ori..
2021-10-12 18:02:57
18673
原创 vue中swiper，vue-awesome-swiper实现轮播；鼠标移入暂停，移除播放；点击暂停按钮暂停，再点击播放。
因为swiper和vue-awesome-swiper的版本较多，如果使用最新的版本，或者两者版本差距较大，就容易掉进很多的坑里面，各种报错。切记，版本一致，建议使用@3.X版本。首先，安装swiper和vue-awesome-swipernpm install swiper@3 vue-awesome-swiper@3 --save然后，按需引入项目文件 import { swiper,swiperSlide } from "vue-awesome-swiper";
2021-10-11 22:08:05
5482
原创 当给盒子设置transform: scale()缩放样式时，通过offsetTop获取元素距离文档顶部的高度时，存在的浏览器兼容bug。
由于不同浏览器内核不同，对代码解析可能不一致，所以出现兼容问题。在chrome浏览器中，当给<div>盒子设置了transform: scale()缩放样式后，通过offsetTop获取该div盒子中某元素（<p>）到浏览器顶部高度时，不能获取到实际高度，得到的实际是（<p>）元素到<div>之间的高度。但在Safari浏览器中，盒子设置transform: scale()缩放样式，通过offsetTop获取某一元素到浏览器顶部高度不会存在差别化，都能
2021-09-27 11:42:58
1791
原创 解决当循环语句与定时器一起使用时，不能实现循环等待
当循环语句与定时器setTimeout，结合使用时，如果直接写，定时器，不会起作用；而且一不小心还容易出现死循环等情况。刚开始，我以为是简单的同步和异步问题，我就使用了es7的async和await处理，但是没有生效，还是循环语句优先同步执行了。于是，我想到了闭包，将内部定义的作用域给外部，用再用setTimeout去接收，最后成功实现。代码如下： let time=1000; let animation='animation'; let styl
2021-09-23 16:38:04
407
原创 当在vue项目中使用滚动监听时，页面跳转后，报错Uncaught TypeError: Cannot read property ‘offsetTop‘ of undefined at VueComp
vue生命周期钩子函数mounted，beforeDestroyoffsetTop of undefined这个错误，是因为我在mounted页面加载的时，通过addEventListener给window添加了scroll滚动事件。当页面跳转后，没有自动销毁scroll的监听事件，所以会报错，但不影响功能。要避免这样的报错，我们就需要手动在beforeDestroy销毁阶段来销毁这个滚动监听事件就不会报错了。如下代码： mounted() { //加载阶段创建scr..
2021-09-16 18:12:21
1658
原创 vue组件间相互传值
一般vue的组件之间的传值分为：父组件传子组件，子组件传父组件，任意组件之间传值。1.父组件传子组件:（父组件通过v-bind（可以缩写为 ：）发送，子组件通过props接收）//父组件中引入子组件B<B v-bind:msg="msg"></B>import B from './B.vue'data(){ return{ msg:'父组件给给子组件B的值' }}，components:{ B}//子组件B,通过
2021-09-12 21:26:42
1473
原创 vue的动态组件和＜keep-alive＞的使用
1.动态组件<component>可以实现动态组件的切换显示隐藏，但会销毁原组价，进入销毁阶段；<keep-alive>在切换时可以保持原组件不被销毁，被暂时缓存，再切换回原组件，不用在加载，可以提高性能。2.<component>必须配合is属性使用，is的值就是引入需要加载的组件。<keep-alive>的使用非常简单，之间用<keep-alive>包裹<component>即可实现效果。demo代码：<!--&
2021-09-09 22:52:25
701
原创 watch监听器的常见用法（vue2）
一，简单数据类型的用法：监听data中一个简单数据的变化：如：(常用在input输入框的change，输入删除值变化的情况。比如：当输入框文本变化时，发送请求用户名是否占用的情况)data(){ return { msg:'123' }},watch:{ msg(newVal,oldVal){ console.log(newVal); console.log(oldVal); }},二，复杂数据类型的数据
2021-09-09 22:12:27
1026
原创 vue中的过滤器filters
filters过滤器有可以很方便的处理数据，格式化数据，简化代码的特点。定义的过滤器只能在只能在{{}}表达式和v-bind指令中使用。过滤器可以分为组件私有过滤器和项目全局过滤器，它们的定义方式类似于自定义指令。一：私有过滤器（在filters中定义，只能在组件内部使用）<span>{{ date | capitation }}</span> //capitation 就是过滤器函数，date 就是需要被capitation过滤的数据filters:{
2021-09-06 22:31:31
675
原创 vue2自定义指令方式
当vue自带的指定不能满足我们开发需求时，我们可以根据自己的需求，定义自定义的指令。自定义指令一般分为组件私有自定义指令和项目全局自定义指令。它们的定义方式类似于filters过滤器的的定义。一：私有自定义指令：（只能在定义的组件内使用）在组件中的directives中定义一个指令，通过bing和update函数实现该指令需要表达的逻辑。如需求，需要给将<p>自定义指令</p>中的文本颜色设置为red。我们可以定义一个v-color指令：<p v-co
2021-09-06 22:16:01
2420
1
原创 el-popover 弹出框自定义关闭/打开。
有时我们会遇到在弹出框内放入一些组件进行操作，选中后根据确认还是取消，进行一些功能实现。比如我最近遇到，动态配置el-table表头展示字段，根据选中的checkBox，进行渲染el-table表头。先选中再点击确认来渲染表头，所以就需要使用到el-popover 的自定义关闭/打开方式。这个我们就需要使用到el-popover的两个属性：trigger触发方式，设置为自定义触发manual；v-model状态是否可见，默认设为false不可见。 <..
2021-09-01 11:50:44
20432
2
原创 前端如何根据后端接口实现文件下载
根据接口地址实现文件下载，我比较喜欢两种方式：第一种是直接使用location.href实现文件下载，第二种是使用ajax调接口实现文件下载。假如：接口地址：http://localhost:8080/abc/index/api/files一：location.href实现方式：直接在事件中写入：location.href=http://localhost:8080/abc/index/api/files;优点：代码简洁，不需要使用ajax实现接口调用；下载后的文件类型和文件名称不
2021-09-01 11:17:40
6331
原创 后端返回数组型字符串（json串），使用eval() 函数将其转为真实数组
{ code:0, data:"[{name: \"uuid\",label: \"ID\",status:'0'},\r\n{name: \"projectNum\",label: \"项目编码\",status:'0'}\r\n]"}利用eval()将字符串型数组，转化为真实数组。eval() 函数可以计算某个字符串，并执行其中的的 JavaScript 代码。var newArr = eval('(' + res.data+ ')');最后得到：[ .
2021-08-30 21:58:28
1319
1
原创 在一个html文件中的两个平级iframe之间的方法函数调用
1.在一个iframe文件中先通过顶层（parent）html文件拿到存在某方法的iframe节点。2.再利用contentWindow属性拿到存在某方法的iframe的window。3.最后通过它window中的属性和方法，拿到需要的属性或者方法。4.如果需要拿的iframe的html是vue的语法，则需要通过contentWindow.app.***来获取它里面的方法或者属性（app为挂载的id名）；如果是原生js获取jq语法，直接使用contentWindow.***即可。&l
2021-08-27 11:23:23
455
转载 vue2使用filters封装工具函数做全局过滤
一般做后台管理系统，很多地方都会用到数据状态值转状态的处理，如（status:'0'）=>（status:'正常'）；后端也会返回很多枚举对象，我们用filters做视图过滤就很方便快捷。第一步：封装一个工具函数，里面用过滤//名称export const ChannelTag = (val) => { switch (val) { case 0: return '无' break case 1: return '电商'
2021-08-24 11:12:17
221
原创 elementui表格组件动态合并单元格
直接按照elementui表格组件给的合并单元格的方式，是写死的，不能满足动态合并的需求。一般都是自己总结合并规律，最后通过span-method方法返回的行列进行合并。重点：:span-method上代码：<el-table :data="tableData" border :span-method="cellMar" stripe> <el-table-column prop="type" label="类型" width="200"> </e
2021-08-24 09:47:46
1062
1
原创 elementui日期时间选择控制，开始时间必须小于结束日期时间
重点：组件的picker-options属性。demo代码：<el-form-item label="开始日期" prop="start"> <el-date-picker v-model="formData.start" type="date" value-format="yyyy-MM-dd" :picker-options="begin" plac
2021-08-13 14:27:47
1294
原创 element-ui表格组件点击某一单元格，该单元格显示文本框可编辑本单元格数据
element-ui表格组件点击某一单元格，该单元格显示文本框，并可编辑本单元格数据，保存后单元格消失。需要用到el-table中的cell-click（当某个单元格被点击时会触发该事件），@cell-click=handle(row,column,event,cell) ：row本单元格所在行数据,column本单元格所在列数据,event本单元格元素节点,cell本单元格window属性值。话不多说，上代码：html：<el-button type="primary" @cli.
2021-08-12 16:10:49
4513
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人