
vue
折纸成鸢。
记录自己的一些开发经验
展开
-
nprogress进度条的安装与使用
NProgress是一个轻量级的进度条组件,使用简便,可以很方便集成到单页面应用中npm官网链接https。原创 2022-07-20 10:52:28 · 2842 阅读 · 0 评论 -
vue的几种路由跳转方式
vue跳转有总体分为带参跳转和不带参跳转;带参又有路由显示和不显示的差别1、router-link跳转//不带参数跳转 <router-link to="/register"> <span>去这里注册</span> </router-link> //带参跳转 路由显示 <router-link :to="{path:'register',query:{setid:123456}}"> <span>去这里原创 2022-03-16 16:35:16 · 2428 阅读 · 0 评论 -
echarts 引入百度地图
echarts 引入百度地图在写大数据相关的大屏中,会遇到需自定义定点图标的问题,这样就必须运用到echarts series的custom属性。echarts百度地图 custom 属性的运用:首先上效果图:这样一个效果的地图,需要运用echarts的 bmap引入地图,通过mapStyle属性来对地图进行调色,代码如下:bmap: { center: [ parseFloat(elderInfo.longitude), pa原创 2022-03-15 14:55:59 · 9280 阅读 · 4 评论 -
在数据渲染中判断某值是否属于某数组
在数据渲染中判断某值是否属于某数组在数据渲染中出现同一情况有多个值时常用的判断方式,可以用此方法判断数组中是否存在某个值作为条件来达到渲染的目的。因为此方法判断数组中是否存在某个值,如果存在返回true,否则返回false。<div class="profit-w-b flex-row" v-if="walList" v-for="(item,idx) in walList" :key="idx"> <div class="p-icon"> <img v-if="[0原创 2021-11-29 17:57:40 · 587 阅读 · 0 评论 -
m3u8视频推流
1、m3u8视频流相对于rtmp视频流更稳定,同时也不需要浏览器的flash支持。下面放代码以及配置,如有问题欢迎指正。安装vue-video-player和videojs-contrib-hls插件npm install vue-video-player --savenpm install videojs-contrib-hls --savenpm install videojs --save安装完成后查看安装版本在main.js中全局引用或在指定页面独立引用 import Vi原创 2021-08-18 15:57:42 · 2101 阅读 · 0 评论 -
vue-baidu-map 通过经纬度逆解析地址信息
1、在main.js引入vue-baidu-map,引入如下import BaiduMap from 'vue-baidu-map'2、引入百度地图的key值Vue.use(BaiduMap, { // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */ ak: 'aT1U8mBIkCWsCNRp5rbzuG7MdImpzKjc'})3、可直接在页面引用百度地图组件<template><原创 2021-03-23 11:23:50 · 3290 阅读 · 8 评论 -
vue项目中播放rtmp视频文件流
vue项目中播放rtmp视频文件流想要播放rtmp视频文件流用H5的video标签是不可行的,所以这里我引用了一款插件 vue-video-player ,当然想要流畅的运用 vue-video-player 播放视频还必须安装辅助插件 videojs-flash。最后还要特别注意的是必须使用npm安装,当然我在安装过程中也遇到了一个问题,就是在选择使用 vue-video-player前还安装了videojs插件,卸载从新安装 vue-video-player时由于项目中有以前安装的其他视频组件影响,一原创 2020-09-17 14:57:43 · 11129 阅读 · 10 评论 -
vue项目中做移动适配
在用vue或react等工具搭建一个移动端项目时,怎样做到自适应呢? 当然选择rem布局比较方便快捷.此处已vue为例,在使用vue-cli搭建好项目框架后,在目录结构的index.html文件中添加一段js代码:fnResize();window.onresize = function () { fnResize();}function fnResize() { var deviceWidth = document.documentElement.clientWidth || windo转载 2020-08-27 14:37:17 · 409 阅读 · 0 评论 -
vue中axios的应用
vue中axios与qs的应用1、安装axiosnpm install axios 2、在mainjs中引入axios(全局引入)import axios from 'axios'Vue.prototype.$axios = axios局部引入(在使用页面引入) import axios from "axios";3、封装公共方法 新建js文件function axios(that){ var url = '你的url'; var data = {‘你的接口参数’}; var原创 2020-06-17 10:38:11 · 165 阅读 · 0 评论 -
mpvue+vant构建微信小程序时引入组件路径出错
mpvue+vant构建微信小程序时引入组件路径出错错误:编译打包后无法找到usingComponents下的应用解决办法:克隆vant仓库,将dist目录下的所有文件复制到你项目的/static/vant/目录下。git clone https://github.com/youzan/vant-weapp.git// 当然你也可以克隆本仓库代码,本仓库会与vant仓库保持同步。直接将vant目录复制到/static目录下git clone https://github.com/Rychou/mp原创 2020-06-10 11:17:17 · 657 阅读 · 0 评论 -
vue实现分页源码
小女子不才,自定义的分页,若有不当之处还望大佬指正,有更好的方法还望留言一、html<template> <div class="content"> <div class="data-content"> 内容展示区域 </div> //以下为分页样式及事件调用 <div class="page-warpper"> <div class="page page-china page-pre" @click="to原创 2020-05-30 20:21:11 · 484 阅读 · 0 评论 -
Module Error (from ./node_modules/eslint-loader/index.js):解决办法
转载原文至:aaronthon关于Module Error (from ./node_modules/eslint-loader/index.js):解决办法本人时在调用v-for循环时出现的问题,一直提示我如下问题 error Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key心想是eslint校验问题,就想吧eslint校验取消,在根目录下新建vue.config.js,新增转载 2020-05-30 17:43:10 · 26035 阅读 · 4 评论 -
mpvue微信小程序onReachBottom上拉加载失效问题
mpvue微信小程序onReachBottom上拉加载失效问题全局配置1、在最外层的app.json中的window中配置enablePullDownRefresh"window":{ "enablePullDownRefresh": true, // 是否开启下拉刷新 "backgroundTextStyle":"dark" , // 下拉 loading 的样式,仅支持dark/light "onReachBottomDistance": 150 // 页面触底距离 单位为p原创 2020-05-18 22:18:09 · 842 阅读 · 0 评论 -
前端常见问题
forEach 循环1、foreach里面return 直接跳出本次循环,进入下一次循环;splice对数组进行删除、添加操作var arr = [‘1’,‘2’,‘3’];1、splice(0,0,‘4’) //从第0个位置开始插入2、splice(2,1)//从第2个元素开始删除,删除个数为1个...原创 2019-04-20 15:59:31 · 318 阅读 · 0 评论 -
nodejs安装 vue安装 webpack安装
1、下载路径https://nodejs.org/en/ 下载LTS版本的nodejs2、安装注意(1)自行修改安装路径,如:D:\nodejs(2)选择Add to PATH ,默认会添加到path环境变量去(3)一直点next知道finish3、打开cmd,检查是否正常(1)echo %PATH% 查看环境变量,如果出现D:\nodejs说明安装成功。(2)node -v 查看...转载 2018-12-04 09:57:06 · 685 阅读 · 0 评论