分类：vue

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... 继续阅读 >
2022
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... 继续阅读 >
2022
07-06

Vue实现天气预报小应用

这是本人在自学vue框架时候所模仿的一个网站，可以查询一些城市的天气情况，大家可以看看：html代码<!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/index... 继续阅读 >
2022
07-06

Vue+Openlayer中使用select选择要素的实现代码

Vue+Openlayer中使用select选择要素的实现代码 效果图：  实现代码：<template><divid="map"ref="map"style="width:100vw;height:100vh"></div></template><script>import"ol/ol.css";import{Map,View}from"ol";import{OSM,VectorasVectorSource}from"ol/source";import{VectorasVectorLayer,TileasTileLayer}from"ol/layer";importGeoJSONfrom"ol/format/GeoJSON";importSelectfrom"ol/interaction/Select";import{altKe... 继续阅读 >
2022
07-06

Vue实现天气预报功能

本文为大家分享了Vue实现天气预报功能的具体代码，供大家参考，具体内容如下1、功能描述在搜索框中输入城市，下方出现今天及未来四天的天气情况。搜索框下面固定了几个城市，点击可以快速查询。2、html代码<divid="app"><divid="srchbar"><inputtype="text"v-model="city"@keyup.enter="srch(city)"id="ipt"><a@click=srch(city)id="btn">search</a></div><nav>... 继续阅读 >
2022
06-18

Vue 详解mixins混入用法大全

Vue 详解mixins混入用法大全 目录前言一、什么是Mixins？二、什么时候使用Mixins？三、如何创建Mixins？四、如何使用Mixins？五、Mixins的特点六、Mixins合并冲突七、与vuex的区别八、与公共组件的区别前言当我们的项目越来越大，我们会发现组件之间可能存在很多相似的功能，你在一遍又一遍的复制粘贴相同的代码段（data，method，watch、mounted等），如果我们在每个组件中去重复定义这些属性和方法会使得项目出现代码冗余并提高了维护难度，针对这种情况官方... 继续阅读 >
2022
06-13

vue实现zip文件下载

本文实例为大家分享了vue实现zip文件下载的具体代码，供大家参考，具体内容如下el-button按钮<el-buttonsize="mini"type="success"@click="downloadHandle(fileName,fileLocation)">下载</el-button>js处理说明request拦截器request.jsaxios引入并创建axios实例，request拦截器添加importaxiosfrom'axios'//创建axios实例constservice=axios.create({baseURL:'',//api的baseURLtimeout:20000,//请求... 继续阅读 >