65浏览

0评论

vue 数据遍历筛选 过滤 排序的应用操作

vue 中对v-for 遍历数据的处理方式 可以分为两类 ：一.对data 直接赋值（比较笨，但是比较直接）<div id="app"> <ul> <li v-for="item in list">{{item.n}}</li> </ul> </div>...

• 2021-05-30

72浏览

0评论

ant design的table组件实现全选功能以及自定义分页

我就废话不多说了，大家还是直接看代码吧~ant design的table组件实现全选功能以及自定义分页直接附上全部代码以及截图了import './index.scss';import React from 'react';im...

• 2021-05-30

66浏览

0评论

浅谈Ant Design Pro 菜单自定义 icon

Ant Design Pro 官方文档说明 在菜单中使用自定义的 icon由于 umi 的限制，在 router.config.js 是不能直接只是用组件的，Pro 中暂时支持 使用 ant.design 本身的 icon type，和...

• 2021-05-30

64浏览

0评论

vue+iview实现文件上传

vue+iview文件上传（base64编码、类型验证、大小限制、多文件上传及文件预览）&#8203; iview对文件上传提供了一个专门的标签Upload，不过这个标签默认需要一个接口action属性，但一...

• 2021-05-30

59浏览

0评论

如何使用 vue-cli 创建模板项目

场景吾辈曾经只是个 Java 后端开发人员，原本对前端的了解大致只有 HTML/CSS/JavaScript/JQuery 级别，后来接触到了 nodejs。不仅是工作之需，吾辈个人而言也非常想要了解现代前...

• 2021-05-30

58浏览

0评论

Vue3+elementui plus创建项目的方法

