分类：Vue

2023
03-28

vue轻松实现水印效果

前言：vue项目中使用水印效果，可指定容器效果图：1、不指定容器2、指定容器实现方法：1、新建一个配置文件watermark.js，可放util，也可放别的地方letwatermark={}letsetWatermark=(text,sourceBody)=>{letid=Math.random()*10000+'-'+Math.random()*10000+'/'+Math.random()*10000if(document.getElementById(id)!==null){document.body.removeChild(document.getElementById(id))}letcan=d... 继续阅读 >
2023
01-13

Vue+Openlayer批量设置闪烁点的实现代码(基于postrender机制)

Vue+Openlayer批量设置闪烁点的实现代码(基于postrender机制) 效果图：实现代码：<template><divid="map"style="width:100vw;height:100vh"/></template><script>import"ol/ol.css";importTileLayerfrom"ol/layer/Tile";importVectorLayerfrom"ol/layer/Vector";importVectorSourcefrom"ol/source/Vector";importXYZfrom"ol/source/XYZ";import{Map,View,Feature}from"ol";import{Style,Circle,Stroke}from"ol/style";import{Point}from"ol/geom";imp... 继续阅读 >
2023
01-13

VUE + OPENLAYERS实现实时定位功能

VUE + OPENLAYERS实现实时定位功能 目录前言一、定义标签样式二、模拟GeoJSON数据三、创建VerctorLayer四、构建地图五、模拟实时移动总结前言本系列文章介绍一个简单的实时定位示例，示例的组成主要包括：服务后端，使用Java语言编写，模拟生成GeoJSON数据。前端展示，使用Vue+OpenLayers，负责定时向后端服务请求GeoJSON数据，并在以标签的形式展现定位数据。实现的效果：一、定义标签样式varimage=newCircleStyle({radius:5,fill... 继续阅读 >
2023
01-13

基于Vue+Openlayer实现动态加载geojson的方法

基于Vue+Openlayer实现动态加载geojson的方法 加载1个或多个要素<template><divid="map"style="width:100vw;height:100vh"></div></template><script>import"ol/ol.css";importTileLayerfrom"ol/layer/Tile";importVectorLayerfrom"ol/layer/Vector";importVectorSourcefrom"ol/source/Vector";importXYZfrom"ol/source/XYZ";import{Map,View,Feature,ol}from"ol";import{Style,Stroke,Fill}from"ol/style";import{Polygon,MultiPolygon... 继续阅读 >
2023
01-03

浅谈Vue中的this.$store.state.xx.xx

浅谈Vue中的this.$store.state.xx.xx 目录Vuethis.$store.state.xx.xx获取store中的数据我的项目文件结构vue项目都在什么时候用store.state、$store.state和this.$store.sstore和[this.]$storethis.$store和$storeVuethis.$store.state.xx.xxthis.$store.state.xx.xx其实是Vue用到状态管理工具VuexVuex官网：https://vuex.vuejs.org/zh/感觉就是把组件的共享状态抽取出来，以一个全局单例模式管理。在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在... 继续阅读 >
2023
01-03

vue项目中扫码支付的实现示例(附demo)

目录需求背景思路分析UI展示开始使用一编写支付组件模板二支付组件的JS相关代码和说明附：组件JS完整的源码需求背景市场报告列表展示的报告有两种类型，一种是免费报告，另一种是付费报告。免费报告用户可以直接查看，付费报告需要用户购买之后才能查看。思路分析点击查看为付费报告，弹出支付二维码。创建订单，二维码进行倒计时，其展示5秒后开始监听支付回调结果，频次为五秒一次。倒计时第一次倒数到0秒，提醒二... 继续阅读 >
2022
11-02

Vue全局自定义指令Modal拖拽的实践

目录背景实现思路实现效果背景最近一直在做的项目是Vue2搭建的项目，UI框架用的antdV，项目中用到了很多Modal对话框，然后突然有一天产品说：“这个对话框为什么不能移动啊，挡住我看信息了”，那没办法，有需求就得做，这就是新生代打工人。首先我去antdV官网看Modal的配置属性和方法，看看有没有这方面的属性或者方法可以直接解决，无奈没有找到。第二步开始问百度，相关的博客也有一些，但是总的来说五花八门，不是特别好搞懂，... 继续阅读 >
2022
10-31

Vue中使用Openlayer实现加载动画效果

Vue中使用Openlayer实现加载动画效果 注意：实现动画时不能有scoped！！！！ 通过gif<template><divclass="test"><divid="map"ref="map"style="width:100vw;height:100vh"></div></div></template><script>import"ol/ol.css";import{Map,View,Overlay}from"ol";importTileLayerfrom"ol/layer/Tile";importOSMfrom"ol/source/OSM";exportdefault{name:"gif",data(){return{map:{},overlay:{},mar... 继续阅读 >
2022
10-08

vue实现二维码扫码功能(带样式)

vue实现二维码扫码功能(带样式) 需求：利用vue实现二维码扫描；插件：QRCodeReader；插件下载npminstall--savevue-qrcode-reader注意：需要在https协议下才可以调用相机，实现扫码。可以通过配置vue.config.js中的devServer:{https:true}或参照前文章前端使用Nuxt框架，配置本地https访问配置本地证书<template><div><pclass="error">{{error}}</p><!--错误信息--><pclass="decode-result">扫描结果:<b>{{result}}</b>... 继续阅读 >
2022
10-08

Vue+Websocket简单实现聊天功能

本文实例为大家分享了Vue+Websocket简单实现聊天功能的具体代码，供大家参考，具体内容如下效果图：聊天室此篇文章是针对Websocket的简单了解和应用，利用Nodejs简单搭建一个服务器加以实现。首先创建一个vue项目然后再创建一个server文件夹，在终端上打开该文件夹，输入vueinit（一直敲"回车"键），最后再建一个server.js文件，如下图代码如下：server.js/在server文件终端下npminstall--swsvaruserNum=0;//统计在线人... 继续阅读 >
2022
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

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

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

Vue之vue.$set()方法源码案例详解

在使用vue开发项目的过程中，经常会遇到这样的问题：当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。这是因为新加入的属性不是响应式的，因此不会触发视图的更新，通常使用静态方法Vue.set()或者实例方法this.$set()解决，使用方式：对象：this.$set(target，key,  value)数组：this.$set(target，index,  value)... 继续阅读 >
2022
07-11

vue实现表单验证功能

本篇主要讲述如何基于NUXT的validate方法实现表单的验证。将验证方法封装后，使用的时候只需像:rules="filter_rules({required:true,type:'mobile'})"这么一行代码便可在页面中实现验证了。首先看一下实现效果一、新建一个validate.js文件：该文档中放所需的一些验证规则，下面直接看代码：/***Createdbyjiachenpanon16/11/18.**/exportfunctionisvalidUsername(str){constvalid_map=['admin','editor']return... 继续阅读 >