
分类:Vue

2023
01-13
01-13
VUE + OPENLAYERS实现实时定位功能

2023
01-13
01-13
基于Vue+Openlayer实现动态加载geojson的方法

2023
01-03
01-03
浅谈Vue中的this.$store.state.xx.xx

2023
01-03
01-03
vue项目中扫码支付的实现示例(附demo)
目录需求背景思路分析UI展示开始使用一编写支付组件模板二支付组件的JS相关代码和说明附:组件JS完整的源码需求背景市场报告列表展示的报告有两种类型,一种是免费报告,另一种是付费报告。免费报告用户可以直接查看,付费报告需要用户购买之后才能查看。思路分析点击查看为付费报告,弹出支付二维码。创建订单,二维码进行倒计时,其展示5秒后开始监听支付回调结果,频次为五秒一次。倒计时第一次倒数到0秒,提醒二...
继续阅读 >
2022
11-02
11-02
Vue全局自定义指令Modal拖拽的实践
目录背景实现思路实现效果背景最近一直在做的项目是Vue2搭建的项目,UI框架用的antdV,项目中用到了很多Modal对话框,然后突然有一天产品说:“这个对话框为什么不能移动啊,挡住我看信息了”,那没办法,有需求就得做,这就是新生代打工人。首先我去antdV官网看Modal的配置属性和方法,看看有没有这方面的属性或者方法可以直接解决,无奈没有找到。第二步开始问百度,相关的博客也有一些,但是总的来说五花八门,不是特别好搞懂,...
继续阅读 >
2022
10-31
10-31
Vue中使用Openlayer实现加载动画效果

2022
10-08
10-08
vue实现二维码扫码功能(带样式)

2022
10-08
10-08
vue实现分页功能
本文实例为大家分享了vue实现分页功能的具体代码,供大家参考,具体内容如下使用组件分页自己写分页一、组件分页<el-paginationlayout="prev,pager,next"@current-change="changePageNum":current-page="pageNum":page-size="pageSize":total="total"></el-pagination>data(){return{tableData:[],total:0,//总数pageNum:1,//当前页pageSize:15,//每页显...
继续阅读 >
2022
10-08
10-08
Vue+Websocket简单实现聊天功能
本文实例为大家分享了Vue+Websocket简单实现聊天功能的具体代码,供大家参考,具体内容如下效果图:聊天室此篇文章是针对Websocket的简单了解和应用,利用Nodejs简单搭建一个服务器加以实现。首先创建一个vue项目然后再创建一个server文件夹,在终端上打开该文件夹,输入vueinit(一直敲"回车"键),最后再建一个server.js文件,如下图代码如下:server.js/在server文件终端下npminstall--swsvaruserNum=0;//统计在线人...
继续阅读 >
2022
09-29
09-29
vue实现文件上传和下载
本文实例为大家分享了vue实现文件上传和下载的具体代码,供大家参考,具体内容如下文件上传vue中的文件上传主要分为两步:前台获取到文件和提交到后台获取文件前台获取文件,主要是采用input框来实现<el-dialog:title="addName":visible.sync="dialogAddFile"width="500px"style="padding:0;"@close="resetAdd">附件名称:<el-inputv-model="addFileName"autocomplete="off"size="small"style="width:300...
继续阅读 >
2022
09-29
09-29
Vue使用百度地图实现城市定位
本文实例为大家分享了Vue使用百度地图实现城市定位的具体代码,供大家参考,具体内容如下Vue项目运行环境:Vue2.0,VueCli3.0步骤一:登录百度地图开放平台在控制台---->应用管理---->我的应用下面创建一个应用。目的是获取ak步骤二:在public文件夹的index.html文件中导入百度地图,拼上你的ak步骤三:在项目的根目录中创建vue.config.js文件如果有vue.config.js文件的话,直接添加以下代码即可。vue.config.js文件在VueCl...
继续阅读 >
2022
09-20
09-20
Vue使用高德地图实现城市定位
本文实例为大家分享了Vue使用高德地图实现城市定位的具体代码,供大家参考,具体内容如下一前端选择框点击跳转至地图选址页面<van-rowclass="address_item"><van-colspan="6"class="item-title">收货地址</van-col><van-colspan="18"><pclass="item"><van-iconname="arrow"class="arrow"/><van-iconname="location-o"/><span><van-fieldv-model="mapname"placeholder="点击选择"readonlyv-o...
继续阅读 >
2022
09-03
09-03
Vue之vue.$set()方法源码案例详解
在使用vue开发项目的过程中,经常会遇到这样的问题:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的。这是因为新加入的属性不是响应式的,因此不会触发视图的更新,通常使用静态方法Vue.set()或者实例方法this.$set()解决,使用方式:对象:this.$set(target,key, value)数组:this.$set(target,index, value)...
继续阅读 >
2022
07-11
07-11
vue实现表单验证功能
本篇主要讲述如何基于NUXT的validate方法实现表单的验证。将验证方法封装后,使用的时候只需像:rules="filter_rules({required:true,type:'mobile'})"这么一行代码便可在页面中实现验证了。首先看一下实现效果一、新建一个validate.js文件:该文档中放所需的一些验证规则,下面直接看代码:/***Createdbyjiachenpanon16/11/18.**/exportfunctionisvalidUsername(str){constvalid_map=['admin','editor']return...
继续阅读 >
2022
07-11
07-11
Vue入门实战之天气预报
本文实例为大家分享了Vue实现天气预报的具体代码,供大家参考,具体内容如下效果图实现代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><metahttp-equiv="X-UA-Compatible"content="ie=edge"/><title>天知道</title><linkrel="stylesheet"href="css/reset.css"/><linkrel="stylesheet"href="css/i...
继续阅读 >