- 博客(57)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 vue中使用指令实现下拉框触底加载
使用指令可以拿到dom元素，然后给dom元素添加滚动事件，侦听下拉框是否触底，从而继续执行加载函数；// binding是传的参数，binding.value是一个加载更多的函数。// 局部自定义指令，用于监听下拉框触底。// 滚动到底时触发加载更多方法。
2023-04-11 14:42:19
371
1
原创 vue数据字典下拉框，要回显下拉列表中没有的值？
由于自定义指令中的update钩子函数中无法知道接口的数据什么时候才返回，所以需要循环调用updateDom函数，里面是setTimeout，直到接口返回值的时候，才终止循环调用；思路：下拉框的回显，是根据下拉列表数组来回显的，假设下拉列表中没有该值，则无法回显；那么我们把不能回显的值也放到数组里面，只是显示下拉列表的时候隐藏，就可以达到回显的作用了；数据字典中有个enable字段，用于字典的启用和停用；// 这里写死200毫秒，实际后端响应是不确定的。：实际上拿到的是指令所在组件的实例对象；
2023-03-30 09:50:01
1147
原创 vue中的自定义组件如何使用v-model
以上的形式用在案例中是会报错的，因为mySelectValue是用在v-model上的，也就是会修改mySelectValue的值，给子组件，子组件接收value值，同时通过input事件传递参数给父组件；自定义组件中使用了v-model，默认自定义属性名是。使用v-model实际上是传递一个自定义属性。// 通过调用父组件的input事件来传递值。对象形式定义的属性，允许修改，不会报错；// 父组件传递过来的value。'v-model的值为：'
2023-03-03 23:48:56
1648
原创 vue中使用provide-inject传值注意的问题
以上的方式之所以是响应式，是因为对象和函数都属于引用数据类型，实际上传的是引用地址过去，所以当引用数据类型中的数据发生了改变，子组件接收的数据也会发生改变；以上的方式，当父组件的number值发生改变后，子组件中接收的number并不会发生变化，也就是不是响应式的；
2023-02-27 22:19:49
411
原创 vue中使data中的数据初始化
组件中的根元素使用了v-if，但是组件中的data数据不会初始化，因为不是组件使用了v-if，组件不会销毁；ES6的官方文档的解释是：Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。：当前的data数据（修改过后的）；：初始化的data数据；
2023-02-21 22:17:48
3085
原创 vue自定义一个指令实现el-input-number组件显示千分号，但实际拿到的值是number类型
下面先简单实现聚焦输入时是数字，失焦时展示千分号，但实际拿到的值也还是数字；以上的例子可以实现把el-input-number绑定的初始值转化成千分号，也可以在失焦时转化千分号；但是如果是通过调用接口获取数据，再赋值给el-input-number绑定的值，就不能实现页面刚加载就展示千分号；原因是因为inserted只在插入父节点时调用，只会执行一次，也就是在初始化页面的时候会调用一次，当数据更新后不会再调用，因此不能实现在数据更新后，转化为千分号；改变思路：使用update代替inserted，up
2022-11-19 11:30:55
2400
2
原创 elementui中table嵌套input并且当input输入一个数值后，其他input中的值根据计算公式相应改变
这里有个误区，就是很多人可能以为change事件是当输入框中的值改变后就会触发，但实际是change只有在input失去焦点的时候才会触发；这里还需要注意两点：
2022-11-10 22:24:39
2256
原创 vue实例的$on和$emit的使用？
实际开发中最常用的就是，父组件传递给子组件一个自定义事件，然后子组件通过。中添加一个全局vue实例，使每个组件注册和调用事件都使用这个vue实例；进行调用，好处是父子组件或者兄弟组件，都可以通过这种方式进行通信；注册的事件，无论是在哪个组件中，在该vue实例下都可以通过。"子组件A触发了, 接受到子组件B的参数为：""子组件B触发了, 接受到子组件A的参数为："进行调用，这样就可以实现兄弟组件间的通信了；中就有了这个事件，那么任意组件中都可以通过。// 触发子组件B的事件。// 触发子组件A的事件。
2022-11-03 14:00:27
1374
原创 vue响应式原理中的发布订阅模式的应用
发布订阅模式的好处是：可能多个订阅者订阅的内容是一样的（可以理解为处理的逻辑一样），那么是每个订阅者都写一样的逻辑比较方便，还是由调用中心对订阅相同内容的订阅者统一执行逻辑比较方便？vue中通常多个dom都使用同一个变量，也就是当变量的内容发生改变时，多个dom都需要执行相同的操作（更新页面），那么就需要用到发布订阅模式；发布订阅模式：就是创建一个调度中心，负责记录订阅者订阅的内容，然后统一发布相应的内容给订阅者；可以理解为订阅的内容，里面的数组是订阅者传递给调度中心要执行的逻辑函数；
2022-09-14 17:03:37
411
原创 window.onresize只能侦听窗口的变化，但是某个div的宽高是无法使用resize侦听的，可以使用ResizeObserver
【代码】window.onresize只能侦听窗口的变化，但是某个div的宽高是无法使用resize侦听的，可以使用ResizeObserver。
2022-09-07 10:15:59
435
原创 虚拟列表的原理
换个思路：可视化盒子里面定义两个div，第一个div的长度是真实列表的长度，用于在可视化盒子中撑开滚动条；第二个盒子用于展示列表，该列表的高度取决于可视化盒子的高度，计算出可渲染的列表数量；第二个div是通过子绝父相定位的，当滚动条滚动时，第二个div也会跟着滚动，通过定义top属性，来让第二个div始终出现在可视化盒子中；滚动的时候添加滚动事件，用于获取可渲染列表的起始索引，然后截取全部列表作为可渲染列表；正常渲染长列表时是全部渲染出来的，但是当列表很长的时候，会造成渲染时间慢，卡顿等问题；
2022-09-03 12:25:23
679
原创 模拟vue动态路由
先说明下router这个实例对象下的addRoutes方法：这个方法传入一个数组，其实就是一个新的路由表单，它不会覆盖掉原来旧的路由表单，而是采用合并的原则，类似于React中的setState方法；以上只是一个demo，router.addRoutes方法在这里是不能用的，因为没有router实例，只是方便大家理解，具体还是应用在vue项目中。...
2022-08-30 11:45:42
322
原创 表格如何调出好看的样式？
所以蓝色一行只有两个单元格可展示，而且只能展示在姓名下面，只有那两个单元格是没有被占用的；对于最后一行紫色那行，属性1右边的内容占了4个单元格，所有用了。标签里面的内容，绿色那一行包含了属性1，属性2，姓名；而蓝色的那一行只包含了年龄，这是因为属性1和属性2已经使用了。注：每一种颜色代表每一行，也就是。...
2022-08-12 23:37:13
474
原创 echarts地图区域高亮时，所在区域的symbol切换图片，类似跟着区域高亮
首先看scatter散点图的数据：上面data中的value可以存放多个值，只要保证前面两个是经纬度的值，就可以显示在相应的位置，这里还多了2和0，2主要是自定义label时要显示的数值，而最后一个0则是用来判断symbol显示的图片（0显示未高亮图片，1显示高亮图片）下面看看自定义symbol时作的判断（使用回调函数形式就可以做判断了）：当把鼠标放到地图的区域时，地图会高亮，同时可以在鼠标移入事件中拿到高亮区域的名称，从而可以从scatter的data数据中，找到跟高亮区域相同的名称，就可以拿到对应
2022-08-04 22:22:54
3398
2
原创 数组every和some方法的区别？
every返回的是一个布尔类型的值，数组中所有成员满足条件才会返回true，否则为false;some返回的也是布尔类型，数组中只要有一个满足，则返回true，全部不满足返回false;
2022-07-30 17:11:55
99
原创 css边框图片的使用场景
border-image的第一个属性是图片地址，第二个属性是切的距离，第三个属性是边框的大小，第四个属性比较不常用，默认为0就好，第五个属性是选择填充还是拉伸；原理就是把这张图片切四刀，保证四个角的图片的比例不变，也就是四个角不会变形（1，3，6，8），然后2，4，5，7的位置拉伸或填充，这样无论盒子是多高多宽，都不会破坏图片四个角的比例；做大屏可视化的时候，往往会有一些边框的背景图片，但是由于可视化的盒子宽高是自适应的，也就是宽度和高度是不固定的；...
2022-07-30 10:27:12
802
原创 elementui中表格嵌套了input框，数据量很大的情况下，输入框输入会卡顿
思路可以设置一个span文本框和input框，当点击span时才出现input框。原因大量的input框会导致卡顿。
2022-07-29 09:44:27
2875
原创 echarts地图中如何使用图片填充地图，类似于给地图添加纹理效果
/要使用import的方式引入图片，不支持直接写图片路径。//旧版本才可以在颜色中使用图片。旧版本的echarts地图中的。//获取图片的dom元素。//获取地图json数据。
2022-07-22 21:14:33
4239
9
原创 elementui中内容滚动并伴随着el-steps状态自动切换，点击el-steps内容也会自动定位到相应位置
是因为有可能是计算存在一些误差，需要微微调整（因为点击el-step的同时也会执行if判断，得确保执行的是对应的if判断，不然两边会冲突）el-scrollbar__wrap默认会添加height。//必须设置el-scrollbar的高度。//获取滚动内的每个盒子距离顶部的距离。//注册点击事件，获取索引。//获取有滚动条盒子的对象。注上面的if判断里面的。...
2022-07-17 17:22:31
2621
原创 彻底搞懂offsetHeight，clientHeight，scrollHeight，scrollTop，offsetTop
滚动条滚动的距离，也就是滚动的内容被卷入的高度，一般用于设置滚动条的位置；获取的高度除了自身高度外，还包含了padding和border。注红色盒子的scollHeight就是绿色盒子的高度。获取的高度除了自身高度外，还包含了padding。与父级盒子顶部的距离；...
2022-07-17 12:58:56
560
原创 elementui中表格自定义复选框
但是有个需求是全选按钮和下面的复选框不联动，也就是勾了全选按钮后，下面的复选框不会全部勾上；换行标签，主要的目的是隐藏复选框旁边的label文字显示，表格中的复选框不需要文字显示；可能大家有个疑问，下面的复选框是动态渲染的，为什么勾选后拿到的值都在同一个数组里面呢？因为它们都绑定了同一个数组，自然勾选后的值就在一个数组里了；看下面的例子就知道了；注表头的v-model和下面每一项的v-model绑定不同的数组，即可不联动；'上海市普陀区金沙江路1518弄''上海市普陀区金沙江路1517弄'...
2022-07-17 11:41:55
4363
原创 vue中$ref和$el的区别？
下面先详细了解$ref：定义一个父组件：如果ref使用在元素上的，则如果ref使用在组件上的，则，那就可以直接使用child组件中定义的所有属性和方法下面通过ref获取组件的实例，然后调用子组件中定义的方法：和的区别在于，拿到的是，而拿到的组件中的如果我想在父组件中获取子组件距离浏览器顶部的距离：因为拿到的就是子组件的根元素；如果想要在父组件中继续获取子组件中的其他dom元素：注：父组件中使用，就相当于子组件中的，可以当成this使用该组件中的所有属性和方法......
2022-07-12 20:50:42
1079
原创 vue中echarts自动轮播tooltip
vue首先需要封装tools.js的包（函数）：最好把这个js文件放到文件夹下，其他组件可能也需要用到，作为一个公共的函数；在vue组件中引入使用：
2022-07-09 13:41:29
1284
8
原创 vue中实现echarts的3d中国地图
echarts的地图是需要json文件的，而网上的地图json文件大多都需要收费，我们这里用阿里提供的免费的json文件，下载：前往下载地图json文件3d的echarts地图需要安装以下两个插件：在中全局引入：vue中json文件的数据是通过请求回来的；刚开始我是把json文件放在同一个目录下，然后通过相对路径去发送请求，结果请求不到数据，提示跨域了，这是我踩的坑；在网上看到大部分都是把json文件放到public文件夹下：然后通过绝对路径的方式去请求就可以请求到数据：注：代表的就是publ
2022-07-06 22:58:38
4007
原创 js中new Map的使用场景
当有一组数据：当后台返回了一个，但是我们想要拿到的是，一般的做法：如果后台返回100个编号，我们难道要遍历100次，然后再通过if来判断吗？如果可以把那一组数据转化成为对象：然后通过来进行获取对应的value值，是不是就更方便了，但是对象的key不可以是数字的，只能是变量或者字符串；这时候就需要用到new Map()了，new Map创建的对象，里面的key可以是任何数据（如: {12: ‘水泥’}）；所以使用new Map的好处是可以直接通过get方法，来找出key对应的value......
2022-07-04 21:51:26
4070
原创 vant移动端实现tab锚点定位和tab随滚动条自动切换
我们先实现锚点定位，锚点定位需要借助方法，这个方法会把当前元素的顶部定位到所在有滚动条的父元素的顶部，从而实现锚点定位的功能：注：上面不一定要使用a标签来点击定位，其他标签的点击也是可以的，这里用是因为a标签自带点击的手势图标；实现锚点定位并不难，只需要用方法，接下来要实现滚动条滚动到哪个元素的顶部，tab就对应切换；下面先了解几个方法的区别：，，clientHeight：带有滚动条盒子的高度scrollHeight：带有滚动条盒子里面的滚动内容的高度scrollTop：滚动内容被卷入的高度
2022-07-02 13:50:52
4602
原创 vue中v-for和ref一起使用会有什么问题？
平时我们使用获取到的是一个元素对象，而如果v-for和ref一起使用的话，ref获取到的是一个元素对象数组；以上通过获取到的是一个数组，而想要拿到div元素对象，要
2022-06-30 00:01:23
450
原创 vue中v-for和v-if是不能同时使用的，如果想用v-if应该如何解决？
v-fo和if同时在一个元素上使用的话会影响性能，可以在元素外面再嵌套一层，负责v-for的遍历，里面的元素负责v-if的判断：需要注意的是：key不能写在template标签上，否则会报错；因为template是一个辅助标签，是不会显示在浏览器上的；也就是不会渲染到浏览器，所以key属性对它不会生效（key的作用就是解决渲染问题）；...
2022-06-29 23:52:13
304
原创 vue中多个子组件form表单的校验可以使用Promise.all
当父组件中有多个子组件的form表单都需要校验，父组件点击按钮，应该触发每个子组件中的校验方法，等所有的子组件都校验通过，才能提交；如果每个子组件的校验方法中返回的是，那么父组件则可以使用来统一做判断，只有所有的子组件中的Promise都通过，才能提交；先看看Promise.all方法的使用：all方法的参数是一个数组，数组里面放promise对象，只有当数组里面的promise都通过了，才会执行all的then方法，这样就可以对所有的子组件的promise做校验的判断了；下面看个例子：...
2022-06-27 23:10:31
2378
原创 移动端如何实现打电话功能？
打电话功能是依靠实现的：；a标签可以不用点击也可以触发href跳转，使用a标签内部的方法，也是可以触发跳转的；注意：因为a标签的click事件被触发了，由于事件的冒泡，a标签的父级也会被触发，在a标签上添加即可阻止a事件的冒泡；...
2022-06-25 23:13:28
780
程序员做笔记神器typora
2022-05-28
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人