vue
灬风吹雨
这个作者很懒,什么都没留下…
展开
-
js-h5打开手机内置腾讯地图app
var mapUrl_tx = "http://apis.map.qq.com/uri/v1/marker?marker=coord:"+lat+","+lon+";title:" + 标题 + ";addr:" + 地址名称 + "&referer=yellowpage";console.log("mapUrl_tx"+mapUrl_tx);原创 2021-03-18 14:52:10 · 1059 阅读 · 0 评论 -
web及h5上下翻页功能
实现上下翻页效果可以使用轮播图辅助实现,这里使用element-ui,其它插件使用方法类同。html代码: //:autoplay="false"不自动播放 :loop="false"不循环 direction="vertical"轮播为数值方向<el-carousel ref="goupdown" height="100%" direction="vertical" :autoplay="false" :loop="false"> <el-carousel-it原创 2021-03-08 15:40:47 · 1967 阅读 · 0 评论 -
前端页面特效(持续更新)
1、vue项目页面展开特效项目资源地址:点击前往。原创 2021-03-06 20:41:39 · 523 阅读 · 0 评论 -
vue路由权限控制
在路由.js文件中全局守卫router.beforeEach添加router.beforeEach((to, from, next) => { let access = [ //当前权限列表 ] if (canTurnTo(to.name, access, routes)){//routes当前路由列表 console.log("当前有权限") next() // 有权限,可访问 }else{ console.log("当前无权限") next()原创 2021-02-19 12:02:09 · 300 阅读 · 1 评论 -
h5页面中使用js获取手机类型
var phone = navigator.userAgent; console.log(phone); if (phone.indexOf('Android') > -1 || phone.indexOf('Linux') > -1) { console.log("安卓手机"); } else if (phone.indexOf('iPhone') > -1) { console.log("苹果手机"); } else if (phone.indexOf('Wi.原创 2021-01-20 11:41:31 · 799 阅读 · 0 评论 -
vue使用变量赋值标签样式
vue使用变量赋值标签样式如在小程序使用中,不同手机状态栏高度不同,标签要定位在状态栏下方20rpx的位置,无法直接使用固定的高度定位。可以看出,这里需先确定状态栏的高度,使用状态栏高度转rpx后加上20即为定位的数值,距顶距离需要使用变量赋值。解决方法设定基本样式<view class="aaa" :style="runtop"> </view>//css.aaa{ position: absolute; }//jsdata() { return {原创 2021-01-19 11:56:19 · 932 阅读 · 0 评论 -
小程序获取手机状态栏高度
小程序获取手机状态栏高度获取高度let res = uni.getSystemInfoSync();res.statusBarHeight即为状态栏高度使用获取状态栏高度为单位为px,小程序中一般使用rpx,这里可以做转换处理。res = (res.statusBarHeight + 44)/(uni.upx2px(res.statusBarHeight + 44)/(res.statusBarHeight + 44))这里默认自定义导航栏高度为44,可自行定义。若使用吸顶操作,res即为吸顶原创 2021-01-19 11:39:22 · 1256 阅读 · 0 评论 -
组件中对象传值
数据加密let data = { a: a, b: b}//定义对象数据data = JSON.stringify(data)//转换数据格式,直接加密无法正常解密data = escape(data)//数据加密数据解密let data = unescape(this.$route.query.data)//数据解密data = JSON.parse(data)//转换为对象数据附:js获取导航栏键名对应的数据//获取导航栏参数function getUrlParam (n原创 2020-11-25 13:30:06 · 246 阅读 · 0 评论 -
vue上传图片至又拍云
vue项目中上传图片至又拍云使用的是官方的FORM API方法,官方链接:https://help.upyun.com/knowledge-base/form_api/#old-authorization。图片的上传过程中主要用到的参数为file,policy、signature,file这里直接使用的element-ui上传组件。policy主要参数,参考官方链接:https://help.upyun.com/knowledge-base/form_api/#upload_args。从官方链接中可以看原创 2020-11-04 15:41:58 · 863 阅读 · 0 评论 -
使用electron将项目封装为桌面版
1、下载electron工程可通过git命令克隆:git clone git@gitee.com:yzhaof/electron.git,或者前往页面直接下载:https://gitee.com/yzhaof/electron。工程拉取完成后,需使用npm install命令安装所需的依赖。2、项目打包将要封装的项目打包,并将打包后的文件放入克隆下的工程文件中,替换其中index.html。3、配置package.json配置封装命令。添加"pack": “electron-packager .原创 2020-11-02 17:07:12 · 272 阅读 · 0 评论 -
vue中web手机端的适配问题
vue中web手机端的适配问题在使用vue进行web手机端适配时可以使用rem做单位进行适配。rem为相对单位,是相对HTML根元素的字体大小为基准计算大小。如设置html:{font-size:16px},那么p{font-size: 1rem}的字体大小就为16px。所以使用rem进行适配的大体思路就为:根据屏幕的大小调整html元素的字体大小。//这里使用的vuecreated() {//获取html var html = document.getElementsByTagNam原创 2020-09-02 10:58:01 · 2758 阅读 · 0 评论 -
常用但易忘的基础css样式
text-indent: 2em; //首行缩进//设置屏幕宽度小于等于767px时的样式@media screen and (max-width: 767px){.main{}}//区间@media screen and (max-width: 767px) and (min-width: 700px)outline: medium; //取消输入框点击高亮border: 1px solid #eee; //实线,dotted点状,double双线,dashed虚线//网格背景ba原创 2020-08-21 20:17:24 · 200 阅读 · 0 评论