js_脚本之家

之前需要对 el-button 做二次封装,所以就用到 vue$attrs
$listenerswww.js8331.com, 属性,这两个属性在这不细说,可以在这里 查看详情。

  1. iphone5s及以下使用transform无效,需要使用-webkit-transform.

二次封装代码

2.on click无效问题
Zepto('.detail-content').on('click','img',function(){ .. })此时回调函数并未执行,
是因为暂未获取到.detail-content
3.点击时on tap 事件总是会触发两次,换成 singleTap后就只触发一次了。

   import { mapGetters } from 'vuex';import env from '@/config/env';export default { props: { // 按钮唯一标识 buttonId: { type: String, required: true, }, }, computed: { ...mapGetters, validButton: function() { return env.debug ? true : this.getUserBtns[this.buttonId]; }, },};
  1. photoswipe单击时关闭预览,页面会闪烁,并且pswp没有彻底的关闭,由于它的z-index比较高,导致下面的内容被遮挡了,查看它的HTML代码可以看到

    www.js8331.com 1

    2b1a6ebb-1d24-4b70-b90f-362fc52e0569.png

这样封装的好处就是不需要将上层每个属性都写一次 prop 定义,对
listeners 也不需要做一层中转 emit

已经关闭的photoswipe却又加上了`pswp-open`这个class,而这个class就是使其`display:block`  
可能也是由于点击事件触发了两次,使其关闭后又打开了,可以添加代码

发现问题

在某个页面,点击经过封装的 limit-button 会使页面进行刷新

 gallery.listen('destroy', function() {
            console.log('destroy')
         _this.openning = false
              setTimeout(function () {
              Zepto('.pswp').removeClass('pswp--open')
            },10)
        })

起初以为是点击事件的冒泡产生的,就把上层引用的 @click 去掉:

解决这个问题

点击
  1. 在做移动端时给一个div固定高度,超出部分overflow:auto
    ,可以滚动查看。
    手机调试的时候发现,在安卓手机上滑动非常流畅,但是苹果手机滑动有卡顿现象,体验很差,简直不能忍。于是上网搜索,找到了解决办法,
    -webkit-overflow-scrolling: touch; // 解决ios滑动卡顿问题
    据说这玩意的坑也很多,只是我在那个页面暂时还没涉及到滚动的其它功能需求
    详见:IOS与惯性滚动

  2. 移动端input输入框,获取焦点后弹出来的软键盘右下角的按钮作用是可以更改的!

发现还是一样会产生刷新的事件。

![](https://upload-images.jianshu.io/upload_images/3231937-bdbae8397dbcdbc8.jpg)

IMG_6324.jpg

思考可能是 $listeners 的问题,在 mounted 中打印也只有 @click
事件,就算去掉 $listeners 也不管用。 后来在浏览器对dom结构的查看,发现
limit-button 编译后变成:

如上图,想要输入完成后进行一系列操作,例如校验输入、发送请求等,但是一不小心输入完点击‘GO’(中文键盘就是‘前往’),网页就自动刷新了!并不想要这种操作啊,怎么办?有以下几种办法:
(1)
我的input输入框都是包含在form表单里面的,所以点击前往就会提交表单,

可以看到编译后的 type 变成了 warning ,查 element 的源码可发现

<form action="">
  <input type="text">
</form>

可发现是 $attrs 覆盖了 el-button 的nativeType

而form的action属性为空,所以就刷新了页面。解决办法可以去掉form表单或者将这个input框放在form表单外面。
去掉之后变成了return

  点击会刷新 点击不会刷新 

www.js8331.com 2

解决方法

111IMG_6325.jpg

type 分出来 props ,然后再通过 prop 引用

(2)不去掉form表单也有办法,那就是监听表单的submit事件,然后阻止其默认事件的发生。

   import { mapGetters } from 'vuex';import env from '@/config/env';export default { props: { // &#25353;&#38062;&#21807;&#19968;&#26631;&#35782; buttonId: { type: String, required: true, }, type: { type: String, } }, computed: { ...mapGetters, validButton: function() { return env.debug &amp;#63; true : this.getUserBtns[this.buttonId]; }, },};
$('form').on('submit',function (e) {
    console.log(e)
    e.preventDefault()
    return true // 或者在这里进行其他操作
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

(3)如果输入框是个搜索输入框,想让‘go’变成’search’,可以使用h5的<input type="search">

www.js8331.com 3

2.jpg

发表评论

电子邮件地址不会被公开。 必填项已用*标注