68浏览

0评论

vue 数据操作相关总结

vue中有很多有关数据的操作方法，比如父子组件数据的传递，子组件修改父组件数据，props,computed,watch,sync等，今天就来总结一下这些操作方法的使用computed是计算属性
computed...

• 2021-05-30

80浏览

0评论

Vue与React的区别和优势对比

简单介绍
React--Facebook创建的JavaScript UI框架。它支撑着包括Instagram在内的大多数Facebook网站。React与当时流行的jQuery,Backbone.js和Angular 1等框架不同，它的诞生...

• 2021-05-30

68浏览

0评论

vue3.0实现插件封装

  最近公司有一个新的项目，项目框架是我来负责搭建的，所以果断选择了Vue3.x+ts。vue3.x不同于vue2.x，他们两的插件封装方式完全不一样。由于项目中需要用到自定义...

• 2021-05-30

72浏览

0评论

element-ui点击查看大图的方法示例

element-ui图片（查看大图），可通过 previewSrcList 开启预览大图的功能。写在element-ui表格中，使用作用域插槽循环图片<!-- template插槽 --><template slot-scope="scope"> <di...

• 2021-05-30

64浏览

0评论

8个非常实用的Vue自定义指令

本文在github做了收录 github.com/Michael-lzg…demo源码地址 github.com/Michael-lzg…在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册自定义指令...

• 2021-05-30

103浏览

0评论

vue实现图片裁剪后上传

本文实例为大家分享了vue实现图片裁剪后上传的具体代码，供大家参考，具体内容如下一、背景目前负责的系统（商城后台管理系统）里面有这么一个需求，为了配合前台的展示，上传的商品图...

• 2021-05-30

71浏览

0评论

vue+elementUI动态增加表单项并添加验证的代码详解

参考elementUI官网以及网上的其他一些资料。话不多说，直接贴代码。
htmt部分：<div id="app" style="width: 500px;"> <el-form :model="environmentForm" ref="environ...

• 2021-05-30

113浏览

0评论

Vue中computed和watch有哪些区别

计算属性computed：
支持缓存，只有依赖数据发生改变，才会重新进行计算 不支持异步，当computed内有异步操作时无效，无法监听数据的变化 computed 属性值会默认走缓存，计算属性是...

• 2021-05-30

80浏览

0评论

vue监听滚动事件的方法

