- 博客(28)
- 收藏
- 关注
RSS订阅原创 Vue3 provide inject
爷孙乃至跨层级更多组件传值可以采用provide/inject方式进行传值。如果需要在子孙节点中修改传入的值，可以通过祖父节点传入一个修改值的方法。
2025-01-16 09:02:45
390
原创 Vue3 defineModel的使用
需要注意的是：如果为 defineModel prop 设置了一个 default 值且父组件没有为该 prop 提供任何值，会导致父组件与子组件之间不同步。而在vue3中，声明了一种新的传值方式defineModel,可以更方便的向子组件传值，并且允许子组件修改传值,以实现双向绑定.上述代码中，父组件的 myRef 是 undefined，而子组件的 model 是 1，所以如果设置。props，否则控制台会报出警告，这也符合vue的。在vue中，父组件可以在子组件上传值，子组件通过。
2025-01-16 09:02:20
1091
原创 仿infobip模板功能-可通过占位符配置模板内容
模仿infobip制作的模板功能，正文可在任意位置加参数的功能。如下图所示：在正文中通过。进行占位，在使用模板时，可在此位置自定制内容，并预览效果。
2025-01-14 17:02:23
338
原创 控制台报错handler.apply is not a function
data中的属性和methods方法重名，initState中初始化opts的顺序是 props、methods、data、computed、watch，所以data里的key会覆盖之前的key，同名的方法被干掉。控制台报handler.apply is not a function，但是页面能够正常的渲染和操作，排查发现是因为data中一个变量和methods中的一个方法命名相同导致的，修正一下即可。
2024-12-25 09:50:04
310
原创 子元素flex:1，子元素过长导致超出父元素
在一个固定宽度的盒子中，设置了子元素为flex:1,但是当内部元素文字过长时，会挤压其他子元素溢出。为flex:1的元素添加overflow:hidden属性，就不会溢出。
2024-12-24 12:45:39
555
原创 keydown和keyup事件同时使用keyup事件失效的问题
在一个富文本框中，当摁下alt/option+上/下箭头的时候，聚焦到聊天人员列表并切换当前聊天对象，因为无法通过event去判断当前是否同时摁下了alt/option + up/down，所以维护了一个数组用来存放当前摁下的按键。keydown将当前键存入数组，keyup从数组中去除，但是当触发到alt/option + up/down 事件后，keyup事件没有被触发，排查发现是因为。导致失焦后，没有触发到keyup事件，所以给此条语句加一个延迟装置。
2024-12-24 11:24:57
278
原创 父元素设置max-width，子元素的宽度使用%不生效
解决上述问题的可以为父元素设置display:inline-flex，既能保证子元素宽度不足100%时，标签跟随子元素宽度，不占满一行，又能保证子元素宽度太长时显示省略号。标签长度跟随子元素，但当子元素过长，超出父元素标签的长度时，需要省略显示。此时子元素文本超出父元素，max-width。或者说，他没有找到父元素的宽度。标签宽度最大为100%。过长时，需要展示省略号，此时。
2024-12-11 17:12:30
332
原创 el-upload上传一个文件后上传按钮禁用
上传按钮仅可上传一个文件，当上传了一个文件后，上传按钮禁用，但仍可删除已上传的文件进行重新上传。el-upload内的el-button按钮设置两个。
2024-12-09 14:50:08
238
原创 el-table的排序图标被点击后，去除对当前表格数据的自动排序
el-table表格启用排序，每次点击排序按钮时，当前表格数据都会自动排序一次，而我们想要的是调用后台接口去排序。绑定的方法中去写对应的处理逻辑。
2024-12-09 12:15:17
344
原创 vue中elementUI的form表单校验，将默认的英文提示改为中文
将需要修改的配置写在一个js文件中，引入main.js中。文中的提示信息 如下。
2023-06-21 16:25:50
1707
转载 ES6 字符串方法的扩展
文章目录前言includes()、startsWith()、endsWith()includes()startsWith前言在此只介绍一些常用的includes()、startsWith()、endsWith()本来Js中只有`indexOf`方法可以用来确定一个字符串是否包含在另一个字符串中。ES6中又新增了三种新方法。includes()返回布尔值，表示是否找到了参数字符串。 let str = 'abcde' str.includes('a') //true支持第二个参数，表
2021-03-08 10:25:45
326
原创 Js基础
文章目录truthy和falsyvar let constparseInt、parseFloat、+对于字符串转数字的处理数组的长度函数调用call和apply内部函数、闭包闭包truthy和falsyfalsy:false 0 "" null NaN undefined truthy:除了上述 var let constvar：语句块是没有作用域的，只有函数有。 let、const: 拥有块作用域。 parseInt、parseFloat、+对于字符串转数字的处理parseI
2021-01-23 16:55:13
340
原创 Vue3.0与Vue2.x的差异
文章目录写在自己的话Vue3的更新关于ref在v-for时的处理异步组件写在自己的话虽然开发一直在使用Vue，但是必须要承认在实际开发中对于Vue的使用不尽人意，很多地方并没有能够利用Vue的优点来简化开发，比如父子组件的传值和修改，多个组件总是用到同一个方法，对象数据的响应式处理等，所以回炉重看了Vue的文档，看完Vue2(以下简称v2)再看Vue3(以下简称v3)，在实际开发目前还用不到v3，所以自己记一下关于v2和v3之间的差异，以便自己后期使用。Vue3的更新关于ref在v-for时的处理
2021-01-23 09:46:44
1473
7
原创 JS遍历数组的方法
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言概述二、正文forEach2.mapfilterevery总结前言我个人而言数组的遍历方法是常用到的，每次用我都现搜，所以还是自己整理一下吧。若有术语不当之处，欢迎指出。概述我主要列出的是封装好的数组遍历方法，包括forEach、map、filter、every、some、reduce、find、findIndex。二、正文forEachforEach()无返回值，对原数组无影响，仅遍历整个数组。代码如下（
2020-11-18 16:50:15
191
1
原创 antd-vue 复选框实现全选（跨页）
官方文档给了全选实例，说实话够用了，但是最近我新做了一个需求是跨页全选，打个比方，我在第一页全选了12条内容，然后到第二页拉新数据了，在选择第二页的一部分，然后我再回到第一页，取消掉几个，再来到第二页，全部选中，要实现的效果：首先选中的依旧选中，本页数据全部被选中时，全选框被选中。其实还好，但是我逻辑思维能力有点一般般，所以我还是写博客记下来吧，省的下次再用到相同思路。data:(){ choosePicArr:[], plainOptions:[],//本页的所有checkbox的value ch
2020-05-13 16:44:19
4517
1
原创 前端输入一个url，而后判断该路径是否是一个图片
之前在做以图搜图功能，除了传图片还有传路径的，所以前端先判断一下该路径是不是一个图片，再传给后端，后端直接保存图片就可以了。上代码var ImgObj = new Image() ImgObj.src = imgurl ImgObj.onerror = ()=>{ this.$message.error(`图片地址错误`) } ...
2020-04-20 15:31:05
1586
2
原创 echarts实现柱形图的每个柱子不同颜色并带图例
这里写自定义目录标题原图啊，最近工作一直在做图表，没有UI，自己瞎做，做出来一版给老大看，老大说不行，好，我改。第二版做出来后，老大说，你这个柱状图把他变成每个柱子颜色不一样，再加一个图例，可是我这只有一层数据，一个横坐标一个纵坐标就可以解决了，为什么让我加图例，我去看了看echarts官方，一层数据确实没有办法加图例，咋办啊，拆吧。原图讲真，原图没了，给看看差不多的例子吧就这样吧然后...
2020-04-20 11:26:56
6054
8
原创 js类型判断的三种方法
typeof我们可以直接使用如下方法对变量进行判断typeof 123 //numbertypeof '123' //stringtypeof [1,2,3] //Objecttypeof的局限性是无法准确判断null和数组型，而会将他们都判断为object。intanceof我们可以使用如下方法来判断var a = '123'a intanceof string...
2020-03-20 21:24:42
1751
原创 ES6的模块化和commonjs的模块化
ES6模块化import命令用于输入其他模块提供的功能;export命令用于规定模块的对外接口。ES6模块化采用静态编译，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。是异步导入，因为用于浏览器，需要下载文件，如果也采用同步导入会对渲染有很大影响。采用实时绑定的方式，导入导出的值都指向同一个内存地址，所以导入值会跟随导出值变化this指向undefined...
2020-03-01 21:50:13
414
原创 Vue生命周期
Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载DOM->渲染、更新->渲染、卸载等一系列过程，我们称这是Vue的生命周期。首先我们来看一下Vue生命周期图示第一次页面加载会触发beforeCreate、created、beforeMount、mounted, mounted说明dom渲染完毕下面我们按照图示从上到下进行分析beforeCreate...
2020-02-23 20:35:48
290
2
原创 Js实现点击同类型标签，输出第几个标签
匿名函数自执行一般来说，我们写这样一段代码，因为事件异步，所以每次点击都打印n（lis的长度），因为你点击的时候，因为点击事件是异步的，所以他并不会影响 i 的自增，所以当点击的时候，i已经自增结束了。 var lis = document.getElementsByTagName('li'); for(var i=0;i<lis.length;i++){ lis...
2019-08-15 15:26:49
819
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人