分类：Vue

2021
01-08

vue+elementui通用弹窗的实现(新增+编辑)

本文主要介绍了vue+elementui通用弹窗的实现(新增+编辑)，分享给大家，具体如下：组件模板<el-dialog:title="title":visible.sync="dialogShow":close-on-click-modal="false"><divclass="ym-common-dialog":class="customClass"><divv-for="(col,index)incols"><span><emv-if="!!col.isRequire">*</em>{{col.name}}</span><templatev-if="col.type==='text'"><div>{{submitData[col.key]}}... 继续阅读 >
2021
01-08

详解Vue2的diff算法

前言双端比较算法是vue2.x采用的diff算法，本篇文章只是对双端比较算法粗略的过程进行了一下分析，具体细节还是得Vue源码，Vue的源码在这过程假设当前有两个数组arr1和arr2letarr1=[1,2,3,4,5]letarr2=[4,3,5,1,2]那么其过程有五步 arr1[0]和arr2[0]比较 arr1[arr1.length-1]和arr2[arr2.length-1]比较 arr1[0]和arr2[arr2.length-1]比较 arr1[arr1.length-1]和arr2[0]比较... 继续阅读 >
2021
01-08

基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能

用Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能图片上传图片压缩拖拽排序、拖拽删除之前在公司开发过一段时间的移动端H5页面，有个功能就是要上传图片+压缩。参考了一下网上的方法，外加自己摸索的过程，最终实现了这个功能。后面在家闲的时候又加多了个长按选中图片，并且可以拖拽排序、拖拽到指定位置删除的功能。github地址：代码地址下面直接进入正题：图片上传图片上传用的是HTML的input标签实现的。核心就是把获... 继续阅读 >
2021
01-08

Vue+scss白天和夜间模式切换功能的实现方法

Vue+scss白天和夜间模式切换功能的实现方法 本文主要介绍了Vue+scss白天和夜间模式切换功能的实现方法，分享给大家，具体如下：效果图 图片被压缩了不够清晰。安装Scss注：若安装失败可以考虑使用cnpm，或者切换npm源等方式安装。npminstallnode-sass--save-dev//安装node-sassnpminstallsass-loader--save-dev//安装sass-loadernpminstallstyle-loader--save-dev//安装style-loader新建页面DarkModelPage.vue文件所在位置：src/DarkModelPage.vue命名路由... 继续阅读 >
2021
01-08

vue3自定义dialog、modal组件的方法

vue3自定义dialog、modal组件的方法 vue3-layer：基于Vue3.0开发的PC桌面端自定义对话框组件。基于vue3构建的PC网页端自定义弹出框组件。全面覆盖各种弹窗应用场景，拥有10+种弹窗类型、30+种自定义参数配置、7+种弹窗动画效果，支持拖拽、缩放、最大化、全屏及自定义激活当前置顶层等功能。前几天分享过一个Vue3.0移动端弹层组件V3Popup，如果感兴趣也可以去看看。https://www.jb51.net/article/203415.htmv3layer在开发设计之初灵感来自有赞Vant3.0、饿了么Element-... 继续阅读 >
2021
01-08

vue中父子组件的参数传递和应用示例

1.在父组件中调用子组件，父亲传值给子组件子组件如下，把要传给给父亲的值放在props中template><!--底部导航--><divclass="index-bbar"><ulclass="flex"><liv-for="(item,index)inliAry":class="index==licurrent?'active':''"><router-link:to="item.linkURl"><spanclass="flexaligncflexdc"><img:src="index==licurrent?require('../../'+item.urlActive):requir... 继续阅读 >
2021
01-08

如何在VUE中使用vue-awesome-swiper

一：首先进入项目目录中安装installvue-awesome-swiper@2.6.7--save二.使用全局挂载：importVuefrom'vue'importVueAwesomeSwiperfrom'vue-awesome-swiper'//requirestylesimport'swiper/dist/css/swiper.css'Vue.use(VueAwesomeSwiper,/*{defaultglobaloptions}*/)组件挂载//requirestylesimport'swiper/dist/css/swiper.css'import{swiper,swiperSlide}from'vue-awesome-swiper'exportdefault{comp... 继续阅读 >
2021
01-08

vue项目如何监听localStorage或sessionStorage的变化

