分类：vue

2021
09-24

Vue局部组件数据共享Vue.observable()的使用

Vue局部组件数据共享Vue.observable()的使用 随着组件的细化，就会遇到多组件状态共享的情况，Vuex当然可以解决这类问题，不过就像Vuex官方文档所说的，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，今天我们介绍的是vue.js2.6新增加的ObservableAPI，通过使用这个api我们可以应对一些简单的跨组件数据状态共享的情况。创建store对象首先创建一个store.js，包含一个store和一个mutations，分别用来指向数据和处理方法。//store.jsimportVuefrom'vue'... 继续阅读 >
2021
09-24

如何在Vue 3中扩展Vue Router链接详解

前言<router-link>标签是一个很好的工具，可以在你的Vue应用程序的不同页面之间进行导航，但当导航到一个外部链接时，它不是一个工具，为此，你应该使用一个普通的<a>标签。也许这只是我的问题，但很多时候，我都懒得去理会这其中的差别。其他时候，链接可能是动态的，也就是说，来自数据库或一些用户提供的数据源。在这种情况下，你根本不知道这个链接是外部的还是内部的，而且在每个可能使用这个链接的地方手动做V-if是多么痛... 继续阅读 >
2021
09-24

vue+rem自定义轮播图效果

vue+rem自定义轮播图效果 使用vue+rem自定义轮播图的实现，供大家参考，具体内容如下单位使用rem进行页面布局，在动态计算轮播图整体宽度时，需要把px转换成rem，挺麻烦的。效果如下：如果当前图片不是第一张和最后一张，刚好可以看到当前图片上一张和下一张的一部分。具体代码如下<template><divclass="constructionUp"><divclass="pub-hd"><h2>施工升级包</h2><h3>额外服务项目</h3></div><divid... 继续阅读 >
2021
09-24

Vue 大文件上传和断点续传的实现

目录文件上传的2套方案基于文件流（form-data）客户端把文件转换为base64大文件上传获取到文件对象并转成ArrayBuffer对象创建切片发送请求所有切片发送成功后断点续传代码汇总OneMoreThingFormDataFormData.append()文件上传的2套方案基于文件流（form-data）element-ui框架的上传组件，就是默认基于文件流的。数据格式：form-data；传递的数据：file文件流信息；filename文件名字客户端把文件转换为base64... 继续阅读 >
2021
09-24

vue3.0+vite2实现动态异步组件懒加载

目录创建一个vite项目创建组件创建一个vite项目性能决定成败;vite确实快；cmd命令行(默认你已经安装了node&npm)，执行npminit@vitejs/appvue-study?--templatevue；cd至vue-study，npminstall(安装依赖);npmrundev（启动项目）；创建组件新建一个目录为pages，pages下面再新建一个目录contents，contens下面可以新建具体的组件目录页面，此时目录结构为App.vue<template><p@click="onChangeContents('./pages/conte... 继续阅读 >
2021
09-24

Vue+ssh框架实现在线聊天

Vue+ssh框架实现在线聊天 本文实例为大家分享了Vue+ssh框架实现在线聊天的具体代码，供大家参考，具体内容如下效果图核心部分websocket编程向后台发送消息<template><el-container><el-header></el-header><el-main><divclass="cht"><divv-for="(d,index)inmycontent":key="index"><my:message="d.mess":time="d.time":bl="d.bl"></my></div></div><divclass="smess"><el-row><el-col:span="18"><el-input... 继续阅读 >
2021
09-24

Vue+express+Socket实现聊天功能

Vue+express+Socket实现聊天功能 本文实例为大家分享了Vue+express+Socket实现聊天功能的具体代码，供大家参考，具体内容如下实现聊天功能具体功能只是为了实现功能，不对界面进行美化1、输入消息点击发送所有用户可以在下方收到消息2、输入userid后点击连接，可以连接对应的聊天，另外一个界面输入刚刚那个页面的userid后再输入内容点击发送给指定的人，则刚才那个页面可以打印输出，而其他页面不会收到，实现私聊的功能3、没有具体实现私聊的内容显示，但是接收... 继续阅读 >
2021
09-24

Vue实现tab导航栏并支持左右滑动功能

Vue实现tab导航栏并支持左右滑动功能 本文主要介绍：利用Vue实现tab导航栏，并且通过flex布局实现左右滑动，计算按钮的位置，当点击第一屏展示的最后一个且还有元素未展示时，自动滑动显示出未显示的元素。tab导航栏布局：<sectionclass="theme-list"><divclass="fixed-nav"ref="fixednav"><divclass="fixed-nav-content"><pv-for="(item,index)intheme":key="index":class="['tab-title',activeId===index&&'select-... 继续阅读 >
2021
09-24

vue实现web在线聊天功能

vue实现web在线聊天功能 本文实例为大家分享了vue实现web在线聊天的具体代码，供大家参考，具体内容如下最终实现的效果实现过程无限滚动窗体的实现之前已经介绍过，这里就不在赘述了，不清楚的可以通过文档前文的传送门进行查看。实时在线聊天主要功能点滚动到两天窗体顶部，自动加载历史跟多信息，数据加载的时候，需要有一个loading动画；发送信息是滚动条自动滑动到窗体底部，并且自己发送的信息出现在聊天窗体中；收到别人发送信息时，需... 继续阅读 >
2021
09-22

vue计时器的实现方法

vue计时器的实现方法 本文实例为大家分享了vue实现计时器的具体代码，供大家参考，具体内容如下这里做的是点击按钮开始与结束倒计时的功能<divclass="time"v-if="rptType">{{str}}</div><divclass="receipt":class="rptType?'jdz':'jiedan'"@click="receipt">开始</div>data(){return{rptType:false,//状态h:0,//定义时，分，秒，毫秒并初始化为0；m:0,ms:0,s:0,time:0,str:'',}},mounted... 继续阅读 >
2021
09-20

Vue计时器的用法详解

Vue计时器的用法详解 本文实例为大家分享了Vue实现计时器的具体代码，供大家参考，具体内容如下功能简介：1、初始值为0，点击【加】按钮，数字自+1；连续点击【加】，不影响数字+12、点击【停】按钮，停止+1源码：<!DOCTYPEhtml><htmladd="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title><!--1.... 继续阅读 >
2021
09-19

vue实现图片切换效果

vue实现图片切换效果 本文实例为大家分享了vue实现图片切换效果的具体代码，供大家参考，具体内容如下1）v-if/v-show二者都可以实现让元素隐藏和显示。但是实现原理不同：v-if是通过将元素从dom树中移除和添加来实现元素的隐藏和显示效果。v-show是通过修改元素的displace值来实现元素的隐藏和显示效果。2）v-bindv-bind可以对元素的属性值进行修改。基于这些背景知识，下面来实现图片切换实例。功能需求1）点击左边按钮，显示前一张图片；如果图片是... 继续阅读 >
2021
09-19

vue+js点击箭头实现图片切换

vue+js点击箭头实现图片切换 本文实例为大家分享了vue+js点击箭头实现图片切换的具体代码，供大家参考，具体内容如下前端需求是返回的图片数据能够点击箭头切换代码如下<divclass="pubuItemsBox"><!--修改部分5.23晚--><templatev-for="(orderEvent,index)inorderEventList"><div:class="{'pubuItem':true,'noMag':(index+1)%3==0}"><divclass="imgDivs"><templatev-if="orderEvent.even... 继续阅读 >