- 一、介绍这是一个可以快速回到页面顶部的组件，当用户浏览到页面底部的时候，通过点击按钮，可快速回到页面顶部。 二、使用方法由于该组件是基于element-UI进行二次封装的，所以在使用该组件时请务必安装element-UI，安装好element-UI后，只需将该组件文件夹BackToTop导入到现有项目中即可使用。 三、使用示例<template> <div id="app"> <!... 一、介绍这是一个可以快速回到页面顶部的组件，当用户浏览到页面底部的时候，通过点击按钮，可快速回到页面顶部。 二、使用方法由于该组件是基于element-UI进行二次封装的，所以在使用该组件时请务必安装element-UI，安装好element-UI后，只需将该组件文件夹BackToTop导入到现有项目中即可使用。 三、使用示例<template> <div id="app"> <!...
- 一、Computed可以关联多个实时计算的对象，当这些对象中的其中一个改变时都会触发这个属性，具有缓存能力，所以只有当数据再次改变时才会重新渲染，否则就会直接拿取缓存中的数据。例如，当我们想让div元素的背景色和文字颜色一致时，我们就可以使用computed属性。此时computed只会在初次渲染和文字颜色改变的情况下才会触发。其他情况下直接从缓存中读取。<template> <div> ... 一、Computed可以关联多个实时计算的对象，当这些对象中的其中一个改变时都会触发这个属性，具有缓存能力，所以只有当数据再次改变时才会重新渲染，否则就会直接拿取缓存中的数据。例如，当我们想让div元素的背景色和文字颜色一致时，我们就可以使用computed属性。此时computed只会在初次渲染和文字颜色改变的情况下才会触发。其他情况下直接从缓存中读取。<template> <div> ...
- 一、前言blur与change事件在绝大部分情况下表现都非常相似，输入结束后，离开输入框，会先后触发change与blur，唯有两点例外。1. 没有进行任何输入时，不会触发change。在这种情况下，输入框并不会触发change事件，但一定会触发blur事件。在判断表单修改状态时，这种差异会非常有用，通过change事件能轻易地找到哪些字段发生了变更以及其值的变更轨迹。2. 输入后值并没有... 一、前言blur与change事件在绝大部分情况下表现都非常相似，输入结束后，离开输入框，会先后触发change与blur，唯有两点例外。1. 没有进行任何输入时，不会触发change。在这种情况下，输入框并不会触发change事件，但一定会触发blur事件。在判断表单修改状态时，这种差异会非常有用，通过change事件能轻易地找到哪些字段发生了变更以及其值的变更轨迹。2. 输入后值并没有...
- 一、拓展阅读在前端应用中，窗口间通信应用场景很多，比如弹出qq登录认证窗。 二、postMessage 语法window.postMessage(msg,targetOrigin)注意⚠️postMessage要通过window对象调用！因为这里的window不只是当前window！大部分使用postMessage的时候，都不是本页面的window，而是其他网页的window！如：ifra... 一、拓展阅读在前端应用中，窗口间通信应用场景很多，比如弹出qq登录认证窗。 二、postMessage 语法window.postMessage(msg,targetOrigin)注意⚠️postMessage要通过window对象调用！因为这里的window不只是当前window！大部分使用postMessage的时候，都不是本页面的window，而是其他网页的window！如：ifra...
- 一、前言在开发Vue项目过程中，遇到页面样式混乱情形。后发现可通过刷新页面解决该问题，经过问题探究，发现使用最简单的页面刷新方法location.reload()或this.$router.go(0)均会导致页面刷新过程中出现空白现象的发生，用户体验不佳，故继续探究解决方法。 二、业务场景在管理后台，在执行完，增，删，改，操作的时候，我们需要刷新一下页面，重载数据。在JQ中我们会用到loc... 一、前言在开发Vue项目过程中，遇到页面样式混乱情形。后发现可通过刷新页面解决该问题，经过问题探究，发现使用最简单的页面刷新方法location.reload()或this.$router.go(0)均会导致页面刷新过程中出现空白现象的发生，用户体验不佳，故继续探究解决方法。 二、业务场景在管理后台，在执行完，增，删，改，操作的时候，我们需要刷新一下页面，重载数据。在JQ中我们会用到loc...
- 一、前言在项目开发过程中，遇到如下用户体验提升需求：需要实现错误提示时根据后台返回错误列表信息，换行展示。 二、实现方式通过F12元素查看，在对应的样式中加入white-space:pre-wrap，该样式的主要作用是识别字符串中的换行符"\n"，故需要在待展示的信息字符串中加入相应的换行标识符。在$notify消息提示中，作用于el-notification：.el-notificati... 一、前言在项目开发过程中，遇到如下用户体验提升需求：需要实现错误提示时根据后台返回错误列表信息，换行展示。 二、实现方式通过F12元素查看，在对应的样式中加入white-space:pre-wrap，该样式的主要作用是识别字符串中的换行符"\n"，故需要在待展示的信息字符串中加入相应的换行标识符。在$notify消息提示中，作用于el-notification：.el-notificati...
- 一、前言elementUI 表格没有自带的拖拽排序的功能，只能借助第三方插件Sortablejs来实现。git地址中文网Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery required.Supports... 一、前言elementUI 表格没有自带的拖拽排序的功能，只能借助第三方插件Sortablejs来实现。git地址中文网Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery required.Supports...
- 一、前言ant-design-vue是蚂蚁金服 Ant Design 官方唯一推荐的Vue版UI组件库，它其实是Ant Design的Vue实现，组件的风格与Ant Design保持同步，组件的html结构和css样式也保持一致。 用下来发现它的确称得上为数不多的完整VUE组件库与开发方案集成项目。下面具体讲解下该组件库的应用实践。 二、组件库安装npm install ant-desig... 一、前言ant-design-vue是蚂蚁金服 Ant Design 官方唯一推荐的Vue版UI组件库，它其实是Ant Design的Vue实现，组件的风格与Ant Design保持同步，组件的html结构和css样式也保持一致。 用下来发现它的确称得上为数不多的完整VUE组件库与开发方案集成项目。下面具体讲解下该组件库的应用实践。 二、组件库安装npm install ant-desig...
- 一、前言在开发Vue项目过程中，应用element-ui做表单验证遇到this.$refs[formName].validate()提示validate()未定义的问题。 二、问题原因要验证的DOM，还没有加载出来。 三、解决方法首先打印一下this.$refs[formName]，检查是否拿到了正确的需要验证的form（有时候获取到数组，需要按下标取值）。其次在拿到了正确的form后，检... 一、前言在开发Vue项目过程中，应用element-ui做表单验证遇到this.$refs[formName].validate()提示validate()未定义的问题。 二、问题原因要验证的DOM，还没有加载出来。 三、解决方法首先打印一下this.$refs[formName]，检查是否拿到了正确的需要验证的form（有时候获取到数组，需要按下标取值）。其次在拿到了正确的form后，检...
- 一、前言在使用 elementUI 的el-table 组件时，表头应用v-if判断来动态显示，正常来说这样的操作是没有问题的，但是如果在这基础上使用 <template slot-scope="scope"> 操作的话，表头一旦切换就会报错，错误信息如下：_self.$scopedSlots.default is not a function 二、解决方法当应用v-for或者v-if切换... 一、前言在使用 elementUI 的el-table 组件时，表头应用v-if判断来动态显示，正常来说这样的操作是没有问题的，但是如果在这基础上使用 <template slot-scope="scope"> 操作的话，表头一旦切换就会报错，错误信息如下：_self.$scopedSlots.default is not a function 二、解决方法当应用v-for或者v-if切换...
- 属性window.onresize属性可以用来获取或设置当前窗口的resize事件的事件处理函数。在窗口大小改变之后,就会触发resize事件.//vue页面<template> <div id='echart'> 报表 </div></template><script> export default { data() { return { }; ... 属性window.onresize属性可以用来获取或设置当前窗口的resize事件的事件处理函数。在窗口大小改变之后,就会触发resize事件.//vue页面<template> <div id='echart'> 报表 </div></template><script> export default { data() { return { }; ...
- 一、前言在项目开发过程中，若将页面元素全部绑定于一个表单中，且页面中的某些元素并未直接获得，在获取页面操作值时就会出现意外效果，例如不能重置页面元素。 二、场景复现需求：在使用el-select设计表单下拉框时，若后台返回的下拉框数组长度为1，则默认选中第一个元素。思路：后台返回值后直接将第一个元素的value赋值给el-select的v-model。created() {.... ... 一、前言在项目开发过程中，若将页面元素全部绑定于一个表单中，且页面中的某些元素并未直接获得，在获取页面操作值时就会出现意外效果，例如不能重置页面元素。 二、场景复现需求：在使用el-select设计表单下拉框时，若后台返回的下拉框数组长度为1，则默认选中第一个元素。思路：后台返回值后直接将第一个元素的value赋值给el-select的v-model。created() {.... ...
- 一、前言在前期博文《Vue进阶（八十四）：vue中Computed 和 Watch的使用和区别》中，讲解了vue中Computed 和 Watch的使用和区别，其中，只是介绍了computed如何计算元素属性，并未介绍如何方法传参。本篇博文主要讲解下如何利用computed的计算属性进行传参。 二、场景引入在前端项目开发过程中，会遇到码值转换应用场景，且不同页面会存在复用码值转换情况，为提... 一、前言在前期博文《Vue进阶（八十四）：vue中Computed 和 Watch的使用和区别》中，讲解了vue中Computed 和 Watch的使用和区别，其中，只是介绍了computed如何计算元素属性，并未介绍如何方法传参。本篇博文主要讲解下如何利用computed的计算属性进行传参。 二、场景引入在前端项目开发过程中，会遇到码值转换应用场景，且不同页面会存在复用码值转换情况，为提...
- 在前期博文《Vue进阶（三十）：vue中使用element-ui进行表单验证》、《Vue进阶（幺幺叁）：关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题》、《Vue进阶（幺贰幺）：表单校验注意事项》中主要讲解了form表单校验应遵守的约定及常见问题解决方法。在实现动态表单，且表单项为后台动态生成时，若form表单属性不存在... 在前期博文《Vue进阶（三十）：vue中使用element-ui进行表单验证》、《Vue进阶（幺幺叁）：关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题》、《Vue进阶（幺贰幺）：表单校验注意事项》中主要讲解了form表单校验应遵守的约定及常见问题解决方法。在实现动态表单，且表单项为后台动态生成时，若form表单属性不存在...
- 一、动态路由（页面刷新数据不丢失）methods：{ insurance(id) { //直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/particulars/${id}`, })}路由配置{ path: '/particulars/:id', name: 'particu... 一、动态路由（页面刷新数据不丢失）methods：{ insurance(id) { //直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/particulars/${id}`, })}路由配置{ path: '/particulars/:id', name: 'particu...
上滑加载中
推荐直播
-
华为云码道-玩转OpenClaw，在线养虾2026/03/11 周三 19:00-21:00
刘昱，华为云高级工程师/谈心，华为云技术专家/李海仑，上海圭卓智能科技有限公司CEO
OpenClaw 火爆开发者圈，华为云码道最新推出 Skill ——开发者只需输入一句口令，即可部署一个功能完整的「小龙虾」智能体。直播带你玩转华为云码道，玩转OpenClaw
回顾中 -
华为云码道-AI时代应用开发利器2026/03/18 周三 19:00-20:00
童得力，华为云开发者生态运营总监/姚圣伟，华为云HCDE开发者专家
本次直播由华为专家带你实战应用开发，看华为云码道(CodeArts)代码智能体如何在AI时代让你的创意应用快速落地。更有华为云HCDE开发者专家带你用码道玩转JiuwenClaw，让小艺成为你的AI助理。
回顾中 -
Skill 构建 × 智能创作：基于华为云码道的 AI 内容生产提效方案2026/03/25 周三 19:00-20:00
余伟，华为云软件研发工程师/万邵业（万少），华为云HCDE开发者专家
本次直播带来两大实战：华为云码道 Skill-Creator 手把手搭建专属知识库 Skill；如何用码道提效 OpenClaw 小说文本，打造从大纲到成稿的 AI 原创小说全链路。技术干货 + OPC创作思路，一次讲透！
回顾中
热门标签