vue-js
CrazBarry
这个作者很懒,什么都没留下…
展开
-
NUXT.JS使用GEETEST极验验证
前言公司新项目为PC版的,本人一直使用VUE,思考了很久最终决定使用nuxt.js完成该项目,因为是PC端可能涉及SEO,nuxt.js就是解决vue单页面SEO的,虽然之前没接触过,但是看了看文档就是对vue的再次封装。项目的注册页要求获取短信验证码前要有个机器验证,所以我采取了geetest准备首先要注册geetest,取到一个key,类似百度地图那种的,然后后端要写一个接口返回校验的参数,类似微信分享前的验签。前端需要做的就是把gt.js下载下来,然后引用。我是在nuxt.config.js引入原创 2021-02-08 10:48:25 · 783 阅读 · 0 评论 -
qrcodejs华为手机无法识别二维码解决方法
前言现在移动端都很普遍用到生成二维码,一般都是由前端生成,当然也有后台生成返图片给你。比如生成海报,邀请二维码都有用到。我在项目中遇到的问题就是华为手机长按识别二维码会无法识别,原因大家应该也有搜百度,是应为qrcodejs生成二码后会把canvas display:none但是在华为手机不生效,微信不支持canvas长按识别,我解决的方法就是手动把canvas转图片,隐藏掉自带的那块。直接上代码。项目用的是VUE,封装的Qrcode的组件qrCode.vue<template>原创 2020-09-21 18:31:55 · 5085 阅读 · 0 评论 -
移动端跳转到百度地图并输入地址
项目里有个地址导航的,网上找了个简单的方法,点击导航直接跳到百度地图并输入目标地址,但是当前位置需要自己输入<a class="send" href="http://api.map.baidu.com/geocoder?address=深圳市体育馆&output=html&src=webapp.baidu.openAPIdemo" target="_blank">...转载 2019-06-20 15:58:01 · 1534 阅读 · 0 评论 -
vue项目使用flexible+px2rem自适应移动端
1.安装npm install lib-flexible --savenpm install postcss-px2rem --save2.视口配置<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1.0,maximum=scale=...转载 2019-04-29 16:44:15 · 612 阅读 · 0 评论 -
Vue实现价格实时计算
Vue实现价格实时计算需求分析使用属性后台返回数据格式思路参考需求分析商品有附加选购,需对多个附加选项价格进行实时勾选计算使用属性vue的computed 属性,computed 相较watch属性性能更优,watch属性多用于监听路由,况且computed 属性有名字给你叫‘计算’属性,当然是用来计算的。后台返回数据格式多选列表数据checkBoxList:[ { produc...原创 2019-03-18 18:50:10 · 4577 阅读 · 0 评论 -
移动端自适应方案
使用插件 amfe-flexible 自动将单位 px转remhttps://www.npmjs.com/package/amfe-flexible转载 2019-03-21 11:10:45 · 204 阅读 · 0 评论 -
Vue实时搜索并减少请求量实现
1. 项目需求前不久公司项目有个需求是要实现搜索框实时搜索,本来是监听手机键盘回车(@keyup , event.keyCode==13),但是客户算是比较年纪大的,喜欢用按钮点击搜索,但是项目是APP,我们设计师不妥协加按钮,最终协商要求做一个实时检索的功能。2. 实现思路以前刚接触Vue的时候知道 VUE 有个监听input 的方法@input,但是这个方法是如果用这个方法进行监听请求的...转载 2019-03-04 12:56:19 · 1180 阅读 · 0 评论 -
vue js 清除 data数据
deactivated(){Object.assign(this.$data,this.$options.data())}原创 2019-01-30 16:24:20 · 6422 阅读 · 2 评论 -
vue2页面跳转带值传参
//列表页toDetail: function(e) {var self = this;var autoID = $(e.currentTarget).attr('data-id');self.$router.push({path:"/friend-detail?userid="+autoID);// 对象this.$router.push({path: '/logi...原创 2017-08-04 20:27:48 · 11631 阅读 · 0 评论 -
vue +vue-router + es6 +webpack 高仿饿了么app
vue +vue-router + es6 +webpack 高仿饿了么app刚通过某课网的教程学习了vue高仿饿了么app,由于教程是用Vue1.0编写的,现在Vue已经更新到了2.0,所以项目遇到挺多坑的,跟大家分享一下。项目运用技术vue-clivuevue-resourcevue-routerbetter-scrollstyluswebpacksticky footer布局原创 2017-02-26 17:50:58 · 1870 阅读 · 0 评论