vue
竹子js
这个作者很懒,什么都没留下…
展开
-
微信公众号H5支付的两种方式
前端调起微信H5支付的两种方式原创 2022-06-28 11:22:06 · 5134 阅读 · 1 评论 -
三种坐标系经纬度转化小工具
国际定位标准: WGS84 公用转化的坐标系,一般保存在后端数据库 火星坐标系: GCJ-02 国测局标准,中国使用,在国际定位标准上加密生成的. 高德地图,腾讯地图以及谷歌中国区地图使用该坐标系 百度坐标系: BD-09 百度坐标系,在火星坐标系上再次加密生成的. 百度地图使用该坐标系wgs84 ---》gcj02 ---》bd09 三种坐标系只能一层一层转化,百度和国际要通过火星坐标系转化代码如下:<!DOCTYPE html><html lan...原创 2021-12-24 16:00:09 · 3359 阅读 · 0 评论 -
微信授权及微信支付跳转回来的路径带有#的hash路径会被忽略
使用微信授权和微信h5支付时,需要配置redirect_uri 参数,如果参数里面的路是带有#的hash路径时,#后面的内容会被微信认为是不合法的,然后会被微信忽略掉,比如配置的是http://www.text.com:8082/index.html#/payResult微信跳转回来的时候会变成http://www.text.com:8082/index.html解决办法:可以将url进行编码,使用encodeURIComponent('http://www.text.com:.原创 2021-10-13 17:33:33 · 2213 阅读 · 2 评论 -
vue移动端调用支付宝H5支付无法调起,form表单已经添加到页面上
前端调用后端支付宝h5支付接口,会返回一串form表单的字符串,此时直接使用v-html将字符串赋值到页面上,页面上也有显示,但是就是调用不起来支付,因为v-html赋值页面还没加载完成,里面的js:document.forms[0].submit()执行会失效,此时使用$nextTick方法,等dom加载完成在执行一遍返回的字符串里的js代码 this.$nextTick(function(){ document.forms[0].submit() /.原创 2021-09-24 15:40:20 · 660 阅读 · 0 评论 -
vue2.x 自定义可拖拽弹窗组件
<template><div class="popupmask" @click.self="close2"> <div class="popupmain" :id="popupKey" :ref="popupKey" :style="{ width, height, left:left+'px', top:top+'px', }"> <div class="popupheader" :style.原创 2021-07-14 10:23:21 · 385 阅读 · 0 评论 -
vue-cli3使用scss/less/stylus添加全局变量
1.安装依赖:vue add style-resources-loader2.安装依赖时,选择对应的lcss或者scss3.在vue.config.js中配置const path = require("path");module.exports = { ...//其他配置 pluginOptions: { "style-resources-loader": { preProcessor: "less", patterns: [path.r.原创 2021-06-25 14:50:06 · 174 阅读 · 0 评论 -
地图多个标记绑定不同事件,传参
循环遍历生成地图标记,在每个标记的实例上绑定参数,this.markers[i].datas然后添加到地图上 markers是vue设置的一个data值,是一个数组 arr.forEach((v,i)=>{ this.markers[i] = new AMap.Marker({ position: new AMap.LngLat(v.lng,v.lat), // 经纬度对象,也可以是经纬度构成的原创 2021-05-11 10:51:46 · 451 阅读 · 1 评论 -
更改vue项目的title标题
方法一:在vue.config.js中配置chainWebpackchainWebpack: config =>{ config.plugin('html').tap(args => { args[0].title = '你要更改的标题名称'; return args; }) },方法二:将public文件夹下的入口index.html文件的标题更改为自己需要的标题<title><%= htmlWe...原创 2021-04-01 10:11:22 · 9379 阅读 · 0 评论 -
vue图片查看插件v-viewer使用
使用方法:1. 安装依赖:npm install v-viewer2.1 main.js中全局引入插件及样式:import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'Vue.use(Viewer, { defaultOptions: { zIndex: 9999, }})2.2 组件中引用插件机样式 import 'viewerjs/dist/viewer.css' import原创 2021-01-26 19:36:00 · 2165 阅读 · 1 评论 -
vue-cli3/4引入less全局变量
1.安装依赖:vue add style-resources-loader2.选择对应的css预处理语言,可选值有scss,sass,stylus,,less,选择less即可3.安装完成之后会提醒你在vue.config.js配置全局变量文件地址:One more step, add patterns for your resources's files in vue.config.js然后在项目中src/assets新建一个common.less文件,并在vue.config.js原创 2021-01-05 20:23:33 · 1023 阅读 · 1 评论 -
vant 移动端rem适配
1.实现rem适配,需要安装2个依赖包:postcss-pxtorem是一款 postcss 插件,用于将单位转化为 rem; lib-flexible用于设置 rem 基准值,安装时名称为amfe-flexible,参考官方文档:https://github.com/amfe/lib-flexiblenpm i postcss-pxtorem -Dnpm i amfe-flexible -S2.在项目根目录新建 postcss.config.js 文件,里面配置为:modu...原创 2020-12-18 16:36:52 · 490 阅读 · 2 评论 -
vuecli@3.x打包重新部署更新找不到文件,使用版本号解决文件名变更的问题
vue打包默认使用的是hash路径,如:app.e4328466.js,项目更新版本后,如果不刷新浏览器,就会报找不到文件的错误,因为文件名称已经改变了.所以我们可以把hash路径改为版本号,这样文件名称就是固定的,只是版本号会改变,但是版本更新还是需要刷新一下浏览器才能确保更新完毕.配置:vue.config.jsconst Timestamp=Date.now()module.exports = { publicPath: './', assetsDir: 'static',原创 2020-12-15 13:42:06 · 1391 阅读 · 0 评论 -
vue-cli3/4去除console
1.安装依赖:npm install babel-plugin-transform-remove-console -D2.在babel.config.js中配置plugin,不需要引入插件let plugin = []if (process.env.NODE_ENV === 'production') { // 如果是生产环境 plugin.push([ 'transform-remove-console', { exclude: ['error', 'wa原创 2020-12-08 16:01:05 · 482 阅读 · 0 评论 -
vuecli4打包后在低版本浏览器中运行报错Uncaught SyntaxError: Use of const in strict mode
在网上查了很多报错原因,结果都不适用,我使用的vuecli的版本是4.4.0网上说了很多都是es6转es5的配置,但是vuecli4版本都不太适用.vue-cli4 默认使用 Babel 7 +babel-loader+@vue/babel-preset-app,但是可以通过babel.config.js配置使用任何其它 Babel 预设选项或插件。默认情况下,babel-loader会排除node_modules依赖内部的文件。如果希望显性编译一个依赖的模块,你需要将其添加入...原创 2020-12-01 19:58:42 · 2192 阅读 · 0 评论 -
vue打包文件太大导致加载时间太久,开启gzip减少文件体积
vue-cli3或4脚手架搭建的项目第一步:安装依赖:npm i compression-webpack-plugin -D第二步:在vue.config.js中配置:const CompressionWebpackPlugin = require('compression-webpack-plugin')const isProduction = process.env.NODE_ENV === 'production'module.exports = { publicPath:原创 2020-11-30 11:48:31 · 1028 阅读 · 0 评论 -
package.json中scripts配置环境变量区分开发环境和生产环境
有时候打包时要区分打生产环境的包还是开发环境的包,这样判断需要用哪个baseurl或者其他变量方法1://windows操作系统下:"builddev": "set NODE_ENV=dev&&vue-cli-service build","buildprod": "set NODE_ENV=prod&&vue-cli-service build",//mac操作系统下:"builddev": "export NODE_ENV=dev&&am.原创 2020-11-23 18:13:56 · 6597 阅读 · 0 评论 -
vue项目中使用iframe引入本地html页面
1.将html文件放到项目根目录下的public/static(static自己新建就好了)文件夹下,rmt-bmp是我的项目名,将需要的html文件放到public下的static文件夹下2.然后直接在页面中使用iframe,src路径直接static开头,打包好的项目就是已public为根目录的,所以直接这样引用即可.<iframesrc="static/screenNewTest/index.html"frameborder="0"class="iframe"></...原创 2020-11-13 16:58:08 · 7178 阅读 · 3 评论 -
vue项目配置代理devServer解决跨域问题(开发环境使用)
在@vuecli3或4搭建的项目中:在vue.config.js中配置devServer选项devServer: { // host: 'localhost', port: 8090, //项目运行的端口号 open: true, //配置自动启动浏览器 proxy: { "/opAdmin": { target: "http://116.66.65.193:8081", //对应自己的接口 changeOrigin: t原创 2020-10-26 10:07:15 · 9174 阅读 · 0 评论 -
vue实现浏览器打印功能 vue-print-nb
1.安装依赖:npm install vue-print-nb --save2.引入插件:import Print from 'vue-print-nb'Vue.use(Print);3.1 简单使用: <div id="printMe" style="background:red;"> <p>葫芦娃,葫芦娃</p> <p>一根藤上七朵花 </p> <p>原创 2020-09-25 18:25:34 · 1097 阅读 · 0 评论 -
moment时间格式化插件用法,非常方便,推荐
1.安装依赖:npm install moment2.引入:var moment = require('moment');或者importmomentfrom"moment"3.使用:前面是方法,后面是结果moment() :Thu Aug 20 2020 18:42:02 GMT+0800moment().toDate() :Thu Aug 20 2020 18:42:02 GMT+0800 (中国标准时间)moment()==moment().toDate() :false...原创 2020-09-16 16:45:20 · 1852 阅读 · 0 评论 -
vue v-for循环的key值使用经验及采坑总结
必要性:vue v-for循环时一定要加key值,vue官方也说一定要加,这和vue渲染机制和更新机制有很大关联.不加key的话eslint或vuter也会报错.使用方法:1.一般可以使用索引充当key值(不涉及节点增删时),不过最好使用数组中的对象中的唯一键作为key.即[{id:xx,...},{id:xxx,...}]中的id作为key.这可避免节点增删时出现数据或其他错误(本人就踩了一次坑,使用了索引导致数据出错)。或者循环数组自定义一个key值,key='key' + i++.原创 2020-08-13 09:27:16 · 4083 阅读 · 0 评论 -
vue-cli3.x 4.x通过devServer配置代理解决跨域问题
在vue.config.js中配置devServer项目,如下:可以配置多个代理地址 devServer: { // open: process.platform === 'demo', // host: 'localhost', // port: 8080, // open: true, //配置自动启动浏览器 proxy: { "/opAdmin": { target: "http://116.65.61.193:8081",原创 2020-08-03 10:12:23 · 1355 阅读 · 0 评论 -
七牛云上传图片element的upload组件
步骤:后端使用AccessKey,SecretKey,Bucket生成token给前端 前端使用Domain和后端返回的token去调用qiniu的SDK上传文件解释:AccessKey,SecretKey:秘钥,在这里可以查看到https://portal.qiniu.com/user/keyBucket:存储空间,在这里可以查看到https://portal.qiniu.com/kodo/bucketDomain:存储空间Bucket对应的域名,通过这个域名和一个key值可以原创 2020-07-31 15:22:42 · 894 阅读 · 0 评论 -
axios之cancelToken取消上一次的请求
有时候多次点击按钮发送请求需要取消上一次的请求,这时候可以使用cancelTokensubmit(){ //this.cancel1() //使用this.cancel1()取消请求 this.cancel1?this.cancel1():'' //如果上次请求没结束,就先取消上次的请求 let self=this this.$axios .get("/statistics/getAllFlowBySite", { params: d原创 2020-07-17 10:27:27 · 1127 阅读 · 0 评论 -
vue中keep-alive组件失效,父子组件嵌套,子组件失效
需求是:后台管理系统各个子组件都要能缓存,tab切换不重新刷新,如下由于父子组件嵌套,父组件infoManage下面包含了companyManage,site,siteOperate等组件,而且每个组件都有配置name属性,和router配置的name也是相同的,但最后就是没有缓存下来,后面配置父组件的name属性 父子组件的路由配置:{ path: '/infoManage', name: 'infoManage', meta: { title:"信息管理...原创 2020-07-08 16:40:52 · 5789 阅读 · 3 评论 -
echart和v-chart设置省市地图
1.安装依赖按照官方文档安装引入https://v-charts.js.org/#/2.页面中使用<template> <div class="middleview"> <div class="maps"> <div class="tit flexcc"> <img src="@/assets/img/posi.png" alt="title" /> <span>{{原创 2020-06-24 17:57:44 · 5005 阅读 · 2 评论 -
日历日程安排表格calendar
自定义vue日历组件,可用于日程安排,人员分工组件:引用了moment插件和iview的日期选择组件<template> <div class="canlendar-container"> <div class="time-selector"> <slot name="otherOperate"></slot&...原创 2020-03-04 10:44:53 · 3130 阅读 · 1 评论 -
vue-html5-editor插件png图片上传失败解决方法
jpg可以正常上传,png就会上传失败.这是因为开启了图片压缩,导致Content-Type:image/jepg,以及内部文件编码问题.只需要将压缩参数配置设置为null即可以下是上传png图片时开启压缩时:compress:{width:1600,height:1600,quality:80},...原创 2019-11-18 19:38:37 · 1461 阅读 · 0 评论 -
vue-cli3移动端适配插件
1.安装2个插件:npm i lib-flexible postcss-px2rem -D2.在vue.config.js中添加这项配置:css: { loaderOptions: { css: {}, postcss: { plugins: [ ...原创 2019-10-17 14:39:59 · 666 阅读 · 0 评论 -
vue之watch(watch的高级用法)
watch主要是监听data或props中的值的变化,但是如果这个值是一个对象,对象内的某个属性发生了改变,有可能会监听不到变化,此时的解决办法是:将代码一改写为代码二代码一:(普通写法)watch: { obj(newValue, oldValue) { //do something console.log(newValue,oldValue) } }代码二:...原创 2019-05-30 11:38:40 · 1839 阅读 · 0 评论 -
vue组件传值之bus(多用于兄弟组件传值)
1.在main.js中,new一个空的vue挂在到vue原型上:Vue.prototype.$bus = new Vue();2.在demo.vue中使用bus发送数据(可以通过点击事件触发)this.$bus.$emit("sendData",{data:"需要发送的数据"})3.在另一个test.vue中接收数据(可以写在created生命周期函数中)this.$bu...原创 2019-05-30 10:56:40 · 3007 阅读 · 0 评论 -
vue项目中使用地址选择插件v-distpicker,省市区三级联动选择
步骤:1.npm install v-distpicker --save2. import VDistpicker from 'v-distpicker'3.export default { name:"demo", components: { VDistpicker }, methods:{ sel: function(dat...原创 2018-08-01 17:41:41 · 8565 阅读 · 5 评论 -
vue之slot插槽
vue之slot插槽使用原创 2019-05-30 14:10:15 · 1102 阅读 · 0 评论 -
vue项目刷新当前页面最优解决方式
一般刷新页面可以用location.reload(true),history.go(0) 等方法,但是这对vue项目很不友好,会是页面重新加载,出现暂时性的空白,而且耗费性能,所以vue项目最好不用这些方法,下面介绍2种更好的方法.方法一:带上当前页面路由跳转到一个重定向的页面,重定向页面再跳转回来.新建refresh.vue<script>export defaul...原创 2019-08-19 18:06:55 · 9300 阅读 · 5 评论 -
安卓和iOS移动端调试工具vconsole使用
有时候要在移动端调试项目通过alert很不方便,而vconsole.js就可以解决这个问题.它相当于谷歌浏览器的devtools,只是比pc端的要简陋一些.原生js使用:在<header>头部引入:<script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></scr...原创 2019-09-02 16:59:05 · 7504 阅读 · 0 评论 -
vue中element UI可折叠式导航菜单(导航列表根据后台数据渲染-动态加载导航菜单)
版本一:可折叠式,数据前台自定义<template> <div id="index"> <el-aside width="152px" class="asideNav"> <el-menu :default-active="defaultActive" class="el-menu-vertic原创 2018-11-14 17:48:20 · 25265 阅读 · 1 评论 -
vue项目中不使用mock也可以模拟数据
一般使用mock模拟数据更好,但是还有一个方法临时模拟一下数据,使用webpack-dev-server去模拟服务器(原理是node的express中的中间件设置路由),具体操作如下:先在根目录中的vue.config.js中书写如下代码: module.exports = { publicPath: './', assetsDir: 'static', configur...原创 2019-05-30 10:35:15 · 1571 阅读 · 0 评论 -
vue项目中使用粒子插件
效果如下:1.安装依赖:npm install vue-particles --save-dev2.main.js引入import VueParticles from 'vue-particles'Vue.use(VueParticles)3.项目中使用 <vue-particles color="#dedede" :...原创 2019-01-23 16:27:01 · 799 阅读 · 0 评论 -
vue导航栏通过接口数据遍历动态生成
要做权限管理,导航栏需要根据不同身份来动态生成,实例如下: <el-menu :default-active="defaultActive" class="el-menu-vertical-demo" router active-text-color='#29A88D' ...原创 2018-08-22 11:22:11 · 8150 阅读 · 7 评论 -
vue 图片下载到本地,图片保存到本地
必须同源(访问的网站域名与服务器域名一致)才能下载downs() { var alink = document.createElement("a"); alink.href = this.shop.shoppic_url; alink.download = "pic"; //图片名 alink.click();}, 解决图片不同源下载问题:downloadIa...原创 2018-08-13 16:04:07 · 51328 阅读 · 24 评论