Vue移动端
关注
分享
扫一扫
Cici_cclu
退圈
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
{__ob__: observer}取值报错问题
{ob: observer}取值报错问题解决方案:JSON.parse(JSON.stringify( ob ))在直接对{ob: observer}访问属性时会报错，网上看到的大多数人是报undefined错误，我遇到的问题是获取成功，但是控制台报错not defined将数据打印出来看看发现res.user并不是一个对象数组，而是{ob: observer}格式百度看看{o...原创 2019-10-17 16:29:28 · 3834 阅读 · 0 评论 -
使position:fixed不与其他div重叠 ，fixed所在div高度不变和可变两种情况
由于fixed会使元素脱离文档流，让该div不与其他div重叠有两种方法高度固定的情况方法一：设置下方区域的padding-toppadding-top: XXpx方法二：设置fixed所在div的top和leftposition: fixed;top: 0;left:0;以及下方区域的margin-top高度可变的情况需要获取fixed的div的动态高度：方法一：设置设...原创 2019-10-17 16:16:55 · 4211 阅读 · 0 评论 -
Vue+高德高精度定位&IP定位+高德位置经纬度货车路线规划，实现实时路线规划
功能实现：实时获取当前位置，并规划到目的地的路线实现思路：1、定位当前位置，先精确定位，若精确定位失败则使用IP定位2、渲染地图，规划路线3、刷新当前位置，重新渲染路线规划一、引入高德地图在高德开放平台https://lbs.amap.com/api/javascript-api/guide/abc/prepare注册开发者账号并申请高德地图key高德各种demo的地址为https:...原创 2019-10-17 15:53:51 · 4289 阅读 · 2 评论 -
vue使用echarts插件画柱状图，并实现两个柱状图的切换
需求：页面中有两个条形图，通过局部导航切换查看思路：1、先实现条形图基本的样式效果2、创建两个子路由，将两个条形图分别放进子路由中3、通过在页面切换子路由一、先看看别人的代码https://blog.youkuaiyun.com/Cynthia_Yue27/article/details/81434493安装以及在main.js引入npm install echarts -Simport ...原创 2019-08-28 16:21:24 · 3092 阅读 · 2 评论 -
利用state实现表单暂时保存，离开表单填写页面时表单不会清空
需求：登记车辆信息表单中有个选项需要跳转到子页面选择车型，返回时上次填写的数据应该仍然存在思路：1、跳转页面时，检测input至少一个不为空，则保存登记信息到state，若input全为空，则不执行保存操作。2、跳转到子页，子页选择了车型，将车型信息保存到state中，跳回主页。若是通过返回键回到主页的则不执行保存操作。3、主页mounted函数中，检测state中登记信息是否不为空，不为...原创 2019-08-27 17:17:06 · 1088 阅读 · 0 评论 -
利用vue自定义指令实现输入框聚焦时改变其父元素的样式（验证码输入框）
需求聚焦时div嵌套：点击输入框1时，父组件2 的边框发生改变。实现（以图片验证码为例）HTML部分<div class="login_code" for="input"> <input type="text" maxlength="6" v-model="captchaValue" placeholder="请输入图片验证" v-code> ...原创 2019-08-27 16:44:25 · 1684 阅读 · 1 评论 -
Uncaught TypeError Cannot read property 'dispatch' of undefined
有时操作dom时，使用dispatch会报错改为：原创 2019-08-27 16:31:02 · 1719 阅读 · 0 评论 -
利用vue自定义指令与vuex解决移动端点击输入框，弹出键盘，底部导航被顶起问题
App.vue中HTML部分：<div v-show="footer"> <Footer/></div>js部分：<script>import Vue from 'vue'import store from './store/index.js'import Footer from './components/FooterGu...原创 2019-08-27 16:27:24 · 1193 阅读 · 0 评论 -
v-for报错（ Custom elements in iteration require v-bind key directives ）
https://google.com/#q=vue%2Fvalid-v-for Custom elements in iteration require ‘v-bind:key’ directivessrc\pages\Person\Second\bill.vue:13:5加入key即可原创 2019-08-19 11:11:54 · 727 阅读 · 0 评论 -
VUE情景： 一个APP，多个角色，根据角色切换导航栏（利用computed+watch、computed+getters+watch）
情景：一个APP，三种业务，6个角色，相当于将6个APP集成一个APP开发（别问我为什么着迷作，产品经理和项目经理要求的），角色太多，那么根据角色来切换导航栏，进而切换APP的效果是我觉得最容易管理的，每个角色一个版块，想要换板块就换导航，由导航指向不同的路由，但是还有一个前提是，不管是们角色他们的其他页面不同，但是个人中心是相同的。切换导航尝试了多种方式，最后方式三和方式五是可行的(原理一样)...原创 2019-08-19 11:04:05 · 6249 阅读 · 0 评论 -
Vue项目中Element UI填坑
一、安装ElementUInpm i element-ui -S在main.js文件中import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)这样就可以全局使用element组建了也可以，按需引入import 'element-ui/lib/...原创 2019-07-23 11:40:33 · 306 阅读 · 0 评论 -
正则表达式 核对input内容，手机号码、中文姓名、车牌号
在js文件中编写核对函数核对每个input是否都填写完整// 核对input是否填完整export const checkInput = (inputValue) => { for (var i = 0; i < inputValue.length; i++) { if (inputValue[i].value === '' || inputValue[i].val...原创 2019-07-31 11:53:20 · 1504 阅读 · 0 评论 -
路由跳转导致样式出错，刷新后又正常
1、加上scoped<style scoped src="../../assets/css/transport.css"></style><style scoped></style>2、避免同名样式原创 2019-07-30 09:42:00 · 961 阅读 · 0 评论 -
mint-uide tabBar监听路由变化并实现selected的相对变换
最近遇到一个问题，在使用mint-uide tabBar时，发现从主页的子页面切回另一个主页时，selected并没有跟着变化。例如，我从‘个人中心页’进入一个子页面，再从这个子页面切回‘首页’时，发现selected仍然是‘个人中心页’的值，这导致我页面切换了，但是个人中心页的导航点击了不会切换，必须先点击其他页面的导航才行。HTML标签的代码和官网差不多就不贴出来了。贴出js代码。其中...原创 2019-07-30 09:37:53 · 269 阅读 · 0 评论 -
webstorm开发的Vue项目在手机调试以及打包成apk（以及打包后页面空白问题）
一、为避免打包完成后的index.html打开空白问题，打包前需要更改下几个配置1.config下的index.js文件（解决路由路径问题）找到index.js，将 assetsPublicPath: ‘/’ 改为 assetsPublicPath: './'2.build文件夹下的util.js文件（解决图片路径问题）在if (options.extract) 中添加 ...原创 2019-07-16 17:12:15 · 2847 阅读 · 1 评论 -
base64图片验证码实现——vue移动端开发
接口是这样的axios请求函数export const reqcaptcha = (url) => { return axios({ method: 'post', timeout: 1000 * 30, url: url, dataType: 'json' }).then(res => { return res.data })...原创 2019-07-23 16:45:10 · 1193 阅读 · 0 评论 -
Vue移动端适配方案(webstorm)
@Vue移动端开发自适应解决方案(webstorm)安装lib-flexible并引入在webstorm命令行Terminal中安装lib-flexiblenpm install lib-flexible --save在项目入口函数main.js中引入lib-flexibleimport 'lib-flexible'在index.html文件中修改meta标签<meta n...原创 2019-07-10 15:50:28 · 514 阅读 · 1 评论