移动端
文章平均质量分 58
Zh.冠军
这个作者很懒,什么都没留下…
展开
-
vue--后端接口返回pdf的url通过iframe预览
一、vue代码//frameborder 是否有边框 0:无边框 1:有边框//scrolling 是否有滚动条 no:无 yes:有 auto:自动注意:开发环境加上后端ip 正式环境不用加<iframe :src="'/static/jsPDF/web/viewer.html?file=http://192.168.105.42:9090'+encodeURIComponent(url)" width="100%" height="100%" frameborder="0原创 2021-07-06 17:32:01 · 1153 阅读 · 0 评论 -
vue + vant 使用阿里图标库
一、下载阿里图标库至本地二、解压之后,将文件放到assets目录下,font目录名随便起三、main.js引入iconfont.css样式 import '@/assets/font/iconfont.css'四、要使用某图标,打开iconfont.css文件,找到以下两个内容,只需要这两个字符串放入标签中(第一个字符串不变,第二个字符串决定你使用哪个图标) <i class="iconfont iconyanjing" ></i> <!--运用--原创 2021-06-10 15:31:57 · 1979 阅读 · 0 评论 -
vue +PDF.js实现pdf预览和下载
一、导入pdf.js插件,放到static目录下二、点击官方文件预览pdf三、预览效果四、【注意】1、在和后端交互时,后端应返回全地址:eg:http://192.168.105.42:9090/Files/Documents/2021-5/P2021F2内外0015CN0002/InFile/P2021-0020办理登记手续通知书2021-04-292020-02-26BLDJSXTZS.20210510164849702.pdf2、前端将请求到的全地址拼接到file=后面,此时①若原创 2021-06-03 11:40:14 · 2341 阅读 · 0 评论 -
vue + vant移动端预览PDF
一、下载依赖npm install pdfjs-dist --save二、页面代码 <template> <div class="container"> <!--预览--> <div class="goback1"> <div class="goBtn"> <van-nav-bar title="PDF预览" left-arrow @click-left="goBack" /&原创 2020-09-24 18:32:54 · 8289 阅读 · 2 评论 -
v-for遍历每行展示两个
<van-row type="flex" justify="space-around" class="info_0" v-for="(item,index) in listTemp" :key="index"> <van-col span="6" class="info_4" v-for="(cell,i) in item" :key="i" ><span v-if="cell.s_CurrencyName">待缴官费金额({{cell.s_Curr...原创 2020-08-18 16:35:07 · 2293 阅读 · 0 评论 -
移动端判断安卓和ios
var u = navigator.userAgent; alert(u) if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机 alert('安卓') } else if (u.indexOf('iPhone') > -1) {//苹果手机 alert('ios') }参考文件原创 2020-08-14 17:11:13 · 240 阅读 · 0 评论 -
iphone小黑条遮挡底部导航
一、底部导航被遮挡二、在index.html的meta标签加viewport-fit=cover属性<meta content="viewport-fit=cover,width=device-width,user-scalable=no,initial-scale=1" name="viewport">三、效果图:原创 2020-08-11 09:54:01 · 298 阅读 · 0 评论 -
移动端,模态框显示时出现点透
问题:列表展示的数据较多,设置滚动条。当模态框出现,touchmove时列表的滚动事件还可触发。思路:让弹窗显示时,阻止列表的滚动事件,弹窗关闭时,重新恢复列表的滚动原创 2020-08-10 16:59:08 · 100 阅读 · 0 评论 -
Antv F2对比折线图,对数据保留两个小数后,y轴显示有误
接口调成功之后,对数据fixed(2)进行处理,显示如图:正确方式:在实例化Antv对象,载入数据源时对y轴渲染单独设置 totalFee: { tickCount: 4, min: 0, formatter: value => { //y轴显示 数字+w return (value/10000).toFixed(2) + 'w'; } 效果图:...原创 2020-08-05 19:22:00 · 1891 阅读 · 1 评论 -
移动端input聚焦,页面垂直主动滚动
input聚焦,页面垂直主动向上滚动。显示其余input框和登录按钮,增加客户体验度 document.body.scrollTop = 150原创 2020-08-05 19:00:50 · 596 阅读 · 0 评论 -
Vue+ Antv F2层叠柱状图
一、 创建canvas标签 <canvas id="caseChart" style="width: 100%;height: 230px;"></canvas>二、 编写图表绘制代码 methods:{ //获取专利案件Chart图标信息 getCaseChartData(){ var _this = this; var params = { dataType:_this.caseDataType, begi原创 2020-08-04 14:41:29 · 1288 阅读 · 0 评论 -
vue打包之后文件过大
一、vue路由懒加载二、取消生成map文件,找到config/index.js ,修改为false三、在index.html中,通过cdn引入库文件四、按需引入原创 2020-08-03 18:31:00 · 418 阅读 · 0 评论 -
vue前端分页
vue-easytable 后端一次行将数据返回来,前端实现分页。当然后端分页做起来更容易些。前端分页一次性拿到所有数据,要根据 pageIndex和 pageSize以及 total通过前端计算来决定每一页展示哪些数据 <div class="mt20 mb20 bold" style="margin-top:10px;"> <v-pagination v-on:page-change="pageChange" v-on:page-size-原创 2020-07-31 19:33:14 · 9550 阅读 · 2 评论 -
vue移动端使用vue-easytable
一、黑屏终端 npm install vue-easytable --save-dev二、main.js引入 import 'vue-easytable/libs/themes-base/index.css' // 引入样式 import {VTable, VPagination} from 'vue-easytable' // 导入 table 和 分页组件 Vue.component(VTable.name, VTable) // 注册到全局 Vue.compon原创 2020-07-07 20:18:59 · 4325 阅读 · 8 评论 -
vue+ vant + antv开发H5页面,图表在iphone不显示
在安卓手机上可以正常显示,苹果手机上图表展示不出来。方案排除:一、一开始以为是前后都数据交互时,数据没有请求完就开始调取创建 Chart 对象,载入数据源,渲染图表的函数。但,我在vue中当请求数据时,调了另一个函数绘制图表的方法_this.$options.methods.caseChart.bind(this)();,排除二、vue开发移动端在手机实时预览1、电脑和手机连接同一个WiFi2、查询电脑本地IP 地址(WIN + R ,输入 cmd 回车,打开命令提示符,输入 config ,查看原创 2020-07-23 15:34:06 · 1686 阅读 · 0 评论 -
vue中带有__ob__: Observer的数组无法遍历的问题
JSON.parse(JSON.stringify(this.caseData))原创 2020-07-20 19:51:09 · 2539 阅读 · 0 评论 -
vue移动端获取当前时间之后的几天时间
一、main.js封装函数Vue.prototype.$getDays = function(num){ var date = new Date(); //当使用setDate()之后,date对象就发生了改变,所以之后getDate()就能获取到指定的日期 //这里的num就是要加的天数,减也可以。 date.setDate(date.getDate() + num) let year = date.getFullYear() //年 let原创 2020-07-15 12:05:56 · 1479 阅读 · 0 评论 -
移动端键盘弹起底部固定布局被顶上去
问题:移动端登录页面布局,将div固定到底部,input点击获取焦点时,在移动端上软键盘弹起时就会把这些固定到底部的布局顶上去。解决办法: <van-row v-show="isOriginHei"> <p style="position: fixed;bottom:20px;left:0;right:0;">Powered by xxxx信息技术有限公司</p> </van-row> export default{ data(){ r原创 2020-07-14 19:38:27 · 1392 阅读 · 0 评论 -
localStorage 设置过期时间
需求:登录,校验通过后生成token,默认6小时失效,若记住登录状态则30天内有效一、封装localStorageSet函数 localStorageSet(name, data, expire){ const obj = { data, expire }; localStorage.setItem(name, JSON.stringify(obj)); }二、函数调用 let expire = new Date().getTime(原创 2020-07-10 18:50:12 · 609 阅读 · 0 评论 -
移动端页面禁止缩放
<meta content="width=device-width,user-scalable=no,initial-scale=1" name="viewport">原创 2020-07-13 19:12:44 · 594 阅读 · 0 评论 -
vue开发移动端Antv-f2的使用
AntV 是蚂蚁金服全新一代数据可视化解决方案,致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。F2 是一个专注于移动,开箱即用的可视化解决方案,完美支持 H5 环境同时兼容多种环境(Node, 小程序,Weex),完备的图形语法理论,满足你的各种可视化需求,专业的移动设计指引为你带来最佳的移动端图表体验。一、黑屏终端 npm install @antv/f2 --save二、main.js中全局引入 import F2 from '@antv/f2' Vue.prototyp原创 2020-07-07 19:59:09 · 1907 阅读 · 0 评论 -
vue适配移动端
vue-cli搭建好项目框架后,在目录结构的index.html文件中添加如下代码: fnResize() window.onresize = function() { fnResize() } function fnResize() { var deviceWidth = document.documentElement.clientWidth || window.innerWidth if(deviceWidth >= 750) { deviceWid原创 2020-07-07 19:29:06 · 145 阅读 · 0 评论