vue
文章平均质量分 55
一介青烟小生
小白一个
展开
-
vue百度地图通过地址名称来获取该地址的经纬度gps
在Vue项目中,可以通过使用百度地图JavaScript API来实现根据地址名称获取经纬度GPS的功能。如果地理编码成功,将返回经纬度坐标对象,并打印出其经度和纬度值。方法进行地理编码,将地址字符串作为参数传入。例如,在模板中添加一个输入框和一个按钮,当用户点击按钮时,会激发。的方法,该方法接收一个地址字符串作为参数,并返回该地址的经纬度坐标。这样,就实现了在Vue项目中根据地址名称获取经纬度GPS的功能。// 地理编码成功,返回经纬度坐标对象。// 获取当前地址的经纬度坐标。// 对地址进行地理编码。原创 2023-05-17 08:42:24 · 1650 阅读 · 0 评论 -
vue+萤石云ezuikit.js播放直播流视频(声音自动关闭,添加控件,多个视频播放)
通过demo发现,主要是区别就是容器盒子的ID不一样,至于声明多个变量只是为了在其他方法里面进行一些操作,我这里是暂时用不到,因为常用的控件都自带了,就不需要额外的方法去进行操作了。多个视频播放的话,demo里面也有说明的,就是new多个实例,但是按照demo里面的用法,其实我们实际使用是感觉不行的,所以只能说按照demo的思路走。看过官网的文档都知道萤石云的文档是多么的‘善解人意’哈,懂得都懂,很多东西没有说清楚的,只能靠自己去摸索或者看他们的demo来一点点测试实现。,但是最后发现,都没有反应。原创 2023-04-04 14:11:19 · 4033 阅读 · 11 评论 -
echarts的展示区域地图,添加纹理图片
echarts的展示区域地图,添加纹理图片原创 2023-03-28 10:42:28 · 6844 阅读 · 11 评论 -
Vue+ElementUI+Echarts的地图DOM
地图图表的开发在我们开发的过程中就很常见,特别是在开发大屏的时候,最近在进行地图图表的开发,就单独用引入的方式来记录一个DOM,让大家一起学习下。从上图可以看到,这个主要是就是对地图做个一个展示,省份的高亮,各个板块的颜色修改的一些功能的DOM。因为我添加了颜色的图层展示,就导致了地图样式修改会失效,比较已经给了底色。因为我使用是html来写的,所以都是用引入的模式来进行开发。旁边的颜色块选择修改的模块就不一一展示了。的省份数据,记得名字要一样的,不能修改。原创 2022-09-07 16:34:05 · 968 阅读 · 0 评论 -
【Vue】动态组件的使用
【Vue】动态组件的使用最近在开发中,产品经理给了一个新的需求,就是在一个页面里面对页面进行多个切换,就是那种不改变路由变化,但是需要点击菜单改变页面的内容或者说切换页面。就类似是在一个管理系统里面的某个页面再加一套管理系统,但是切换页面需要改变页面内容,但是不能改变路由。使用动态组件因为涉及的页面比较多,而且有些页面是外面的大系统也需要使用的。而且页面还是需要动态展示的,就是第二套的管理系统是后端返回的菜单,所以就说明,我们需要进行批量的对页面进行组件的注册的方法,方便来展示。涉及的页面比较多,然后动态原创 2022-07-08 16:10:27 · 2184 阅读 · 0 评论 -
记一次vue项目优化的实例操作
记一次vue项目优化的实例项目前端优化是我们经常需要去做的事情,今天我们就来记录下我的实际操作。一、引入这是一个常态化的操作了,主要是让我们通过下载依赖包和import引入的文件,变成线上使用,减少打包后的文件大小。比如常用的等等一些常用的首先在文件引入然后注释掉import引入的一定要把注释第三步,找到文件,在下面添加你CDN引入的依赖vuex的文件里面修改router文件也需要修改坑:1.一定要先引入的,然后再加其他的,不然会报错,找不到的标签名;2.不能只引入,不引入,一样会报错;3.我引入的的,在原创 2022-06-15 16:34:19 · 208 阅读 · 0 评论 -
【百度地图】路书轨迹显示
【百度地图】路书轨迹显示通过后端返回的坐标点列表,然后在地图上展示出轨迹,并且显示标点和显示窗口文案。效果如下引入百度地图,因为百度地图的轨迹(路书)模式只能是3.0才可以使用,所以注意自己引入的是否正确先获取到gps坐标点列表(模拟数据)先创建地图一、直接展示路书轨迹添加标点给每一个标点添加数据,可以在点击标点的方法获取的数据里面可以获取到相对应的添加的数据添加轨迹路线。先要更加返回的坐标数组,先对坐标点进行初始化,然后在渲染。下面还有具体的属性配置往地图添加标点和路书给路书轨迹的线添加箭原创 2022-06-07 11:09:36 · 4130 阅读 · 3 评论 -
vscode运行打包vue项目内存溢出的报错和解决办法
vscode运行打包vue项目内存溢出的报错和解决办法最近在再弄一个旧项目的时候发现这个项目异常的大,内容涉及很多,导致我在运行的时候发生了内存的溢出,虽然不影响代码跑起来,但是他时不时保存的时候就断了就很烦,没办法,就去找各种办法来解决,下面就是碰到的问题和一些别人的解决办法最终的解决办法 ----------------------2022-03-29最后发现是因为node的版本太高,如果要解决只能把node版本给重新安装一次真的是无语了,希望大家引以为戒!!!!!!!!!!!!!!!!原创 2022-03-29 16:48:35 · 5771 阅读 · 6 评论 -
vue使用百度地图的循环显示标注图标--标注点的移入移出点击事件--修改标注点
百度地图import bmapJSON from '../../../assets/js/custom_map_config.json'import Micon from '../../../assets/icon/marker2.png'import MiconHover from '../../../assets/icon/markerHover.png'import MiconActive from '../../../assets/icon/markerActive.png'let th原创 2021-09-23 16:46:56 · 1321 阅读 · 0 评论 -
vue生成二维码,并且扫码访问链接网址
vue生成二维码,并且扫码访问链接网址1、安装npm i qrcodejs22、页面引用import QRCode from "qrcodejs2";3、页面添加<p>企业链接</p><p>{{url}}</p><el-button size="small" type="success" @click="qrcode(url)">点击生成二维码</el-button><div id="qrcode" ref=原创 2021-04-30 12:02:30 · 1296 阅读 · 3 评论 -
vue项目中阿里图标的使用
vue项目中阿里图标的使用在项目中使用阿里图标,先去阿里图标网站(https://www.iconfont.cn/),找到自己想要的图标,添加到一个新建项目中,然后选择Font class,点击下载至本地然后打开压缩包然后把里面的iconfont.css和iconfont.ttf,放到项目里面。然后在入口文件,main.js文件中引入import './assets/icon/iconfont.css'就可以在页面使用了 <i class="iconfont iconuser"&原创 2021-04-20 11:54:07 · 167 阅读 · 0 评论 -
vue预览word,excel,pptx,pdf文件
vue预览word,excel,pptx,pdf文件1、做word,excel,pptx的预览,要先确定文件路径访问是通过域名的url来预览,不可以通过IP的url来访问先把文件路径的url进行url编码(encodeURIComponent)let router = 'https://aaaaaa.com/file/download?filename=file.obj_id' //文件路径let url = encodeURIComponent(routeUrl)然后用Office Web原创 2021-01-26 14:58:29 · 5883 阅读 · 3 评论 -
vue使用pdf.js在线预览pdf文件
vue使用pdf.js在线预览pdf文件1、先去下载pdf.js,打开官网pdf.js官网 :http://mozilla.github.io/pdf.js/getting_started/#download(如果打不开这个网站,可以参考这个博客)https://blog.csdn.net/lu6545311/article/details/111279106https://blog.csdn.net/lu6545311/article/details/1112791062、导入项目3、原创 2020-12-28 17:00:55 · 545 阅读 · 0 评论 -
vue创建WebSocket进行实时通讯
vue+WebSocket创建实现实时通讯//websocket async initWebSocket() { if (websock) { return; } if (!const_chatid) return; if (typeof WebSocket === "undefined") { console.error("您的浏览器不支持WebSocket"); return false;原创 2020-12-16 15:08:54 · 1092 阅读 · 1 评论 -
axios的请求拦截器和动态loading的
axios的请求拦截器和动态加载loading,两个结合在这里使用的是,vue+axios+elementUI来实现的import axios from 'axios'// axios.defaults.baseURL = '/api'import browser from '../common/browser'import qs from 'qs';import { Loading } from 'element-ui'let loading = null //定义loading变量//原创 2020-12-01 10:40:26 · 448 阅读 · 0 评论 -
vue限制不登录无法进入其他页面
vue限制不登录,通过url进入其他页面强制回到登录页面;已经登录了,不可以再进入登录界面先在router下的index.js添加 meta:{requireAuth:true},如下{ path: '/data', name: 'data', component: data, meta:{requireAuth:true}},然后在main.js添加如下代码router.beforeEach((to, from, next) => { if (to.meta.requ原创 2020-11-12 17:28:04 · 3396 阅读 · 3 评论 -
vue+wangEditor的富文本编辑器的使用
vue+wangEditor的富文本编辑器的使用先配置新建一个<el-form-item label="源码简介" prop="desc"> <div id="editor"></div>//编辑器的位置</el-form-item>data(){ return{ //编辑器 editor: null, editorData: '', }}methods: { getEditorData() {原创 2020-11-12 10:47:35 · 1063 阅读 · 1 评论 -
vue项目使用和引用百度地图的操作
vue使用百度地图先安装包npm i vue-baidu-map --save在main.js引入import BaiduMap from 'vue-baidu-map';Vue.use(BaiduMap, { ak: '你的百度地图密钥ak'})没有密钥ak的可以去百度地图网站申请http://lbsyun.baidu.com/apiconsole/key#/home如下图然后再index.html入口文件添加引用<script type="text/jav原创 2020-10-30 14:23:40 · 387 阅读 · 0 评论 -
vue图片做懒加载的操作
vue做图片的懒加载首先安装npm install vue-lazyload然后再main.js文件引入import lazyload from "vue-lazyload"Vue.use( lazyload,{ loading:'../static/layui/images/loading.png',//加载中图片,自定义 error:'../static/layui/images/loadError.png'//加载失败,自定义})本地图片显示懒加载<img v原创 2020-10-30 14:20:34 · 108 阅读 · 0 评论 -
vue的url带参数跳转
vue的url带参数跳转1.router带参数{ path: '/operate/:id',//带参数 name: 'operate', meta:{requireAuth:true}, component: ()=>import('@/page/user/operate')},然后带参数跳转this.$router.push({path:'/operate/${id}'})获取参数this.$route.params.id或者也可以通过props来获取参数p原创 2020-10-15 15:53:26 · 5518 阅读 · 0 评论 -
vuejs打开本地json文件进行测试
vuejs导入本地json文件来进行测试先把json文件放在文件的根目录下然后在需要用到测试数据的页面引入,然后获取数据import phone from '../../../phone.json'mounted(){ this.goodsList = phone console.log(this.goodsList); },},...原创 2020-10-14 15:06:46 · 366 阅读 · 0 评论 -
前端将json数据和动态数组数据转换为Excel文件下载
以下转载来自https://blog.csdn.net/friend_ship/article/details/100582537前端将json数据转换为Excel文件下载第一步安装需要的依赖:npm i file-saver xlsx -Snpm i script-loader -D第二步需要加载两个依赖包:Blob.js 和 Export2Excel.js文件可以百度下载这两个文件,也可以直接copy下面的代码。Blob.js代码如下:/* eslint-disable *//*转载 2020-10-09 14:34:55 · 428 阅读 · 0 评论 -
vue的关于姓名文字,电话号码,身份证号码的打码隐藏的过滤器
vue的关于姓名文字,电话号码,身份证号码的打码隐藏的过滤器1.关于姓名文字的打码显示formatName (value) { if (!value) return ''; let str = value; if(str.length == 2){ str = str.toString().replace(/^([^\x00-\xff])([^\x00-\xff]{0,})([^\x00-\xff])/g , '$1*') }else if原创 2020-09-28 14:22:40 · 1761 阅读 · 0 评论 -
vue项目适配pc端的各种屏幕分辨率
vue项目适配pc端的各种屏幕分辨率在pc项目开发的时候,要适用PC端的各种屏幕分辨率1.先安装插件npm install px2rem-loadernpm install lib-flexible2.在build文件下的utils.js文件下,添加//1const px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 192 //一个rem==192px } }//2原创 2020-09-09 16:51:40 · 2436 阅读 · 1 评论 -
vue通过window.location和window.open跳转外部链接
vue跳转外部链接//这个方法会在跳转的时候再url前面添加原来的路径地址let routeUrl = this.row.html window.open(routeUrl, '_blank'); //这个只能在原来页面跳转。不会新开窗口 window.location.href=routeUrl...原创 2020-09-04 16:38:43 · 5628 阅读 · 2 评论 -
vue打开新的页面,后端buffer图片流的,前端下载,通过url下载其他文件
vue打开新的页面,后端buffer图片流的,前端下载,通过url下载其他文件//新页面let routeUrl = `${this.$baseUrl}/file/download?filename=`+row.file_id+"&file_kind=" +'file'window.open(routeUrl, '_blank');//后端buffer图片流的,前端下载let bytes = new Uint8Array(res.buffer.data); let data原创 2020-09-04 16:37:32 · 1247 阅读 · 0 评论 -
子组件调用父组件方法,父组件调用子组件方法,子组件传值给父组件,父组件传值给子组件;兄弟之间传值
子组件调用父组件方法,父组件调用子组件方法,子组件传值给父组件,父组件传值给子组件子组件调用父组件方法(可以多层级调用方法),子组件传值给父组件//子组件代码getToParent(){ //getParent是父组件的方法名 this.$emit('getParent',['传值']);}//父组件代码<b-tab title="父组件" value='0'> <safeCom @getParent='getParent'></safeCom原创 2020-08-28 10:18:26 · 280 阅读 · 1 评论 -
vue打包的时候,全局注释console调试
在开发的时候,我们会用到很多console的调试,在开发完成的时候,又不想一个个去注释,所以在打包的时候可以在build文件夹中找到webpack.prod.conf.js文件中添加以下代码 new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false, //过滤console.log-start drop_console: true,原创 2020-08-10 09:41:20 · 999 阅读 · 0 评论 -
vscode快速打出vue项目模块
在vscode的文件 》首选项 》 用户片段然后再搜索框输入vue,回车,打开vue.json文件,添加下面这个代码{ "Print to console": { "prefix": "vue", "body": [ "<template>", " <div></div>", "</template>", "", "<script>", "export default {",原创 2020-08-07 09:56:26 · 446 阅读 · 0 评论 -
vue项目报错Trailing spaces not allowed.
vue项目报错Trailing spaces not allowed.是因为vue-cli的eslint的语法规范导致的你可以把eslint给关闭了在使用vue-cli脚手架来生成vue项目文件的时候,会发现有个自带的代码规范eslint,非常麻烦,其实你只要找到.eslintrc.js里面,把standard给注释了就好了,或者是vue-standard给注释了,如下module.exports = { root: true, parserOptions: { parser: 'b原创 2020-07-21 09:40:03 · 2048 阅读 · 2 评论 -
后端返回图片类型转换,buffr
<img :src="codeImg" alt="" style="width:83%">let bytes = new Uint8Array(res.photo.data);let data = ""; let len = bytes.byteLength; for (let i = 0; i < len; i++) { data += String.fromCharCode(bytes[i]); } .原创 2020-07-20 15:00:05 · 315 阅读 · 0 评论 -
在开发中,我们需要对后端返回来的数据进行转型,后端返回的字符串类型,布尔类型,进行使用
后端返回num:'12.598'num2:'11.222'这种字符串的数字,在前端需要根据这个数字来做一些判断的时候,直接if(num > num2){ console.log('方法')}这样子操作,很明显是不可以的,所以我们需要进行转换数据类型parseFloat浮点if(parseFloat(num) > parseFloat(num2){ console.log('方法')}//parseInt还有一种就是你想只想对比小数点前面的数字,就可以用到parseI原创 2020-07-20 14:58:29 · 1030 阅读 · 0 评论 -
vue的项目启动,我们需要连接其他电脑来跑项目的时候,就需要把ip地址换成需要连接电脑的ip地址。在config文件夹下的index.js的文件里面添加修改
平时的开发中,我们需要连接其他电脑来跑项目的时候,就需要把ip地址换成需要连接电脑的ip地址。在config文件夹下的index.js的文件里面添加修改dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api': { target: 'http://192.168.101.153:9099', changeOri原创 2020-07-20 14:55:38 · 823 阅读 · 0 评论 -
vue中时间戳准换时间过滤器和小数点装换百分比的过滤器
vue中时间戳准换时间过滤器组件化新建一个js文件添加以下代码export function formatDate(date, num) { if (/(y+)/.test(num)) { num = num.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); } let o = { 'M+': date.getMonth() + 1, 'd+': date.getD原创 2020-07-20 14:52:27 · 473 阅读 · 0 评论 -
vue打包后,网页打开是空白页的解决办法
在config文件夹下的index.js中,找到assetsPublicPath: '/'然后改成assetsPublicPath: './'build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDir原创 2020-07-20 14:45:55 · 686 阅读 · 0 评论 -
关闭vue-cli脚手架的eslint的规范准则
在使用vue-cli脚手架来生成vue项目文件的时候,会发现有个自带的代码规范eslint,非常麻烦,其实你只要找到.eslintrc.js里面,把standard给注释了就好了,或者是vue-standard给注释了,如下module.exports = { root: true, parserOptions: { parser: 'babel-eslint' }, env: { browser: true, }, extends: [ // https:原创 2020-07-20 14:38:01 · 720 阅读 · 0 评论 -
v-for里面再嵌套一个v-for的写法
v-for里面再嵌套一个v-for的写法list:[ id:'', goods:[ images:'', product:'', desc:'' ]]<div class="listContent" v-for="item in list" :key="item.id"> <span>{{item.create_time_i | formatDate}}</span> <div class=" van-hair原创 2020-07-20 14:33:00 · 7319 阅读 · 0 评论