vue
文章平均质量分 67
青浅l
兜兜转转,发现只有写写代码,才能维持生活这样子。
展开
-
利用promise.all实现所有请求结束后关闭loading
前端时间做了一个h5的需求,复盘的时候发现初始化方法中添加的loading 会因为接口返回比较慢的原因,加载页面的时候显示多次,很影响用户体验,想到利用promise来进行优化。console.log('开始加载loading状态')const p1 = new Promise((resolve,reject)=>{ setTimeout(()=>{ console.log('第一个请求结束'); resolve() },1000)})const p2 = new Pr.原创 2021-07-02 11:54:41 · 1241 阅读 · 0 评论 -
vue 如何通过前端来导出excel表格
在做一些简单的demo时,偶尔会遇到导出excel表格。如果请后端帮忙的话 比较浪费时间,那么前端如何导出excel表格,下面就来记录一下之前使用到的案例一、安装依赖npm i file-saver xlsx script-loader -S或yarn add file-saver xlsx script-loader二、封装Blob、export_json_to_excel 方法1、封装blob方法在 src/utils文件夹下创建Blob.js/* eslint-disable *.原创 2020-10-12 17:21:36 · 734 阅读 · 0 评论 -
如何利用在vue中echart 生成全国、省、市地图
生成中国地图比较简单,参照echarts文档就可以实现,可能就是稍微花一点点时间。下面记录通过cdn 引入echart 和npm安装echart来实现地图的方式1、通过cdn方式在 public/index.html 页面引入echart cdn 和 echart map数据china.js <script src="https://cdn.bootcss.com/echarts/4.3.0/echarts.min.js"></script> <scri.原创 2020-09-02 18:13:15 · 1306 阅读 · 0 评论 -
vuex中getters 的基本用法
一、getter 定义Vuex允许我们在store中定义"getter" ,用于对state中存储的数据进行过滤操作。就像vue生命周期中的computed一样,getter的返回值 会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算二、使用方法1、通过属性访问Getter 接受 state 作为其第一个参数:example:现在需要获取list:[1,2,3,4,5,6,7,8,9]中大于5的元素const store = new Vuex.Store({ .原创 2020-08-27 11:08:01 · 9574 阅读 · 0 评论 -
echarts 利用富文本设置图片label
最近做前端可视化,有一个如下的需求,放上初步的效果图:很简单的echart pie图,但是又有两个不同的地方:需求上有2个label,一个在扇形内部,一个在扇形外部外部label为图片查看文档最终的解决办法为,同样的数据渲染2个相同的pie图,利用rich将外部label设置为图片为了使vue组件看起来简洁,将chart 方法抽离到src/utils/chart.js<template> <el-row :gutter="24"> <el原创 2020-08-21 18:01:01 · 3804 阅读 · 2 评论 -
微信小程序+nodeJs+express+mongodb踩坑记录
一、前言春节期间利用nodejs+mongodb+express 开发后台接口; vue+elementui 开发后台管理系统开发一款蛋糕店小程序。打通了整个购物流程,用户登录授权和付款都已经实现。只是UI有待优化,现在打算利用uni-app开发一下小程序。主要三个目标:最晚年前小程序上线,预计国庆节前学习一下uni-app开发流程完善一下nodejs知识点整个开发过程肯定是面向百度的,没有系统的学习过nodejs,都是一边百度一边写;用这个项目来学习uni-app和nodeJs。..原创 2020-08-12 19:42:33 · 770 阅读 · 0 评论 -
vue prop属性使用方法小结
Prop一、基本用法Prop的基本用法很简单,作用是在子组件中接收父组件的值父组件传值<template> <div> <Example :data1='data1' :data2='`属性值2`' /> </div></template><script> import Example from '@/components/expmple' export defa原创 2020-08-01 10:36:40 · 2965 阅读 · 0 评论 -
vue中post和get方式导出文件
execl表格导出在后台管理系统中非常常见,记录一下vue项目中通过get和post调用后端接口导出文件一、get方式请求接口1、window.location.href = host + '/api/XXX/XXX'2、window.open( host + '/api/XXX/XXX')3、 let link = document.createElement('a') link.href = host + '/api/XXX/XXX' link.downloa原创 2020-07-29 19:30:53 · 2532 阅读 · 0 评论 -
vue渐变色进度条。适用真假进度条
业务需要,动手封装一个渐变色进度条。组件适用真假进度条,1、调用子组件的setProgress()方法,进度条开始执行,到91%进度条进入等待状态。待后台接收完数据,修改finished值为ture,进度条继续执行到100%。2、如果需要真的进度条,调用接口轮循获取进度值progress传入组件。<template> <hprogress ref="hjprogress" @isFinished="isFinished" :finished="finished" />&原创 2020-07-24 16:42:03 · 1379 阅读 · 0 评论 -
vue+node+express个人博客部署到nginx
1、vue打包个人博客页面大概的架子已经搭起来了,打包部署到centos服务器看一下效果。module.exports = { publicPath: './', // 设置打包文件相对路径 (默认是没有“ . ”的,打包后路径不对,打开网页空白。需要加上 .) devServer: { // open: true, //配置自动启动浏览器 proxy: { '/api': { target: 'h原创 2020-07-06 15:27:13 · 446 阅读 · 0 评论 -
记录一下axios封装
src目录下创建api/axios.jsaxios.js代码如下:/* * @Author: 471826078@qq.com * @Date: 2020-05-21 09:54:50 * @LastEditors: 471826078@qq.com * @LastEditTime: 2020-05-27 16:18:41 */import axios from 'axios'//引入vueimport Vue from 'vue';//新创建一个vue实例let v = new.原创 2020-07-01 00:24:41 · 113 阅读 · 0 评论