![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue相关
文章平均质量分 68
前端打工仔小剑儿
混口饭吃的前端打工仔
展开
-
vue中平时可能会遇到的过滤器(便于后续使用)
exports.getGender = val => { let gender = ""; switch (val) { case 0: { gender = "男"; break; } case 1: { g原创 2020-09-25 14:47:36 · 162 阅读 · 0 评论 -
vue通过路由跳转,页面刷新问题
Vue 为你提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的 key 属性即可具体操作:html<router-view :key="key"></router-view>jscomputed: { key() { return this.$route.name !== undefined? this.$route.name +new Date(): this.$route +new Date() }}即可实现刷新原创 2020-09-25 14:39:12 · 841 阅读 · 0 评论 -
vue项目中使用js-cookie存储数据
说明js-cookie是一个简单的,轻量级的处理cookies的js API。创建//创建简单的cookieCookies.set('name', 'value');//创建有效期为7天的cookieCookies.set('name', 'value', { expires: 7 });//为当前页创建有效期7天的cookieCookies.set('name', 'value'...原创 2020-04-30 16:19:35 · 3425 阅读 · 0 评论 -
axios封装即用
axios封装代码,拿来即用,为以后使用方便http.js文件import axios from 'axios';const baseUrl = 'https://xxx.xxxxxx.com';// const baseUrl = 'http://localhost:9227';// axios 拦截器axios.interceptors.request.use(config =...原创 2020-04-22 16:35:12 · 150 阅读 · 0 评论 -
vue中使用oss直传图片到阿里云
1.引入在index.html中引入 <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>2.上传我使用的是vant组件中的图片上传组件<van-uploader v-model.trim="item.fileList" :after-rea...原创 2020-04-22 16:02:08 · 1461 阅读 · 2 评论 -
前端做微信支付(vue)
微信支付主要工作量在后端,前端就是调用后端给的微信支付接口,获取微信支付的相关参数:首先你的安装微信支付模块并引入它// npm install weixin-js-sdkimport wx from "weixin-js-sdk";接下来你需要后端给你一个接口文档类似于这样的在就是你调用接口了,看代码吧:1,点击立即支付的代码toPay() { //请求后台接口获...原创 2020-04-20 11:32:35 · 2702 阅读 · 0 评论 -
vant组件中图片上传对图片进行压缩处理
1.vant组件进行图片上传需要借助 <van-uploader v-model.trim="item.fileList" :after-read="uploadImg" :before-read="beforeRead" accept="image/*" ...原创 2020-04-20 11:04:41 · 7264 阅读 · 4 评论 -
elementui使用upload上传被拦截处理方法
在项目中由于安全性考虑,后端对于接口的访问往往会进行拦截,前端往往需要在调用接口的时候传递一个token,在elementui中使用文件上传时,前端通常是这样的<el-upload action="/admin/file/uploadImage" :show-file-list="false" :on-success="uploadSuccess" :on-...原创 2019-12-16 17:33:59 · 5715 阅读 · 0 评论 -
vue页面传递参数(常用方法二)
最常用的方式A页面跳转到B页面,传递参数(id和code)A页面触发跳转事件this.$router.push({ name: "ProInsur",//ProInsur路由的name值 params: { id: xxx, Code:xxx }});B页面接收参数 id:this.$route.params.id, code...原创 2019-11-21 11:20:44 · 287 阅读 · 0 评论 -
vue页面传递参数(常用方法一)
最常用的方式A页面跳转到B页面,传递参数(id和code)A页面触发跳转事件this.$router.push({ path: "/ProInsur", query: { id: xxx, Code:xxx }});B页面接收参数 id:this.$route.query.id, code: this.$route.query...原创 2019-11-21 11:04:32 · 449 阅读 · 0 评论 -
compression-webpack-plugin报错问题
vue-cli项目中使用compression-webpack-plugin版本问题报错,查阅资料才知道是因为在执行npm install时安装了最新的版本,你只需要npm install --save-dev compression-webpack-plugin@1.1.12即可解决...原创 2019-09-25 17:07:30 · 8639 阅读 · 2 评论 -
vue中实现刷新当前页面(亲测有效)
业务场景:vue项目中遇到对当前页面进行数据操作时需要实时更新数据,页面需要刷新;在jquery里面可以使用location.reload()方法,刷新页面;在vue中,使用this.$router.go(0)也能实现刷新,但是会出现短暂空白,用户体验效果不好,所以可以尝试使用provide / inject 这对用例这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论...原创 2019-09-24 18:50:53 · 5254 阅读 · 0 评论 -
vue使用elementui实现表格中上下移动功能
html代码 <el-table :data="prodata"> <el-table-column align="center" label="操作"> <template slot-scope="scope"> <el-button @click="upLayer(scope.$index,scope.row)">上移...原创 2019-09-24 18:32:19 · 5336 阅读 · 0 评论 -
axios相关封装
import axios from 'axios';// axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8';import qs from 'qs';import md5 from 'js-md5'import { Toast } from 'vant';let b...原创 2019-07-19 11:56:49 · 120 阅读 · 0 评论 -
vue移动端头部组件
<template><div style="height:50px;"><van-nav-bar:title="title"left-text=""left-arrow:z-index="999"@click-left="onBack"><van-icon name="user-o" slot="right" @clic...原创 2019-07-19 12:00:29 · 3140 阅读 · 0 评论 -
vue移动端尾部组件
<template><div style="height:50px;"><van-tabbarv-model="active"style="background: #032E4D"><van-tabbar-item icon="wap-home" to="/Home" >首页</van-tabbar-item>...原创 2019-07-19 12:01:30 · 241 阅读 · 0 评论 -
vue项目中使用md5加密
1、npm安装npm install --save js-md52、第一种使用方法在需要使用的项目文件中引入:import md5 from 'js-md5';使用:md5('aaaaa')3、第二种使用方法在main.js文件中将md5转换成vue原型:import md5 from 'js-md5';Vue.prototype.$md5 = md5;在需要用到的文...原创 2019-08-20 11:36:52 · 5991 阅读 · 1 评论 -
vue移动端实现拨号功能(点击手机号就拨号)
vue移动项目中如何设置点击手机号码就可以打电话1, 在vue项目的index.html中添加如下代码:<meta name="format-detection" content="telephone=yes" />,2,在需要调起手机拨号功能的页面,写如下方法:callPhone (phoneNumber) { window.location.href = 'tel...原创 2019-08-20 16:06:20 · 8394 阅读 · 0 评论 -
axios封装
axios的封装前期在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。他有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护,直接推荐我们使用axios库。如果还对axios不了解的,可以移步axios文...转载 2019-08-20 17:22:20 · 156 阅读 · 0 评论 -
vue做公众号网页时title的自定义问题
一般来说vue单页面应用的title在index.html中设置,但是一旦设置就是唯一了,对此有了以下需求:需要实现不同的页面对应不同的title,特别是微信公众号时,有了自带的头部栏,在vue2.0中可以使用vue-wechat-title解决问题1,安装vue-wechat-titlenpm install vue-wechat-title --save2,路由配置里加title,...原创 2019-08-20 17:45:07 · 3551 阅读 · 5 评论 -
vue中使用全局过滤器(实战有用)
1,src下建立filter文件夹,index.js代码如下exports.orderType = (val) => { let typeName = ''; switch (val) { case 0: { typeName = '取消'; break; } case 1: { typeName = '正常'; break; } ca...原创 2019-08-15 17:22:13 · 1079 阅读 · 0 评论 -
vue项目移动端用vant实现的头部组件
html部分<template> <div style="height:50px;"> <van-nav-bar :title="title" left-text="" left-arrow :z-index="999" @click-left="onBack" > <van-icon name="user-o" slot="right" @...原创 2019-08-21 09:40:51 · 6458 阅读 · 4 评论 -
移动端使用rem适配
移动端使用rem(页面使用px实际转化为rem)前提是需要一个转化插件——>postcss-pxtorem:转换px为rem的插件。第一步:安装插件 postcss-pxtorem;npm install postcss-pxtorem --save第二步:在src目录下新建rem文件夹,目录下新建rem.js文件;const baseSize = 32// 设置 rem 函数...原创 2019-08-27 11:28:50 · 151 阅读 · 0 评论 -
vue中使用promise先后实现请求先后执行
getData(){var promise1 = new Promise(function(resolve, reject) {let params = {xmlnode:"orderType"}transformApi(params).then(data => {resolve(data.Data);})});var promise2 = new Promise...原创 2019-07-19 11:52:41 · 4775 阅读 · 0 评论