出现这个问题的起因：在一个VUE页面中，引入两个组件，A组件实现基础信息展示，B组件展示列表，我要通过A组件的一个按钮触发状态，然后B组件根据A组件触发的状态来做业务处理，首先想到的是把状态放在localStorage，接下去就是在B组件怎么监听A组件状态解决方法：1.首先在main.js中给Vue.protorype注册一个全局方法，然后创建一个StorageEvent方法，当我在执行sessionStorage.setItem(k,val)的时候，初始化事件并派发事件... 继续阅读 >
2021
01-03

vue+vant 上传图片需要注意的地方

<van-uploaderv-model="fileList"multiple:after-read="afterRead":max-count="1"/>1:上传文件流，提交的模式肯定得form-data模式2：上传的文件file做出处理我这里做的只能选择一张afterRead(file){console.log(file);//控制台可以看见图片信息if(this.fileList.length>1){this.fileList.splice(1);this.$msg({text:'只能选择这么多!',type:'info'})... 继续阅读 >
2021
01-03

vue调用微信JSDK 扫一扫，相册等需要注意的事项

在VUE里面需要注意的第一个问题就是路由得设置成第二个就是跳转路由的时候不要用this.$router.push或者this.$router.replace 前者在ios和安卓端都调不起来的后者只能在安卓端有效在ios端无效this.$router.push的效果图测试工具上是可以调起，然后在安卓手机上和ios上这个是调不起的这个在测试上椰是可以的，然后在安卓端上可以，在ios上会出现无效的token40029config:function(res){//配置JSSDK和调取扫一扫功能... 继续阅读 >
2021
01-03

vue中使用echarts的示例

1:首先要用到echarts2：在vue中安装这个依赖3：引入要用的页面importechartsfrom'echarts';4：然后初始化<template><a-colspan="12"style="min-height:343px;width:100%;background:#fff"ref="getwidth":style="'display:'+model"><divclass="layui-col-md6tjgx-panel"><divclass="layui-card"><divclass="layui-card-headerpanel-title"><spanclass="left-text">统计更新及时率</span>... 继续阅读 >
2021
01-03

vue 动态生成拓扑图的示例

横向拓扑在index.html文件中引入文件。<linkhref="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css"rel="externalnofollow"rel="stylesheet"><linkhref="https://magicbox.bk.tencent.com/static_api/v3/assets/bkTopology-1.1/css/bkTopology.css"rel="externalnofollow"rel="stylesheet"><scriptsrc="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jque... 继续阅读 >
2021
01-03

Vue中强制组件重新渲染的正确方法

有时候，依赖 vue 响应方式来更新数据是不够的，相反，我们需要手动重新渲染组件来更新数据。或者，我们可能只想抛开当前的DOM，重新开始。那么，如何让vue以正确的方式重新呈现组件呢？强制Vue重新渲染组件的最佳方法是在组件上设置:key。当我们需要重新渲染组件时，只需更 key 的值，Vue就会重新渲染组件。这是一个非常简单的解决方案。当然，你可能会对其他方式会更感兴趣：简单粗暴的方式：重新加载... 继续阅读 >
2021
01-03

vue中activated的用法

keep-alive<keep-alive>包裹动态组件的时候，会缓存不活动的组件实例，而不是摧毁他们。其是一个抽象的组件，自身不会渲染一个DOM元素，也不会出现在父组件链中。说白了被<keep-alive>包裹的组件其会被缓存废话不多说直接上例子.我们现在创建两个子组件conpoment1,compoment2,其内容如下<template><divclass="wrapper"><ulclass="content"></ul><buttonclass="add"id="add"@click="add">添加子元素</button></div></tem... 继续阅读 >
2021
01-03

vue 实现图片懒加载功能

一个页面图片比较多的时候，需要对界面的图片进行懒加载处理，今天遇到了，做个懒加载的笔记。1，需要安装vue的懒加载插件。npminstallvue-lazyload--save-dev2，需要在main.js里面进行引用。importVueLazyloadfrom"vue-lazyload";Vue.use(VueLazyload);或者自定义Vue.use(VueLazyload,{preLoad:1.3,error:'dist/error.png',loading:'dist/loading.gif',attempt:1})3,修改图片的路径，设置为懒加载的形式，将src改成v-l... 继续阅读 >