- 博客(24)
- 收藏
- 关注
RSS订阅原创 超简单~新手必会！！ Vue.js中实现登录密码框的“眼睛图标”交互效果
之前的实现思路比较麻烦，是通过在input框后添加图标，给图标添加点击事件，来切换input的type属性 text-password来实现的，这种方法比较麻烦，需要使用到两个图标和点击事件以及v-if，后来突然发现一种超简单的方法，记录一下分享给各位。input类型设置为password，增加一条 show-password 属性即可，炒鸡简单，废话不多说，直接上代码。开发一个Vue项目，在登录页实现用户登录，密码框一般会有一个小眼睛的图标，用来让用户主动进行密码的显示隐藏功能，
2025-02-21 09:15:42
328
原创 js数组方法总结（包含ES6）
返回值：符合条件的数组元素，如果没有符合条件的成员，则返回。,接收两个参数为数组的索引，第一个参数表示开始的位置，第二个参数表示结束的位置。判断一个数组是否包含一个指定的值，参数：指定的内容返回值：布尔值是否改变原数组：不改变。方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回。，对数组中的每一项进行判断，若都不符合则返回false，否则返回true。，对数组中的每一项进行判断，若都符合则返回true，否则返回false。，过滤数组中，符合条件的元素并返回一个新的数组。
2023-09-28 11:20:15
145
原创 前端实现滑动刻度尺
2、在外层的div里嵌套一个div,设置超出父级div盒子的宽度，制作一张刻度尺的png图片作为子盒子的背景图，同时给父级设置scroll-y:auto;实现思路：使用vue2,进行数据绑定，即保证上方的数据实时更新，向右滑动刻度尺数值增加，向左减少。4，js方法通过监听父级盒子左右滑动的滚动条并将至赋给视图中的数字，即可实现滑动刻度修改数值。3，写一个小的div即作为参照物的蓝色指针，通过父相自绝定位至中间、1.写一个大的div盒子给固定宽度和高度；
2023-09-27 18:41:00
1689
1
原创 css通过display:block实现侧边栏隐藏弹出效果
6、给div设置hover效果，当鼠标移入时让dispiay的值变为block,从而让元素显示出来。7、最后小火箭通过jqurey方法点击实现返回顶部效果（不是重点，比较简单，实现看代码）3、通过定位让伪类标签覆盖在div上，将图标作为背景图放进去（这里准备了两张背景图）2、div添加伪类标签::befor和::after（综上，通过伪类标签、display属性、hover效果实现纯css控制元素的隐藏和显示。通过伪类标签、display属性、hover效果实现纯css控制元素的隐藏和显示。
2023-07-06 12:59:53
885
1
原创 解决使用Vant组件库表单组件无法提交数据的问题
的判断，但是v-show是相当于控制css属性进行的渲染，即使隐藏掉了但是组件没有销毁，还是存在的只是看不见了，所以在设置了必填的表单验证的情况下，是无法通过的，所以没有办法提交表单，点击复选框，选择毕业时间这一栏将被隐藏掉，但是点击保存，总是无法提交表单。要解决这个问题，使用v-if进行条件渲染即可。原本使用了v-show进行条件渲染。
2023-05-25 13:03:55
944
原创 解决Vant时间选择器组件报错--Invalid prop: type check failed for prop “value“. Expected Number, String, got Date
解决Vant时间选择器组件报错--Invalid prop: type check failed for prop "value". Expected Number, String, got Date
2023-05-25 10:19:37
2392
原创 input 设置只能输入纯数字
完成后，输入框限制仅可输入数字，字母e和小数点均可输入（e为科学计数法）设置input 的type属性为number,在样式中设置如下代码。
2023-04-06 18:34:34
1123
原创 Element UI Form表单自定义验证详解
前端必不可少要使用到form表单进行数据的传递，为了优化用户体验和拿到准确类型的数据，需要进行前端验证，本文分析Element UI表单的自定义验证，以年龄验证和密码验证进行分析详解，主要的自定义规则为：验证表单是否为空，输入年龄验证年龄只能为数值，验证年龄必须大于18岁，验证密码不能为空，最后进行表单的提交与重置。表单为空的时候点击提交，验证表单不能为空，验证规则提示用户。填写年龄小于18岁，验证有误提示用户。输入正确年龄验证通过，不提示。
2023-04-01 17:36:37
1052
原创 如何创建一个vue3项目
一个名为basics-3的项目创建完成了，接下来进入项目内部安装所需的依赖。依赖安装完成后使用 npm run dev运行，成功后如下。Project name:输入项目名称。接下来选择语言模式:这里使用TS。选择使用的框架：这里选择vue。使用vite脚手架进行创建。
2023-02-19 18:30:37
787
原创 Vue状态管理详解
组件A和组件B都同时引入了相同的状态count:0,此时由于状态管理的存在，不论是在A组件或者B组件点击按钮，count的值都会加1这就是简单的状态，通俗点说就是两个人同时接收一个相同的物品。以上是在单页面中的表现，简单的状态处理，当调用count++方法时视图中count的值会从0变成1。这样我们的组件树就变成了一个大的“视图”，而任何位置上的组件都可以访问其中的状态或触发动作。来创建一个响应式对象，并将它导入到多个组件中：下面的例子就是让count的值发生改变时，不同组件A和B要同时变更这个状态。
2023-02-17 22:05:46
428
原创 JS实例化对象详解
在程序语言中，“类”具有很多的方法，和属性，但是由于“类”是一个抽象的概念，没有办法直接使用其中的方法和属性，只有把这个“类”实例化成一个具体的“实例对象”才能够调用属于“类”的方法和属性，“实例对象”具有"类"的所有属性和方法，将抽象的概念具体到一个个体中，才能够更好的使用。比如：同属于“人类”的你，就是人类中一个具体的对象，你无法指挥“人类”去写代码，因为它只是一个概念，但是你可以写代码，因为你是“人类“中的一个具体实例，你不是概念化的是实体化的。从类具体到实例化对象，从抽象到具体的过程就称为实例化。
2023-02-03 20:24:40
1483
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人