分类：VUE

2020
11-13

详解vue 组件的实现原理

组件机制的设计，可以让开发者把一个复杂的应用分割成一个个功能独立组件，降低开发的难度的同时，也提供了极好的复用性和可维护性。本文我们一起从源码的角度，了解一下组件的底层实现原理。组件注册时做了什么？在Vue中使用组件，要做的第一步就是注册。Vue提供了全局注册和局部注册两种方式。全局注册方式如下：Vue.component('my-component-name',{/*...*/})局部注册方式如下：varComponentA={/*...*/}newVue({e... 继续阅读 >

2020
11-13

vue 图片裁剪上传组件的实现

先看一下总体效果:上传文件做了大小和类型的限制，在动图中无法展现出来。使用file类型的input实现选择本地文件但是浏览器原生的文件上传按钮的颜值不尽人意，而且按钮上的文字是无法改变的，我需要把这个上传文件的按钮改造一下。方法1：使用label元素来触发一个隐藏的file类型的input元素；（缺点：在多人开发时，可能出现重复的元素id，导致难以预料的bug）<inputtype="file"id='up_file_input'v-show='false'><labelfo... 继续阅读 >

2020
11-11

让Vue响应Map或Set的变化操作

问题背景我想在vuex的state中使用map，这样可以使很多操作变得方便conststate={all:newMap()}这样的写法是没有问题的，不会报错，state.all可以像正常的Map一样使用。但是这里有一个问题，vue的响应式系统不支持Map和Set，也就是说，当Map与Set里面的元素变化时Vue追踪不到这些变化，因此无法做出响应。这样一来，页面上依赖all的元素也不会随all的变化而变化解决方法用户”inca”的回答youneedtocreateaserializabler... 继续阅读 >

2020
11-11

vue项目中使用rem,在入口文件添加内容操作

在使用vue-cli搭建好项目框架后,在目录结构的index.html文件中添加一段js代码:<script>window.onload=function(){varsetRem=function(){//UI设计稿的宽度varuiWidth=1200;//移动端屏幕宽度varwinWidth=document.documentElement.clientWidth;//比率varrate=winWidth/uiWidth;//设置html元素的字体大小document.documentElement.style.fontSize=rate*20+"px"... 继续阅读 >

2020
11-11

VUE前端从后台请求过来的数据进行转换数据结构操作

我就废话不多说了，大家还是直接看代码吧`letlabel(){let_this=this;let_offset=(_this.pagination.currentPage-1)*_this.pagination.pageSizeletparams={offset:_offset,//分页偏移量limit:_limit,//分页查询数量}labelView(",params).then(res=>{_this.list=res.data.data_this.pagination.total=res.data.pagination.total;//转换数据lettreeDataArray=newArray();constelement=_this.listletobj={nam... 继续阅读 >

2020
11-11

Vue 防止短时间内连续点击后多次触发请求的操作

如果连续点击提交按钮，可能会重复提交数据，导致出错，解决的方法可以使用disabled限制点击，感觉体验不是太好，所有给大家分享下面的方法<el-button@click="throttle()">测试</el-button>exportdefault{data(){return{lastTime:0//默认上一次点击时间为0}}}methods:{throttle(){//获取当前时间的时间戳letnow=newDate().valueOf();//第一次点击if(this.lastTime==0){console.log('触发事件');... 继续阅读 >

2020
11-11

Vue 401配合Vuex防止多次弹框的案例

1.安装Vuexnpminstallvuex--save2.新建store目录结构3.编辑store.jsimportVuexfrom'vuex'importVuefrom'vue'importdefaultStatefrom'./state/state'importmutationsfrom'./mutations/mutations'importgettersfrom'./getters/getters'importactionsfrom'./actions/actions'Vue.use(Vuex)//开发环境constisDev=process.env.NODE_ENV==='development'exportdefaultnewVuex.Store({strict:isDev,... 继续阅读 >

2020
11-11

VUE-ElementUI 自定义Loading图操作

需求：elementuiloading图只能使用自己的loading图，但很多场景下，需要替换成自己的gif图虽然文档中有些，element-loading-spinner="el-icon-loading"可指定自定义图但经测试，也只是只能再elementui图标库中的图，不是我们想的那个自定义图类的意思。自定义图方法：1）添加自定义elementUIloading样式asserts下新建CSS文件夹及CSS文件比如myCss.css再里面，写入自定义的element类CSS样式.el-loading-spinner{/*这个... 继续阅读 >

2020
11-11

Vue 解决在element中使用$notify在提示信息中换行问题

在项目开发过程中，遇到如下用户体验提升需求：需要实现错误提示时根据后台返回错误列表信息，换行展示。实现方式如下：通过F12元素查看，在对应的样式中加入white-space:pre-wrap，该样式的主要作用是识别字符串中的换行符"\n"，故需要在待展示的信息字符串中加入相应的换行标识符。在$notify消息提示中，作用于el-notification：.el-notification{white-space:pre-wrap!important;}有的童鞋可能试过样式white-space:pre，此时... 继续阅读 >

2020
11-11

vue 实现element-ui中的加载中状态

需要添加加载状态，调用下面方法即可//开启loadingconstload=_this.$loading({lock:true,text:'Loading',spinner:'el-icon-loading',background:'rgba(0,0,0,0.7)'});//关闭loadingload.close();补充知识：在vue中使用element-ui里面的按钮点击后显示加载中，防止重复提交第一步：第二步：第三步：效果以上这篇vue实现element-ui中的加载中状态就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多... 继续阅读 >

2020
11-11

vue实现lodop打印功能的示例

1.官网下载http://www.lodop.net/download.html2.解压安装运行3.vue部分实现3.1将lodopDuncs.js文件放入工程中，具体操作可见：http://www.lodop.net/faq/pp35.html3.2编写代码<template><divclass="hello"><buttonclass="print-btn"v-on:click="btnClickPrint"><span>{{msg}}</span></button></div></template><script>import{getLodop}from"../assets/LodopFuncs";//导入模块exportdefault{name:"H... 继续阅读 >

2020
11-11

vue mvvm数据响应实现

为什么实现数据响应式当前vue、react等框架流行。无论是vue、还是react框架大家最初的设计思路都是类似的。都是以数据驱动视图，数据优先。希望能够通过框架减少开发人员直接操作节点，让开发人员能够把更多的精力放在业务上而不是过多的放在操作节点上。另一方面，框架会通过虚拟dom及diff算法提高页面性能。这其中需要数据优先最根本的思路就是实现数据响应式。so，本次来看下如何基于原生实现数据响应式。vue中的数据响应vue中... 继续阅读 >

2020
11-11

Vue3 响应式侦听与计算的实现

响应式侦听和计算有时我们需要依赖于其他状态的状态——在Vue中，这是用组件计算属性处理的，以直接创建计算值，我们可以使用computed方法：它接受getter函数并为getter返回的值返回一个不可变的响应式ref对象。我们先来看看一个简单的例子，关于计算值的方式，同样我们在src/TemplateM.vue写下如下代码：<template><divclass="template-m-wrap">count--->{{count}}plusOne--->{{plusOne}}</div></templa... 继续阅读 >

2020
11-11

在vs code 中如何创建一个自己的 Vue 模板代码

首先，在vscode中打开定义模板代码的地方第一步，点击“设置”图标按钮，在弹出的菜单中点击的“用户代码片段”（也就是模板）第二步，在弹出的框中选择新建代码片段（可选为全局/现在的项目创建模板）第三步，输入要新建的模板名称，然后，回车（这里我已经新建过了）然后会自动打开下面这个页面，在这里我们就可以开始新建一个vue模板了现在我们开始创建我们的模板了这是一个模板例子需要的可以直接拷贝到新建的模板文件中... 继续阅读 >

2020
11-10

vue解决跨域问题(推荐)

一.什么是跨域跨域问题的出现是因为浏览器的同源策略问题，所谓同源:就是两个页面具有相同的协议（protocol），主机（host）和端口号（port），它是浏览器最核心也是最基本的功能，如果没有同源策略我们的浏览器将会十分的不安全，随时都可能受到攻击。当我们请求一个接口的时候，出现如：Access-Control-Allow-Origin字眼的时候说明请求跨域了二.如何解决跨域问题1.使用jsonp实现，网页通过script标签向服务器请求json数... 继续阅读 >

2020
11-10

关于vue 项目中浏览器跨域的配置问题

1、什么是跨域当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。2、同源策略同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。3、在项目中配置打开项目找到config文件下的index.js,在jsproxyTable中配置跨域，代码如下proxyTable:... 继续阅读 >