1.使用elementui plus版本实现按需加载组件会报错Error: Cannot find module 'babel-preset-es2015' from 'D:\danzhukeji\danzhu\my_pp\src'这样的情况下{ "presets": [["...

• 2021-05-30

59浏览

0评论

Vue.js桌面端自定义滚动条组件之美化滚动条VScroll

前言前段时间有给大家分享一个vue桌面端弹框组件，今天再分享最近开发的一个vue pc端自定义滚动条组件。vscroll 一款基于vue2.x开发的网页端轻量级超小巧自定义美化滚动条组...

• 2021-05-30

63浏览

0评论

vue-drawer-layout实现手势滑出菜单栏

本文实例为大家分享了vue-drawer-layout实现手势滑出菜单栏的具体代码，供大家参考，具体内容如下文档链接地址安装npm install vue-drawer-layout --savemain.js导入import Dra...

• 2021-05-30

59浏览

0评论

详解Vue 的异常处理机制

最近需要在业务中加一个全局的 filter，filter 会对输入进行验证，用于进行前端监控。其中一个要处理的问题，就是验证失败后如何发送异常日志，这个过程中顺便了解了一下 vue 的异...

• 2021-05-30

54浏览

0评论

vue打开其他项目页面并传入数据详解

1.不跨域，携带sessionstorage打开
主页面，存储sessionstorage后，打开页面let data = { text:'我是数据'};let isMobile = navigator.userAgent.match(/(phone|pad|pod|iPhone|i...

• 2021-05-30

56浏览

0评论

在Vue中使用mockjs代码实例

前言　　前后端分离的开发模式，前端需要向后端请求数据（ajax请求），但实际开发过程中，前后端会约定一份接口文档，但前后端开发进度并不一致，当后端没有完善接口功能时，前端需要在本地...

• 2021-05-30

44浏览

0评论

vue实现广告栏上下滚动效果

本文实例为大家分享了vue实现广告栏上下滚动效果的具体代码，供大家参考，具体内容如下html部分<div class="roll"> <img src="xxx.jpg" alt /> <ul :class="{marquee_top:anima...

• 2021-05-30

65浏览

0评论

vue单元格多列合并的实现

一.多列合并
1.在el-table中添加:span-method="objectSpanMethod"属性来控制合并单元格，如下图
2.合并代码，每一列都要设置一个不同的key，这样可以防止合并的时候上下内容一样...

• 2021-05-30

56浏览

0评论

使用vue编写h5公众号跳转小程序的实现代码

前言：我使用vue编写的h5公众号，实现点击小程序入口，打开小程序，微信官方文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html 要求：微信版...

• 2021-05-30

50浏览

0评论

vue中defineProperty和Proxy的区别详解

Proxy的出现，给vue响应式带来了极大的便利，比如可以直接劫持数组、对象的改变，可以直接添加对象属性，但是兼容性可能会有些问题Proxy可以劫持的数组的改变,defineProperty 需要...

• 2021-05-30

73浏览

0评论

vue实现表格合并功能

本文实例为大家分享了vue实现表格合并功能的具体代码，供大家参考，具体内容如下1、背景本身有vue进行渲染的数据表格，，但是出于整体考虑，需要对相同的列信息进行单元格合并。由于...

• 2021-05-30

95浏览

0评论

element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)

突然发现已经半年没更新的element-ui更新了

更新了什么还不清楚，但是告知了基于vue3.x版本的 element-plus 已经出来了。

先来上手体验一下
首先安装一个最新的@vue-cli，搭...

• 2021-05-30

46浏览

0评论

Vue 打包的静态文件不能直接运行的原因及解决办法

问题吾辈使用 vue-cli 直接生成的 vue 模板项目，在模板之上继续开发的。然而在使用 npm run build 打包项目时，却发现打包好的项目在浏览器中直接打开好像什么都没有？原因查看...

• 2021-05-30

46浏览

0评论

解决vue页面刷新，数据丢失的问题

在做vue项目的过程中有时候会遇到一个问题，就是进行F5页面刷新的时候，页面的数据会丢失，出现这个问题的原因是因为当用vuex做全局状态管理的时候，store中的数据是保存在运行内存...

• 2021-05-30

58浏览

0评论

Vue开发中常见的套路和技巧总结

属性排放export default { name: '名称', components: { // 组件挂载a}, created(){} // 数据获取 beforeMount() {}, // 数据获取 data: () => ({}), //响应式数据 compute...

• 2021-05-30

73浏览

0评论

Vue使用Element实现增删改查+打包的步骤

在我们进行项目开发期间，避免不了使用各式各样的组件，Element是由饿了么公司前端团队开源。样式精美、组件齐全、易于上手。效果：组件使用我们利用vue-cli创建一个项目，然后只需...

• 2021-05-30

99浏览

0评论

VUE项目实现主题切换的多种方法

需求是 做一个深色主题和浅色主题切换的效果方法一 多套css这个方法也是最简单，也是最无聊的。<!-- 中心 --><template> 动态获取父级class名称，进行一个父级class的多次定义...

• 2021-05-30

62浏览

0评论

在Vue中使用CSS3实现内容无缝滚动的示例代码

一、效果预览
最近在做一个活动页面，遇到幸运用户中奖的滚动公告需求。下面是实现效果：（gif录制略显卡顿，实际效果很流畅）
二、无缝滚动原理1、容器宽高固定，超出内容隐藏；
2、内容...

• 2021-05-30

60浏览

0评论

Vue用mixin合并重复代码的实现

在我们做项目的时候，往往有很多代码逻辑是通用的，比如说，业务逻辑类型的判断，时间戳的转换，url中字符串的截取等等，这些函数如果在每个需要的页面中都加入的话，不仅加重了当...

• 2021-05-30

71浏览

0评论

编写v-for循环的技巧汇总

在 Vue.js 中，v-for 循环是每个项目都会使用的东西，它允许您在模板代码中编写 for 循环。在最基本的用法中，它们的用法如下。<ul> <li v-for="product in products"> {{ produ...

• 2021-05-30

77浏览

0评论

vue组件中节流函数的失效的原因和解决方法

今天使用节流函数的时候遇见了一个问题，搞了半天才找到原因，所以在这里做个总结。节流函数浏览器的一些事件，如：resize，scroll，mousemove等。这些事件触发频率太过频繁，绑定在这些...

• 2021-05-30

77浏览

0评论

element-ui中el-upload多文件一次性上传的实现

项目需求是多个文件上传，在一次请求中完成，而ElementUI的上传组件是每个文件发一次上传请求，因此我们借助FormData的格式向后台传文件组html代码<div class="upload-file"> <el...

• 2021-05-30

69浏览

0评论

vue自定义插件封装，实现简易的elementUi的Message和MessageBox的示例

　　这次封装基于vuecli3 + typescript实现，javascript也是同理，没有区别；　　自定义插件有助于我们可以将一些页面交互封装并在js或ts文件中引入实现，而不是只在 .vue文件。1、...

• 2021-05-30

46浏览

0评论

Vue 的 v-model用法实例

Vue 框架早已经不是 MVVM（Mode-View-View-Model） 双向绑定了。早在 Vue 1.0 时代，Vue 在刚出世的时候的确是 MVVM 双向绑定。自 Vue 2.0 以来，Vue 就不再是双向绑定了，而是像 Rea...

• 2021-05-30

35浏览

0评论

vue + el-form 实现的多层循环表单验证

html<el-form :model="formObj" :rules="rules" ref="ruleForm"> <el-form-item :label="'护理记录项目配置：'" label-width="180px"> <template v-for="(formItem, index)...

• 2021-05-30

46浏览

0评论

vue element-ul实现展开和收起功能的实例代码

实现效果如下： 需求：由于后台搜索选项有很多，影响页面美观，所以一进来要隐藏一部分搜索项，只保留1行，点击【展开搜索】按钮的时候才显示全部，点击【收起搜索】按钮又收起部分，保留1...

• 2021-05-30

37浏览

0评论

Vue项目如何引入bootstrap、elementUI、echarts

引入bootstrap
安装依赖包cnpm install bootstrap --save-dev
cnpm install jquery --save-dev
cnpm install popper.js --save-dev
全局引入
在项目中根目录下的main.js中...

• 2021-05-30

40浏览

0评论

vuex的数据渲染与修改浅析

1.vuex是什么？用官方的话来说“Vuex 就是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方...

• 2021-05-30

60浏览

0评论

ESLint 是如何检查 .vue 文件的

近期要做一个类似的内容，学习了一下 Vue 是如何做的。ESLint 中的扩展机制首先需要了解一下如何才能扩展 ESLint 的功能。ESLint 扩展机制主要有 Rules、Plugins、Formatters...

• 2021-05-30

32浏览

0评论

Vue Elenent实现表格相同数据列合并

本文实例为大家分享了Vue Elenent实现表格相同数据列合并的具体代码，供大家参考，具体内容如下作者：秋名思路：后台查询表格数据，查询出来后直接传到前端，前端通过foreach循环，然后对...

• 2021-05-30

41浏览

0评论

vue开发chrome插件，实现获取界面数据和保存到数据库功能

前言最近在评估项目时，要开启评估平台，查看平台和保存平台，感觉非常繁琐，开发了一款可以获取评估平台数据，查看项目排期和直接保存数据到数据库的chrome插件，由于我需要使用之前vu...

• 2021-05-30

62浏览

0评论

keep-alive保持组件状态的方法

keep-alive的设计初衷有些业务场景需要根据不同的判断条件，动态地在多个组件之间切换。频繁的组件切换会导致组件反复渲染，如果组件包含有大量的逻辑和dom节点，极易造成性能问...

• 2021-05-30

47浏览

0评论

详解vue 组件注册

一、了解组件注册的两种方式1.1 全局组件的注册方法//main.js import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip =...

• 2021-05-30

82浏览

0评论

VUE+Element实现增删改查的示例源码

前言&最近因为一些原因，没有更博客，昨天老师布置了一个作业，用vue实现增删改查功能，想想这也不难，就做一下试试吧。
因为自己写的样式没有别人做的好，因此我想用现成的UI框架，一直...

• 2021-05-30

53浏览

0评论

浅析VUE防抖与节流

防抖和节流到底是啥函数防抖（debounce）解释：当持续触发某事件时，一定时间间隔内没有再触发事件时，事件处理函数才会执行一次，如果设定的时间间隔到来之前，又一次触发了事件，就重新开...

• 2021-05-30

30浏览

0评论

Vue3配置axios跨域实现过程解析

实现跨域共3个步骤：1，vue3.0根目录下创建vue.config.js文件；module.exports = { devServer: { proxy: { '/api': { target: 'https://you.163.com/', //接口域...

• 2021-05-30

38浏览

0评论

vue动态合并单元格并添加小计合计功能示例

1、效果图2、后台返回数据格式（平铺式）3、后台返回数据后，整理所需要展示的属性存储到（items）数组内var obj = { "id": curItems[i].id, "feeName": curItems[i].feeName,...

• 2021-05-30

74浏览

0评论

Vue如何实现验证码输入交互

最近做一个H5的页面，里面有个输入验证码交互，就是移动端比较常见的那种验证码输入交互。就是那种，对，就是那种，一个数字一个下划线，移动端非常常见的那种验证码交互。实现过程中主...

• 2021-05-30

60浏览

0评论

详解Vue中的自定义指令

　　除了默认设置的核心指令( v-model 和 v-show )，Vue 也允许注册自定义指令。在Vue里，代码复用的主要形式和抽象是组件。然而，有的情况下，仍然需要对纯 DOM 元素进行底层操作，...

• 2021-05-30

58浏览

0评论

vue添加自定义右键菜单的完整实例

一、写原生方法
1.在所编辑的页面，需要添加右键菜单的元素，绑定contextmenu事件，如下： <li v-for="item in resourceList" :key="item.id" @click="handleClickFolde...

• 2021-05-30

52浏览

0评论

Vue+element-ui添加自定义右键菜单的方法示例

1、在所编辑的页面，需要添加右键菜单的元素，绑定contextmenu事件<template><el-button size="medium" @contextmenu.prevent.native="openMenu($event)">......</template>2...

• 2021-05-30

48浏览

0评论

vuex Module将 store 分割成模块的操作

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（mo...

• 2021-05-30

31浏览

0评论

vue $router和$route的区别详解

一、router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象。。。经常用的跳转链接就可以用this.$router.push，和router-link跳转一样...

• 2021-05-30

42浏览

0评论

Vue实现图书管理小案例

本文实例为大家分享了Vue实现图书管理的具体代码，供大家参考，具体内容如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content=...

• 2021-05-30

41浏览

0评论

用vue设计一个日历表

日历的功能，我们会经常用到，且逻辑比较复杂，小算法较多，花了半天时间写了个，特此详记。先贴图功能阐述：返回本月不多说，设置工作日和节假日是为了公司制度需要，后台会有假日表来记录...

• 2021-05-30