Web前端开发资源网 - w3h5Vue项目中阻止返回，弹出提示框，包括安卓、iOS物理返回
Deshun 发布于 4年前 (2019-12-13) 3363℃ 评论(0) 赞 (0)
在一个移动端项目中，有一个需求，在未输入内容时点击返回（包括安卓、iOS等终端设备的物理返回按钮），弹窗提示，并且阻止返回上一个页面。比较反人类的一种操作，不过只要能想到的就没有代码做不到的，在网上找到一个解决方案：mounted() { // 按需使用：在页面一进来的时候，添加一个历史记录 window.history.pu...
经验总结
记录日常工作生活中遇到的问题，技术和知识点
iOS中Mint Picker滑动时页面跟着滚动的解决方法
Deshun 发布于 4年前 (2019-12-10) 1777℃ 评论(0) 赞 (0)
项目在使用饿了么前端团队的 Mint UI 库的 Picker 和 Datetime picker 组件，iOS系统访问时会出现滑动穿透的现象。主要表现在用手指在弹出层触摸滑动时，页面也跟着滚动，严重影响体验。解决方法：1、由于 Picker 组件的滚动是用 touch 事件 + translate 实现的，所以我们可以在 Picker 弹层出现的时候禁止页面的默认滚动机制，Picker 弹层消失...
移动端手机点击input输入框聚焦不调用键盘的实现方法
Deshun 发布于 4年前 (2019-12-07) 3396℃ 评论(0) 赞 (0)
PC端开发使用 Chrome 调试时不会有调用键盘的效果，但是使用手机访问页面时，点击 input 输入框时，会自动聚焦并调用唤起系统键盘（或者说输入法）的。但是我们的需求是 点击 input 时不弹出键盘，可以使用下面的方法实现：$("").focus(function(){ document.activeEleme...
华为、荣耀系列手机自带浏览器fixed定位被遮挡的解决方法
Deshun 发布于 4年前 (2019-12-07) 4214℃ 评论(0) 赞 (0)
华为手机自带的浏览器据说使用的是腾讯X5内核，在测试时发现浏览器默认情况下方会显示一个工具栏，上滑会自动隐藏全屏显示。这种浏览器会把 position: fixed 属性固定定位在下方的元素遮住，无法正常显示。目前我使用小米手机没有发现这样的问题，不知道 iPhone 、OPPO、vivo、魅族、锤子、一加、诺基亚、三星等手机会不会有这样的情况，大家可以自行测试。解决方法：在 head 内添加下面...
vue项目如何实现返回上一页
Deshun 发布于 4年前 (2019-12-05) 2930℃ 评论(0) 赞 (0)
vue 返回上一页有两种方法：如果使用的是 vue-router ，this.$router.go(-1) 就可以回到上一页。 history.go(-1) 是回到浏览器上一页。但是由于 Vue 应用是单页应用，浏览器的访问历史未必和 Vue 的浏览历史相同。还有一点，就是使用 router 跳转的时候，Vue 不会重新加载 CSS 。比如从 A 页面跳到 B 页面，会沿用 A 页面中的 CSS...
饿了么Mint UI库Datetime picker日期选择器采坑记录
1Deshun 发布于 4年前 (2019-11-30) 2808℃ 评论(0) 赞 (1)
Mint UI 是饿了么前端团队（elemeFE）推出的专门针对移动端的前端 UI 库，不过其 github 库已经有2年多没有更新了，API 也不是很详细。不过多评价，还是有很多人用 Element UI的，下面记录一下使用 Mint UI 遇到的问题及解决方法：如何安装我就不...
IOS、iPhone移动端，表单input聚焦时页面放大的解决办法
Deshun 发布于 4年前 (2019-11-30) 4409℃ 评论(0) 赞 (1)
最近的一个项目中，发现几个页面在使用 iPhone 11 访问的时候，点击 input 和 textarea 等文本输入框聚焦 focus() 时，页面会整体放大。经检查发现并没有什么特定的功能是让页面放大的，最后找到原因：苹果觉得点击输入框放大是一个“很好”的体验，就擅自把页面给放大了，单纯的用 meta 禁止页面放大是没有用的，可以使用下面两种方法解决。通过 mate 设置：<meta&...
iOS设备input不能自动focus聚焦的解决方法
Deshun 发布于 4年前 (2019-11-28) 5795℃ 评论(0) 赞 (1)
移动端（iPhone、iPad）的 Safari 或者微信默认是不支持 autofocus 属性的，并且只有用户主动触发的事件才可以使 focus 一类的方法生效。并且在 iOS 中使用 position: fixed 会导致 input 输入框的位置出现问题，导致 input 无法点击或者说无法聚焦。找了几个解决方案，归纳整理一下：1、stackoverflow作者，尝试过模拟点击，触...
记Ant Design Vue Modal组件的使用及踩的坑
2Deshun 发布于 4年前 (2019-11-24) 8302℃ 评论(0) 赞 (3)
最近在使用 Vue 开发一个项目，前端框架用的 Ant Design ，Ant Design for React 已经比较成熟，兼容性和灵活性也比较高。但是 Ant Design for Vue 貌似还有点不那么完善。今天先整理一下 Modal 组件的使用及我开发过程中注意到的一...
CSS border dashed属性虚线间隔不可控的解决方法
Deshun 发布于 5年前 (2019-11-13) 10059℃ 评论(0) 赞 (2)
CSS 的 border 属性，可以设置实线，虚线还有点线。不过直接使用 border: 1px dashed #F00 虚线距离太小，非常难看，很难满足UI图的效果。可以使用 background 背景的渐变属性，来替代 border 方案，方法如下：width: 100%; height: 1px; background-image: linear-gradi...