rookie125/mobile-calendar

和fastclick 同时使用，移动端无法弹出日历

jiangyoucai opened this issue · 5 comments

jiangyoucai commented

加上这个，移动端就无法弹出，pc端无问题

import FastClick from 'fastclick'
FastClick.attach(document.body);
rookie125 commented

@jiangyoucai 谢谢指出，同时欢迎提交pull requests

jiangyoucai commented

解决办法

调起calendars 的input 上添加click事件
强制添加focus

setDeparture: function() {
    // 设置input focus,绕过fastclick 引起的问题
    let calendars = document.getElementsByClassName('calendars')
    for (let i = 0; i < calendars.length; i++) {
        calendars[i].focus()
    }
}

另css里

.calendar .calendar-mask {
    left: 0;
    height: 100%;
    background-color: #000;
    opacity: .8;
    -webkit-transition: opacity .5s
    -moz-transition: opacity .5s
    -ms-transition: opacity .5s
    -o-transition: opacity .5s
    transition: opacity .5s
}

需加分号结束，否则，eslint，检查不通过

我改了下，放在vue里中用了
希望能支持npm安装，这样使用会方便些

rookie125 commented

@jiangyoucai 最近比较忙，忘记处理和回复了，近期我会更新同时让支持npm 安装

rookie125 commented

已经支持通过npm安装

luchanan commented

我拿到最新的也没有弹出来


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>fe</title>
  <link rel="stylesheet" type="text/css" href="mobile-calendar-1.0.1/calendar.min.css">
</head>

<body>
    <input type="text" class="calendars" format="yyyy-MM-dd" placeholder="Please enter the inquiry date" />
  <script src="fastclick-1.0.6/fastclick.min.js"></script>
  <script>
    if ('addEventListener' in document) {
  document.addEventListener('DOMContentLoaded', function() {
    FastClick.attach(document.body);
  }, false);
}
  </script>
  <script src="mobile-calendar-1.0.1/calendar.min.js"></script>
</body>

</html>