- 博客(14)
- 收藏
- 关注
RSS订阅
原创 Vue 导航栏滚动定位功能实现，导航栏-滚动页面；滚动页面-导航栏；
本文档介绍了如何在 Vue.js 项目中实现一个具有滚动定位功能的导航栏组件。该组件可以根据页面滚动位置高亮显示对应的导航菜单项，并且点击菜单项时，页面可以平滑滚动到相应的内容区域。在Navbar：保存根级子菜单的 keys。activeMenu：保存当前选中菜单的 key。：监听滚动事件的方法，根据滚动位置计算当前应该高亮显示的导航菜单项。：点击导航菜单项时，滚动到相应的内容区域。步骤 3：监听滚动事件在Navbar组件的 mounted 钩子函数中，使用方法监听滚动事件，并在事件触发时调用方法。
2023-08-30 11:51:16
1621
1
原创 vue列表-新增功能
将以上示例代码添加到您的Vue组件的相应位置，点击“新增资源”按钮即可弹出新增资源的模态框，填写表单并保存后，会触发handleSuccess()方法进行刷新资源列表。在Vue组件中，将ProductModal组件引入并添加相应的页面代码，根据实际需求可自行完善新增资源功能的业务逻辑及表单验证规则。在资源列表的顶部，点击"新增资源"按钮，弹出一个模态框，用于填写新增资源的信息。
2023-08-02 14:50:30
159
原创 vue列表-父列表数据获取子列表数据
当点击父列表的数据行时，会触发父组件的方法，更新选中的父列表行的id，并将id传递给子组件的方法，子组件根据id获取对应的子列表数据，并更新子组件的数据。在子组件的模板代码中，将父列表的rowKey设置为父列表数据对象中的唯一标识符（例如id）。代码示例是基于Vue框架实现的一个组件，包含了父列表和子列表，通过点击父列表的数据行来动态获取子列表的数据。在子组件的方法（例如doGetSkuList）中，根据传递过来的父列表行的id发送请求，获取对应的子列表的数据，并更新子组件的数据。
2023-08-05 11:56:02
1220
1
原创 vue-输入框实时验证IP地址合法性并在下方进行提示
调用handleInput()方法并定义一个参数，该方法会返回一个布尔值，表示IP地址的合法性。您可以在需要的地方调用该方法，例如在提交表单之前对输入的IP地址进行验证，或在用户输入时动态显示IP地址的合法性提示信息。在Vue组件中的IP地址输入框定义一个handleInput方法，该方法使用正则表达式对传入的IP地址进行验证。正则表达式中的规则可以匹配合法的IPv4地址。当输入框未填时或IP地址不合法时都将会报IP地址格式不正确。使用正则表达式对输入的IP地址进行合法性验证。
2023-08-04 09:35:28
1772
2
原创 vue列表-表头设置功能
将以上示例代码添加到您的Vue组件的相应位置，点击表头设置按钮即可展示和隐藏表格的列，根据需要设置显示或隐藏的列。设置的结果将自动保存到本地存储，下次加载页面时将会保持显示状态。在页面中找到表头设置按钮，点击按钮时触发下拉菜单的显示和隐藏，选择需要显示或隐藏的列，选中则为显示，未选中则为隐藏。在资源列表的右上角，有一个下拉菜单按钮，点击该按钮可选择展示或隐藏表格的列。
2023-08-03 09:12:01
280
1
原创 vue列表-到期时间与当前时间对比改变列表样式
将以上示例代码整合到您的 Vue 组件中，可以根据到期时间的不同情况设置行的样式。您可以根据实际需求，在 CSS 文件中定义相关样式类，如 expire_tr、expire_tr_soon 和 expire_tr_woon，来设置不同样式的效果。在rowClassName 方法中，根据当前时间和到期时间的差值来判断行的样式，并返回相应的样式类名。该功能通过根据到期时间的不同，动态改变列表行的样式来实现。
2023-08-03 09:11:50
231
1
原创 vue列表-新增/编辑功能共用一个保存接口
在Vue组件中引入一个名为EditModal的编辑模态框组件，并通过ref属性给组件取一个引用，在rowData属性中传入需要编辑的资源数据，监听success事件以处理编辑成功后的回调。将以上示例代码添加到您的Vue组件的相应位置，点击“新增资源”按钮即可弹出新增资源的模态框，填写表单并保存后，会触发handleSuccess()方法进行刷新资源列表。在列表的操作列中添加一个编辑按钮，当用户点击编辑按钮时，调用showEditModal()方法，并传入选中的资源数据。
2023-08-03 09:11:23
279
1
原创 vue列表-查询筛选功能
在Vue组件中添加一个表单，表单中包含两个输入框，分别用于输入IP地址和资源名称。当用户点击查询按钮时，调用query()方法进行列表筛选操作，调用接口传递筛选条件。将以上示例代码添加到您的Vue组件中，根据实际需求适配查询条件的数据结构和查询操作的业务逻辑。用户可通过输入IP地址和资源名称来进行查询，点击查询按钮后，调用接口获取匹配的资源列表数据。在资源列表的顶部，有一个查询条件的表单，用户可以输入IP地址和资源名称来进行查询筛选操作。
2023-08-03 09:11:09
1516
原创 vue列表-批量删除功能
将以上示例代码添加到您的Vue组件中，在适当的位置显示资源列表，并在操作栏中添加"批量删除"按钮，并调用doBatchDel()方法删除所选中的资源。根据实际需求适配批量删除的业务逻辑和接口调用。在Vue组件的资源列表上方或下方添加一个操作栏，在操作栏中添加一个"批量删除"按钮。当用户选中一个或多个资源时，按钮才显示。当用户点击按钮时，调用doBatchDel()方法进行批量删除操作。在资源列表的顶部或底部添加一个"批量删除"按钮，用户可点击该按钮来删除所选中的资源。
2023-08-03 09:10:56
1048
1
原创 vue列表-删除功能
在Vue组件中，通过在资源列表的操作列中添加"删除"按钮，并调用doDel()方法进行删除操作。删除操作使用a-popconfirm组件来进行确认提示，用户确认后调用接口进行删除操作。将以上示例代码添加到您的Vue组件中，在适当的位置显示资源列表，并在操作列中添加"删除"按钮，并调用doDel()方法删除对应的资源。根据实际需求适配删除操作的业务逻辑和接口调用。在资源列表中的每一行数据后面有一个"删除"按钮，用户可以点击该按钮来删除对应的资源。
2023-08-03 09:10:45
1390
1
原创 vue列表-编辑修改功能
当用户点击编辑按钮时，会弹出一个编辑模态框，用户可在模态框中编辑选中的资源。在Vue组件中引入一个名为EditModal的编辑模态框组件，并通过ref属性给组件取一个引用，在rowData属性中传入需要编辑的资源数据，监听success事件以处理编辑成功后的回调。在列表的操作列中添加一个编辑按钮，当用户点击编辑按钮时，调用showEditModal()方法，并传入选中的资源数据。编辑功能通过点击列表中的编辑按钮，弹出一个模态框，供用户编辑选中的资源。
2023-08-03 09:10:27
557
1
原创 IT技术培训班：是热门还是假热门？
在学习IT技术的过程中，我相信很多人都曾被安利过各种五花八门的技术培训班。这些培训班以各种吸引人的宣传手段让人眼花缭乱，然而我们是否应该对此抱有谨慎的态度呢？在本文中，我将分享一些关于技术培训班的看法和经验，并探讨在培训班中学习技术的价值。首先，对于技术培训班的宣传方式，我们不得不说它们都非常“厉害”。无论是通过各种广告渠道、社交媒体还是口碑相传，它们都以诱人的承诺吸引着学员。培训班往往标榜自己的课程内容全面、师资力量雄厚、就业率高等，甚至有些还承诺能在短时间内让学员成为技术专家。
2023-08-03 09:10:13
299
1
原创 探索成长之路：挑战与迷茫的抉择
如今，我并不完全摆脱迷茫的困扰，但我学会了与它共存。我接受了自身的局限性，同时也意识到只有通过不断学习和努力，才能逐渐提高自己的能力。我将迷茫视为成长的机会，不断探索新知识、尝试新技术，并从中收获成就感和满足感。每个人在学习和发展的过程中都会遇到迷茫和焦虑。关键是如何应对和克服这些情绪。通过保持积极的心态、与他人分享困惑、勇于面对失败，我们可以不断提高自己的能力，并逐渐走出迷茫的困扰。让我们勇敢踏上成长之路，一起追寻技术的乐趣和无限的可能性。
2023-08-03 09:09:44
94
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人