2 豆子麻麻

尚未进行身份认证

我要认证

不想苦一辈子,就要苦一阵子,扛得住艰难,才能配得上梦想!

等级
TA的排名 11w+

图片403问题

今天在开发项目的时候遇到一个很奇葩的问题,就是从后台读取一个图片列表,这个图片路径是完整的,但是页面渲染的时候就报403,起初我以为是vue的渲染机制的问题,后来怎么改也没有弄好。网上百度了一下,才知道问题的解决方法:直接上图:解决方法就是在index.html中添加一行代码就正常了。<meta name="referrer" content="no-referrer">...

2020-02-21 15:34:20

vue如何判断v-if中的DOM元素渲染完毕?

vue如何监听符合v-if条件的dom元素渲染完毕,然后才能进行后续的操作,但是如何才能知道当前DOM元素已经渲染完毕了呢?今天在开发一个评论列表的时候一直有这个问题,使用了各种监听,还是不行,最后使用了$nextTick的回调,才解决了问题。需求如下:以上评论列表中,点击一条评论内容弹出评论框进行评论,需要使得输入框自动聚焦并且在手机浏览器中弹出键盘, 实现代码如下:...

2020-02-18 22:47:49

【未完待续】h5页面在移动端所遇到的问题总结

描述:近期在做一个移动端的教育项目,需要全部用h5开发,然后借助android和ios打包成app。目前是页面开发并联调完毕,但是被移动端装到壳子里的时候遇到了各种各样的问题,现在做一个总结,以防后期遇到。问题一:装到壳子里之后,有的手机有刘海,页面会被手机刘海遮挡住问题二:在PC浏览器模拟器中存在滚动条的时候,页面滚动流畅,但是在手机上的时候,会不流畅【解决办法】在有滚动...

2019-11-01 14:27:27

【未完待续】h5 和 Android & IOS交互

在开发h5项目的时候,使用到了个人中心上传头像的功能,由于使用原生的调用手机相册相机的功能<input type="file" id='image' accept="image/*" capture='camera' name="file"><input type="file" name="file" style="margin-top:20px;">andro...

2019-10-29 17:08:25

锚点定位的问题

在开发h5页面的时候,遇到一个锚点定位的问题,需要实现的功能如下:上面这个页面需要在手机上实现1)点击“简介”、“详情”、“推荐”时,页面滚动到相对应的位置2)当手滑动屏幕,到相应位置时,头部导航相对应的tab高亮显示首先,实现第一个功能,给每个对应的div增加相应的id="anchor_",代码如下:以上,是实现点击导航,滚动到锚点的代码。实现滑动屏幕到相应...

2019-10-29 16:53:16

h5结合vant框架,实现列表上拉加载下拉刷新

最近在做h5移动页面开发,并且需要用移动端android和ios将h5嵌进去。在开发过程中,使用了vant这个框架;vant文档:https://youzan.github.io/vant/#/zh-CN/intro该项目中根据后台API拿到的数据包含分页信息,首先需要用到vant框架中的van-pull-refresh和van-list <!-- 列表组件&...

2019-10-29 15:09:11

vue调用组件遇到的坑

今天再用element-ui的el-tab调用不同的组件时遇到一个奇怪的问题,上述图片中,一个组件被重复渲染了多次,代码如下:<el-tabs ref="tabRef" v-model="activeName" @tab-click="handleClick"> <el-tab-pane v-for="item in options.ta...

2019-05-13 16:50:34

element-ui使用问题总结

1、el-input@keyup事件不生效【解决】<el-input placeholder="请输入内容" v-model="content" clearable @keyup.enter.native="search"> </el-input><el-input placeholder="请输入内容" v-model="content" clear...

2019-05-07 09:34:49

G6根据数据绘流程图

最近有一个这样的需求,就是根据一个流程绘制一个流程图,记录自己当前所处的状态。之前有看过同事用g6,今天自己也尝试着用了一下,然后整理下,写了这个博客记录下。效果图:参考文档的链接是g6官网:https://antv.alipay.com/zh-cn/g6/3.x/demo/flow/dagre.html我是把这个代码拷贝然后做了部分修改的npm需要安装的是npmin...

2019-05-06 15:50:26

vue-amap根据地址回显地图并mark

