vue
文章平均质量分 58
君归乐
这个作者很懒,什么都没留下…
展开
-
获取街道、镇级的地图geoJson数据方法,使用echarts绘制出街道、镇级的地图区域画面(中山市为例)
1、在echarts上绘制市级以下的区、县的区域地图。2、在市级下很多都是有区、县的区域,而少部分是不存在区、县的,是直接市下面一级就是街道、镇级别的区域。3、统一管理区域数据,有区县的市直接拿区县的geoJson数据,没有区县的市级直接拿街道、镇级的geoJson数据来绘制区域地图。...原创 2022-06-08 15:54:34 · 16560 阅读 · 10 评论 -
通过JsBridge进行app与webview通信(Android版)
通过JsBridge进行app与webview通信(Vue版)一、问题现在很多app都是嵌套h5页面的混合型app,实现方式就是app加一个webview,webview加入h5的项目地址,那么有时候我们需要获取设备id、获取定位等等信息,都是h5获取不了的,这时候就需要app与h5建立一个通信,实现信息传输,我们可以使用JsBridge来实现这个需求。二、JsBridge通过JsBridge,Web端可以调用Native端的Java接口,同样Native端也可以通过JsBridge调用Web端的J原创 2022-03-13 16:51:43 · 7776 阅读 · 1 评论 -
通过JsBridge进行app与webview通信(Vue版)
一、问题现在很多app都是嵌套h5页面的混合型app,实现方式就是app加一个webview,webview加入h5的项目地址,那么有时候我们需要获取设备id、获取定位等等信息,都是h5获取不了的,这时候就需要app与h5建立一个通信,实现信息传输,我们可以使用JsBridge来实现这个需求。二、JsBridge通过JsBridge,Web端可以调用Native端的Java接口,同样Native端也可以通过JsBridge调用Web端的JavaScript接口,实现彼此的相互调用。了解JsBridg原创 2022-03-13 00:04:15 · 9362 阅读 · 1 评论 -
vue+ssr+koa实现,首屏快速展示以及seo优化
这里是引用提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录一、问题二、SSR是什么?(服务器端渲染)二、搭建步骤1.创建普通vue2项目2.下载相关依赖包3.代码改造1.改造src/main.js2.增加src/client.js3.增加src/server.js2.读入数据总结一、问题 当我们平时开发vue项目,开发到一定程度的时候,内容会越来越多,打包出来的包会越来越大,亦或者首页加载的资源很多,导致用户首次加载项目页面的时候会有一段时间白屏,给人的交互不好.原创 2022-03-04 19:18:52 · 2154 阅读 · 10 评论 -
vue打包后白屏在ie浏览器下报strict 模式下不允许一个属性有多个定义(app.js (1,72152))
strict 模式下不允许一个属性有多个定义如下图:在ie浏览器下是不允许一个属性有多个定义的:找出属性的位置的方法直接点击进去就会定位到属性的位置了那么我们找它附近的代码,看看属于哪个地方的,然后直接用vscode全局查找就可以找到大概的位置是在哪里了。...原创 2021-03-23 09:59:17 · 564 阅读 · 1 评论 -
使用html2canvas截图不全的问题,滚动条拖动问题
使用html2canvas截图不全的问题,滚动条拖动问题在处理之前,如果页面很长,需要把滚动条置顶,在进行方法调用window.pageYoffset = 0;document.documentElement.scrollTop = 0;document.body.scrollTop = 0;、、部分代码 window.pageYoffset = 0; document.documentElement.scrollTop = 0; document.body.原创 2021-03-09 16:33:26 · 2293 阅读 · 6 评论 -
解决input输入框type设置为number,maxlength无效,可以无限输入内容的问题
问题input输入框type设置为number,maxlength无效解决方案:添加oninput<input type="number" oninput="if(value.length>10)value=value.slice(0,10)" />原创 2021-03-09 16:18:22 · 1371 阅读 · 1 评论 -
解决vue多次打包后出现浏览器缓存的问题
解决vue多次打包后出现浏览器缓存的问题每次打包更新版本上传到服务器上,会偶尔出现代码没有更新还是旧代码的逻辑,这就代表浏览器存在缓存的问题了。解决方案vue-cli2webpack .prod.conf.js 下修改outputconst Timestamp = new Date().getTime();output: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunk原创 2021-03-09 14:55:29 · 1705 阅读 · 1 评论 -
前端使用base64编码进行pdf预览以及触发浏览器打印功能(解决操作iframe打印发生的跨域问题)
公司有个需求是,在页面显示pdf文件,并有一个button点击打印pdf就会触发print打印弹出打印预览框小编使用的技术栈是vue(其他技术也是这种思想)1、安装print-jsnpm install print-js --save2、使用iframe标签显示pdfbasedata:base64编码<!--basedata为base64编码--><iframe ...原创 2020-03-22 01:12:07 · 8230 阅读 · 1 评论 -
解决uniapp打包h5后的静态资源指向问题
解决uniapp打包h5后的静态资源指向问题普遍的uniapp h5静态资源文件打包路径都是/static/下的但是我们有时候需求是放到线上的时候访问的路径是/xxx/static/的以下例子打包后静态资源指向问/h5/static解决方案1:在mainfest.json文件里面“h5配置”设置解决方案2在mainfest.json文件里面“源码视图”设置结果打包出来的路径...原创 2020-03-22 00:26:16 · 13380 阅读 · 0 评论 -
uni-app底部输入框被软键盘部分挡住的解决方案
前提要引入uni.css解决方案在输入框加上class=“uni-input” 和cursor-spacing=“0”(一定要两个一起加上,不然还是会挡住部分的)<input class="uni-input" cursor-spacing="0"/>cursor-spacing指定光标与键盘的距离,单位 px 。取 input 距离底部的距离和 cursor-spac...原创 2020-02-24 10:39:44 · 8952 阅读 · 9 评论 -
VueX的使用(笔记)
vuex介绍Vuex 是一个专门为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。应用场景当应用遇到多个组件共享状态的时候vuex和本地存储的区别vuex可以实时改变状态值的状态,而本地存储不行vuex刷新页面后状态值会消失,而本地存储不会消失vuex的使用1.安装vuexnpm instal...原创 2020-02-18 17:29:08 · 135 阅读 · 0 评论 -
vue中路由vue-router的使用和生命周期
vue-routerVue Router 是vue.js官方的路由管理器。它和vue.js的核心深度集成,让构建单页面应用变得易如反掌。vue-router的使用1.在项目src文件夹下新建名为router的文件夹2.在router文件夹下新建index.js3.在main.js中配置使用vue-router跳转传参1.query2.params3.采用url传参vue-...原创 2020-02-18 12:40:36 · 3508 阅读 · 1 评论 -
vue-cli创建脚手架项目流程
1.创建名为test的vue脚手架项目进入到你要创建项目的文件夹下按shift+鼠标右击选“在此处打开PowerShell窗口”,然后输入:vue init webpack 项目名创建成功2.运行项目cd到test项目里面运行npm run dev结果...原创 2020-02-17 23:09:55 · 101 阅读 · 0 评论 -
uni-app中的#ifdef #ifndef #endif的用处,可以处理兼容多端平台
1.#ifdef #ifndef #endif三者的意思#ifdef仅在某个平台上使用#ifndef在除了这个平台的其他平台上使用(非此平台使用)#endif结束条件编译2.平台标识的意思标识平台APP-PLUS5+AppMP微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序MP-WEIXIN微信小程序...原创 2020-02-17 22:05:27 · 18611 阅读 · 1 评论 -
在vue中使用element-ui的form表单组件中遇到的resetFields()重置之后字符串不为空的问题
关于element-ui的form表单组件中遇到的resetFields()的问题当做项目编辑修改form表单的时候,点击重置resetFields()方法后还是原来编辑的时候的值,form表单的值没有被清空首先:resetFields()方法的目的是给表单赋初始值。正常的写法这个初始值是在form表单的生命周期的mounted的时候被赋初始值的。所以在form表单的生命周期的moun...原创 2020-01-30 18:08:13 · 1769 阅读 · 0 评论