vue中监听滚动事件，然后对其进行事件处理，一般有：1. 滚动到顶部吸附； 2. 根据滚动的位置激活对应的tab键（锚链接tab键）这两种方式的处理都是可通过监听scroll来实现mounted(){　　...

• 2021-05-30

76浏览

0评论

Vue实现点击当前行变色

本文实例为大家分享了Vue实现点击当前行变色的具体代码，供大家参考，具体内容如下话不多说,先上效果默认第一行为红色,当点击第二行的时候,只有第二行变为红色代码如下:<!DOCTY...

• 2021-05-30

75浏览

0评论

VUE中鼠标滚轮使div左右滚动的方法详解

前言
技术点： addEventListener/attachEvent(传递参数)功能描述： 鼠标停在div中，若div有x轴滚动条，则鼠标滚轮控制x轴滚动条横向滚动一、单个实现
1.定义变量data () { return {...

• 2021-05-30

113浏览

0评论

Vue解决移动端弹窗滚动穿透问题

一、问题描述
在移动端的H5页面中，我们经常会遇到 “点击按钮-->弹窗-->选择选项” 这样的场景。而在选项过多出现滚动条时，滚动滚动条至容器的底部或者顶部。再往上或往下...

• 2021-05-30

119浏览

0评论

vue图片裁剪插件vue-cropper使用方法详解

本文实例为大家分享了vue图片裁剪插件vue-cropper的使用方法，供大家参考，具体内容如下我在网上找了很多关于vue裁剪图片的文章，demo都太长了，实在是太长了。有些还都看不懂，最后...

• 2021-05-30

82浏览

0评论

Vue实现指令式动态追加小球动画组件的步骤

1. 小球组件
我们希望可以封装一个通用的小球动画组件,这个组件可以在任何地方调动,而且小球组件可以通过this.$ball({...props})这样的方式调用,让他在用法上接近element-u...

• 2021-05-30

84浏览

0评论

vue 通过base64实现图片下载功能

1. 使用场景
当我们处理图片下载功能的时候，如果本地的图片，那么是可以通过canvas获得图片的base64的，方法如下。但是如果图片的url存在跨域问题的话，下面的方法将行不通，这时候...

• 2021-05-30

88浏览

0评论

vue el-upload上传文件的示例代码

话不多说 直接上代码<el-upload :action="actionUrl" class="avatar-uploader" :multiple="false" name="files" ref="upload" :file-...

• 2021-05-30

61浏览

0评论

vue实现滚动鼠标滚轮切换页面

本文实例为大家分享了vue实现滚动鼠标滚轮切换页面的具体代码，供大家参考，具体内容如下新项目产品被甲方的要求逼疯了，大概返稿了100+次吧，最后甲方网上找了个他们认为的比较有...

• 2021-05-30

87浏览

0评论

Vue如何跨组件传递Slot的实现

在开发过程中遇到这样一个问题，如何跨组件传递插槽。因为在开发类似树组件的过程中，插槽需要通过外部传递到树的根节点，然后通过根节点依次传递到各个叶子节点。那么如何把根节...

• 2021-05-30

49浏览

0评论

Vue 组件注册全解析

全局组件注册语法components中的两个参数组件名称和组件内容Vue.component(组件名称, { data: 组件数据, template:组件模板内容 })全局组件注册应用组件创建：Vue.compo...

• 2021-05-30

58浏览

0评论

vue 使用rules对表单字段进行校验的步骤

在实际开发过程中，发现以下的写法比较累赘，因为在后面的项目中，继续优化表单验证的方法，让代码更简洁。主要的修改是验证方法的修改和调用以前验证表单字段的最大长度，descriptio...

• 2021-05-30

102浏览

0评论

解决elementui表格操作列自适应列宽

业务需要前端根据用户权限动态显示对应按钮，直接把操作列的列宽写死的话，在按钮少的情况下不是那么好看，所以想到了一个骚操作...写死宽度时是这样的：开始给操作列绑定宽度属性:...

• 2021-05-30

120浏览

0评论

Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法

我测试过很多遍,想要通过a标签的形式来直接点击url下载文件并重命名但是都失败了,最终只能下载却不能重命名 所以 换了java后台来修改名字.以下代码我做的网页是点击文件直...

• 2021-05-30

65浏览

0评论

vue 使用 sortable 实现 el-table 拖拽排序功能

本文给大家介绍vue 使用 sortable 实现 el-table 拖拽排序功能，具体内容如下所示：npm 下载：npm install sortablejs --save引入：import Sortable from "sortablejs";代码：<templa...

• 2021-05-30

64浏览

0评论

Vue仿百度搜索功能

简述学习vue的第二节，由于2.0版本并不向下兼容，视频中的不少内不能实现。下面列出一些主要知识点// v-on 可简写为@// 事件冒泡是指当点击div内部的button触发show1()时，必然会...

• 2021-05-30

60浏览

0评论

Vue.extend 登录注册模态框的实现

模态框是我们 UI 控件中一个很重要的组件，使用场景有很多种，我们在 Vue 组件中创建模态框组件而用到的一个知识点是利用 Vue.extend 来创建。文档中的解释是在最近在做一个常...

• 2021-05-30

79浏览

0评论

详解Vue的异步更新实现原理

最近面试总是会被问到这么一个问题：在使用vue的时候，将for循环中声明的变量i从1增加到100，然后将i展示到页面上，页面上的i是从1跳到100，还是会怎样？答案当然是只会显示100，并不会有...

• 2021-05-30

85浏览

0评论

全面解析Vue中的$nextTick

当在代码中更新了数据，并希望等到对应的Dom更新之后，再执行一些逻辑。这时，我们就会用到$nextTickfuncion callback(){ //等待Dom更新，然后搞点事。}$nextTick(callback)；官方文...

• 2021-05-30

89浏览

0评论

vue项目中openlayers绘制行政区划

vue项目中openlayers画行政区划（区域范围），供大家参考，具体内容如下原理在地图上画需要的范围，实际上就是在地图上打上一圈点，然后依次将这些点用线连接，就形成了范围引用相应的ol...

• 2021-05-30

115浏览

0评论

基于Vant UI框架实现时间段选择器

本文实例为大家分享了Vant UI框架实现时间段选择器的具体代码，供大家参考，具体内容如下组件代码如下：<template> <van-picker :title="title" :show-toolbar="showToolbar"...

• 2021-05-30

86浏览

0评论

vue3使用vue-count-to组件的实现

项目场景：数据可视化大屏开发的过程中，需要实现一种滚动数字的效果，在使用vue2时，使用vue-count-to完全没有问题，功能也比较完善(滚动时长，开始值，结束值，前缀，后缀，千分隔符，小数分隔...

• 2021-05-30

76浏览

0评论

Vue实现省市区三级联动

本文实例为大家分享了Vue实现省市区三级联动的具体代码，供大家参考，具体内容如下效果图：代码：<!DOCTYPE html><html> <head> <meta charset="GBK"> <title></title> <style>...

• 2021-05-30

100浏览

0评论

elementui实现预览图片组件二次封装

起因
在elementui组件库中，el-image组件有个预览图片功能，比较简洁，但是和图片绑定在一起，我们只想要一个单纯的预览组件，传递一个图片，通过事件方式，显示大图分析
通过查看element...

• 2021-05-30

91浏览

0评论

Vue实现随机验证码功能

本文实例为大家分享了Vue实现随机验证码功能的具体代码，供大家参考，具体内容如下步骤1：创建一个名为identify.vue的子组件<template> <div class="s-canvas"> <canvas id="s-ca...

• 2021-05-30

122浏览

0评论

Vue组件简易模拟实现购物车

本文实例为大家分享了Vue组件模拟实现购物车的具体代码，供大家参考，具体内容如下代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport"...

• 2021-05-30

102浏览

0评论

解决基于 keep-alive 的后台多级路由缓存问题

用过 vue-element-admin 的同学一定很清楚，路由的配置直接关系侧边栏导航菜单的展示，也得益于这种设计思路，几乎大部分后台框架都采用这个方案，当然也包括了我写的 Fantastic-ad...

• 2021-05-30

101浏览

0评论

Vue使用鼠标在Canvas上绘制矩形

本文实例为大家分享了Vue使用鼠标在Canvas上绘制矩形的具体代码，供大家参考，具体内容如下1.代码<template> <div class="test" style="background-color: burlywood;"> <canva...

• 2021-05-30

139浏览

0评论

vue+openlayers绘制省市边界线

本文实例为大家分享了vue+openlayers绘制省市边界线的具体代码，供大家参考，具体内容如下1、创建项目vue init webpack ol_vue2、安装ol依赖包npm install ol3、引入axiosnpm i...

• 2021-05-30

125浏览

0评论

vant时间控件使用方法详解

本文实例为大家分享了vant时间控件的使用方法，供大家参考，具体内容如下代码：<template> <div class="shoukuan"> <!-- 头部公共搜索框 --> <tabbar title="添加团队活动"></t...

• 2021-05-30

110浏览

0评论

vue使用require.context实现动态注册路由

需求场景：
在日常的功能练习和调试过程中，需要一个demo项目进行功能测试，由于频繁.vue页面的同时，又要再router.js文件里面注册路由，感觉有点无聊和枯燥。基于此出发点，考虑能否自...

• 2021-05-30

83浏览

0评论

vue中watch的用法汇总

在vue中，使用watch来响应数据的变化。watch的用法大致有三种。1. 常用用法<input type="text" v-model="name"/>new Vue({ el: '#app', data: { name: '咸鱼' }, watch: {...

• 2021-05-30

339浏览

0评论

vue实现图书管理系统

本文实例为大家分享了vue实现图书管理系统的具体代码，供大家参考，具体内容如下组件代码<template> <div id="app"> <div class="grid"> <div> <h1>图书管理</h1> <di...

• 2021-05-30

101浏览

0评论

Vue3 实现双盒子定位Overlay的示例

在 Vue 3 中，使用 <Teleport> 可以很优雅的把某个组件渲染到根节点之外的节点，同时使其渲染的内容不丧失响应式和对应的生命周期函数调用。那么基于此，用 <Teleport> 实现相对...

• 2021-05-30

221浏览

0评论

vue实现登录、注册、退出、跳转等功能

本文给大家介绍vue实现登录、注册、退出、跳转功能，具体代码如下所示:效果图1：效果图2：效果图3：效果图4：完整实例：<!DOCTYPE html><html> <head> <meta charset="GBK"> <ti...

• 2021-05-30

80浏览

0评论

Vue+penlayers实现多边形绘制及展示

本文实例为大家分享了Vue+penlayers实现多边形绘制展示代码，供大家参考，具体内容如下<!-- * @Description: 绘制多边形 * @Author: Dragon * @Date: 2020-12-17 16:02:06 * @L...

• 2021-05-30

87浏览

0评论

vue 实现基础组件的自动化全局注册

参考官网：https://cn.vuejs.org/v2/guide/components-registration.html在日常开发中，有一些组件是比较常用，但是为了避免在开发过程中不停地引入，或者在main.js中注册，，或者每添...

• 2021-05-30

85浏览

0评论

Vue 简单实现前端权限控制的示例

简要说明
最近写了一下vue控制权限(菜单、路由)的项目，用了vuex、addRoutes动态添加路由方法等，总共100多行代码，跟大家分享一下~逻辑梳理
除登录接口、退出接口外，其余接口增...

• 2021-05-30

89浏览

0评论

vue3.0自定义指令（drectives)知识点总结

在大多数情况下，你都可以操作数据来修改视图，或者反之。但是还是避免不了偶尔要操作原生 DOM，这时候，你就能用到自定义指令。举个例子，你想让页面的文本框自动聚焦，在没有学习自定...

• 2021-05-30

95浏览

0评论

vue下拉刷新组件的开发及slot的使用详解

“下拉刷新”和“上滑加载更多”功能在前端、尤其是移动端项目中非常重要，这里笔者由曾经做过的vue项目中的“blink”功能和各位探讨下【下拉刷新】组件的开发：正式开篇在前端...

• 2021-05-30

94浏览

0评论

vue绑定class的三种方法

一、对象语法1、给v-bind:class 设置一个对象，可以动态地切换class，例如：<div id="app"> <div :class="{'active':isActive}"></div></div><script>var app = new Vue({ el:'...

• 2021-05-30

91浏览

0评论

vue 使用class创建和清除水印的示例代码

页面添加水印的方法有很多，以下举例使用class定义的方法进行水印内容渲染：1、新建文件：WatermarkClass.jsexport default class WatermarkClass { constructor({id="watermark...

• 2021-05-30