实现了地图选址功能后,现在来实现一个根据地址回显地图并标记的功能,效果图如下:直接上代码:main.js中引入import Vue from 'vue'import VueAMap from 'vue-amap'import App from './App'import router from './router'Vue.config.productionTip = fa...

2019-04-30 11:03:27

地图选址功能完善1

昨天实现的地址选址功能发现一个bug,有时候会报以上错误,有时候又是正常的,感觉好像是加载顺序的问题,然后查了好半天文档,发现在main.js中,Vue.use(VueAMap)在以上一行代码之前加入一个localStorage.clear();就好了,目前没有出现什么错误,如果后续发现bug再来完善。来来来,上代码:main.js文件import Vue...

2019-04-30 10:53:23

地图选点功能

在详设阶段,需要实现地图选点,这个自己之前从来没有实现过,现在来实现一下,这个过程中参考了高德地图的官方开发文档和vue-amap文档,地址链接分别如下:高德地图官方文档:https://lbs.amap.com/api/javascript-api/example/map-lifecycle/map-showvue-amap文档:https://elemefe.github.io...

2019-04-29 10:56:55

软键盘的实现

在详设中,遇到了需要实现软键盘的地方,要实现的效果图如下实现的代码如下:<template> <div class="myIndexWrap"> <div class="keyboardWrap"> <h3>软键盘</h3> <input class="myInput" type...

2019-04-29 10:41:36

vuex状态管理

今天看了vuex的API,自己写了一个case,然后发现,其实这个vuex也不难,反而很好用,现在整理成博文以便以后查阅。一个项目,如果需要用到这个vuex状态管理工具的话,需要先安装:npm install vuex --save通常,我们需要在项目中的src文件夹下创建一个store文件夹,然后再index.js中引入vuex,如下图store/index.js代码如下...

2019-04-19 17:44:50

vue 列表实现选中,全选功能

话不多说,直接上代码,挺简单的,但是还是记录下来吧<template> <div class="container"> <div class="cartList"> <div class="cartItem" v-for="item in list"> <div class="selctBtn" ...

2019-04-19 14:16:44

vue组件间的交互方法总结(边用边整理)

今天突然想总结下vue组件之间的交互方法,于是边写case边整理交互方式一:使用props 和 $emit【解析】父组件通过v-on绑定一个属性向子组件传递数据,子组件通过props接收父组件的数据; 子组件通过$emit向父组件发送一个事件,父组件通过子组件发送的自定义事件进行接收子组件传递过来的数据。 vm.$emit( “...

2019-04-17 14:20:05

BEM命名规则

解释:BEM(Block-块 Element-元素 Modifier-修饰符)规则:1、block-name--element-name2、blockName-elementName

2019-04-16 10:26:36

随笔--前端“详设”的重要性

2019.4.13周六下午,在公司进行了前端小组代码评审,这是参加工作以来自己参与的第一次真正意义上的代码评审,会上,广哥主要是想通过这次的代码评审让我们知道“详设”也就是【详细设计】的重要性。会后,我反思总结了下这次会议的主题,自己理解的所谓的“详设”,就是在拿到需求之后,自己要先思考下每个步骤应该怎么做,用什么做,即使不写成文档也要在纸上或者在脑子里想清楚,每一个需求都要想想是复杂还是自己...

2019-04-15 14:56:11

vue Treeselect 下拉树 只能选择第N级元素

今天在项目中遇到一个需求,就是vue下拉树只能选择第三级选项,为了解决这个问题,查阅了官方文档https://vue-treeselect.js.org/#disable-item-selection然后看到isDisabled属性可以禁止选择,具体实现代码如下:<treeselect :disable-branch-nodes="true" :norm...

2019-04-02 16:41:06

厉害了,flex布局

今天在修改项目bug的时候,遇到一个问题,说是热搜商品如果文字溢出的话就自动隐藏,之前用的方法比较老旧,今天尝试用了flex布局来实现,发现真的挺简单的。之前的bug如下图之前的代码如下:<p> <i v-for="item in keywords" @click="$router.push({name:'searchGoods',query:{...

2019-04-02 10:47:44

查看更多

勋章 我的勋章
  • 签到新秀
    签到新秀
    累计签到获取,不积跬步,无以至千里,继续坚持!
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 勤写标兵Lv2
    勤写标兵Lv2
    授予每个自然周发布4篇到6篇原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。