在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ vue2+webpack3, import引入LCalendar.js插件后,

vue2+webpack3, import引入LCalendar.js插件后,再次調(diào)用里面的方法報(bào)錯(cuò)?

問(wèn)題:
第一次可以成功彈出時(shí)間面板,可操作;
第二次點(diǎn)擊input框 ,彈出的時(shí)間選擇框沒(méi)有數(shù)據(jù),并且【確定】按鈕點(diǎn)擊不了??

clipboard.png

app.vue

<template>
<div style="margin: 50px;">
<input id="startTime" type="text" readonly="" placeholder="開(kāi)始時(shí)間" data-lcalendar="2016-05-11,2016-05-11"  v-model="startTime"/>
</div>
</template>

<script>
import LCalendar from "../assets/LCalendar"
import "../assets/LCalendar.css"

  export default {
    name: 'app',
    data () {
      return {
        startTime:""
      }
    },
    methods:{
        timeSelect:function(){
          var calendar = new LCalendar();
          calendar.init({
            'trigger': '#startTime', //標(biāo)簽id
            'type': 'date', //date 調(diào)出日期選擇 datetime 調(diào)出日期時(shí)間選擇 time 調(diào)出時(shí)間選擇 ym 調(diào)出年月選擇,
            'minDate': '1900-1-1', //最小日期
            'maxDate': new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() //最大日期
          });
        }
    },
    mounted:function(){
      this.timeSelect();
    }
  }
</script>
<style>

</style>

LCalendar.js
插件地址 https://github.com/xfhxbb/LCa...

window.LCalendar= (function() {
      var MobileCalendar = function() {
          this.gearDate;
          this.minY = 1900;
          this.minM = 1;
          this.minD = 1;
          this.maxY = 2099;
          this.maxM = 12;
          this.maxD = 31;
      }
      MobileCalendar.prototype = {
          init: function(params) {
              this.type = params.type;
              this.trigger = document.querySelector(params.trigger);
              if (this.trigger.getAttribute("data-lcalendar") != null) {
                  var arr = this.trigger.getAttribute("data-lcalendar").split(',');
                  var minArr = arr[0].split('-');
                  this.minY = ~~minArr[0];
                  this.minM = ~~minArr[1];
                  this.minD = ~~minArr[2];
                  var maxArr = arr[1].split('-');
                  this.maxY = ~~maxArr[0];
                  this.maxM = ~~maxArr[1];
                  this.maxD = ~~maxArr[2];
              }
              if (params.minDate) {
                  var minArr = params.minDate.split('-');
                  this.minY = ~~minArr[0];
                  this.minM = ~~minArr[1];
                  this.minD = ~~minArr[2];
              }
              if (params.maxDate) {
                  var maxArr = params.maxDate.split('-');
                  this.maxY = ~~maxArr[0];
                  this.maxM = ~~maxArr[1];
                  this.maxD = ~~maxArr[2];
              }
              this.bindEvent(this.type);
          },
          bindEvent: function(type) {
              var _self = this;
              //呼出日期插件
              function popupDate(e) {
                  _self.gearDate = document.createElement("div");
                  _self.gearDate.className = "gearDate";
                  _self.gearDate.innerHTML = '<div class="date_ctrl slideInUp">' +
                      '<div class="date_btn_box">' +
                      '<div class="date_btn lcalendar_cancel">取消</div>' +
                      '<div class="date_btn lcalendar_finish">確定</div>' +
                      '</div>' +
                      '<div class="date_roll_mask">' +
                      '<div class="date_roll">' +
                      '<div>' +
                      '<div class="gear date_yy" data-datetype="date_yy"></div>' +
                      '<div class="date_grid">' +
                      '<div>年</div>' +
                      '</div>' +
                      '</div>' +
                      '<div>' +
                      '<div class="gear date_mm" data-datetype="date_mm"></div>' +
                      '<div class="date_grid">' +
                      '<div>月</div>' +
                      '</div>' +
                      '</div>' +
                      '<div>' +
                      '<div class="gear date_dd" data-datetype="date_dd"></div>' +
                      '<div class="date_grid">' +
                      '<div>日</div>' +
                      '</div>' +
                      '</div>' +
                      '</div>' +
                      '</div>' +
                      '</div>';
                  document.body.appendChild(_self.gearDate);
                  dateCtrlInit();
                  var lcalendar_cancel = _self.gearDate.querySelector(".lcalendar_cancel");
                  lcalendar_cancel.addEventListener('touchstart', closeMobileCalendar);
                  var lcalendar_finish = _self.gearDate.querySelector(".lcalendar_finish");
                  lcalendar_finish.addEventListener('touchstart', finishMobileDate);
                  var date_yy = _self.gearDate.querySelector(".date_yy");
                  var date_mm = _self.gearDate.querySelector(".date_mm");
                  var date_dd = _self.gearDate.querySelector(".date_dd");
                  date_yy.addEventListener('touchstart', gearTouchStart);
                  date_mm.addEventListener('touchstart', gearTouchStart);
                  date_dd.addEventListener('touchstart', gearTouchStart);
                  date_yy.addEventListener('touchmove', gearTouchMove);
                  date_mm.addEventListener('touchmove', gearTouchMove);
                  date_dd.addEventListener('touchmove', gearTouchMove);
                  date_yy.addEventListener('touchend', gearTouchEnd);
                  date_mm.addEventListener('touchend', gearTouchEnd);
                  date_dd.addEventListener('touchend', gearTouchEnd);
              }
              //初始化年月日插件默認(rèn)值
              function dateCtrlInit() {
                  var date = new Date();
                  var dateArr = {
                      yy: date.getFullYear(),
                      mm: date.getMonth(),
                      dd: date.getDate() - 1
                  };
                  if (/^\d{4}-\d{1,2}-\d{1,2}$/.test(_self.trigger.value)) {
                      rs = _self.trigger.value.match(/(^|-)\d{1,4}/g);
                      dateArr.yy = rs[0] - _self.minY;
                      dateArr.mm = rs[1].replace(/-/g, "") - 1;
                      dateArr.dd = rs[2].replace(/-/g, "") - 1;
                  } else {
                      dateArr.yy = dateArr.yy - _self.minY;
                  }
                  _self.gearDate.querySelector(".date_yy").setAttribute("val", dateArr.yy);
                  _self.gearDate.querySelector(".date_mm").setAttribute("val", dateArr.mm);
                  _self.gearDate.querySelector(".date_dd").setAttribute("val", dateArr.dd);
                  setDateGearTooth();
              }
              //呼出年月插件
              function popupYM(e) {
                  _self.gearDate = document.createElement("div");
                  _self.gearDate.className = "gearDate";
                  _self.gearDate.innerHTML = '<div class="date_ctrl slideInUp">' +
                      '<div class="date_btn_box">' +
                      '<div class="date_btn lcalendar_cancel">取消</div>' +
                      '<div class="date_btn lcalendar_finish">確定</div>' +
                      '</div>' +
                      '<div class="date_roll_mask">' +
                      '<div class="ym_roll">' +
                      '<div>' +
                      '<div class="gear date_yy" data-datetype="date_yy"></div>' +
                      '<div class="date_grid">' +
                      '<div>年</div>' +
                      '</div>' +
                      '</div>' +
                      '<div>' +
                      '<div class="gear date_mm" data-datetype="date_mm"></div>' +
                      '<div class="date_grid">' +
                      '<div>月</div>' +
                      '</div>' +
                      '</div>' +
                      '</div>' +
                      '</div>' +
                      '</div>';
                  document.body.appendChild(_self.gearDate);
                  ymCtrlInit();
                  var lcalendar_cancel = _self.gearDate.querySelector(".lcalendar_cancel");
                  lcalendar_cancel.addEventListener('touchstart', closeMobileCalendar);
                  var lcalendar_finish = _self.gearDate.querySelector(".lcalendar_finish");
                  lcalendar_finish.addEventListener('touchstart', finishMobileYM);
                  var date_yy = _self.gearDate.querySelector(".date_yy");
                  var date_mm = _self.gearDate.querySelector(".date_mm");
                  date_yy.addEventListener('touchstart', gearTouchStart);
                  date_mm.addEventListener('touchstart', gearTouchStart);
                  date_yy.addEventListener('touchmove', gearTouchMove);
                  date_mm.addEventListener('touchmove', gearTouchMove);
                  date_yy.addEventListener('touchend', gearTouchEnd);
                  date_mm.addEventListener('touchend', gearTouchEnd);
              }
              //初始化年月插件默認(rèn)值
              function ymCtrlInit() {
                  var date = new Date();
                  var dateArr = {
                      yy: date.getFullYear(),
                      mm: date.getMonth()
                  };
                  if (/^\d{4}-\d{1,2}$/.test(_self.trigger.value)) {
                      rs = _self.trigger.value.match(/(^|-)\d{1,4}/g);
                      dateArr.yy = rs[0] - _self.minY;
                      dateArr.mm = rs[1].replace(/-/g, "") - 1;
                  } else {
                      dateArr.yy = dateArr.yy - _self.minY;
                  }
                  _self.gearDate.querySelector(".date_yy").setAttribute("val", dateArr.yy);
                  _self.gearDate.querySelector(".date_mm").setAttribute("val", dateArr.mm);
                  setDateGearTooth();
              }
              //呼出日期+時(shí)間插件
              function popupDateTime(e) {
                  _self.gearDate = document.createElement("div");
                  _self.gearDate.className = "gearDatetime";
                  _self.gearDate.innerHTML = '<div class="date_ctrl slideInUp">' +
                      '<div class="date_btn_box">' +
                      '<div class="date_btn lcalendar_cancel">取消</div>' +
                      '<div class="date_btn lcalendar_finish">確定</div>' +
                      '</div>' +
                      '<div class="date_roll_mask">' +
                      '<div class="datetime_roll">' +
                      '<div>' +
                      '<div class="gear date_yy" data-datetype="date_yy"></div>' +
                      '<div class="date_grid">' +
                      '<div>年</div>' +
                      '</div>' +
                      '</div>' +
                      '<div>' +
                      '<div class="gear date_mm" data-datetype="date_mm"></div>' +
                      '<div class="date_grid">' +
                      '<div>月</div>' +
                      '</div>' +
                      '</div>' +
                      '<div>' +
                      '<div class="gear date_dd" data-datetype="date_dd"></div>' +
                      '<div class="date_grid">' +
                      '<div>日</div>' +
                      '</div>' +
                      '</div>' +
                      '<div>' +
                      '<div class="gear time_hh" data-datetype="time_hh"></div>' +
                      '<div class="date_grid">' +
                      '<div>時(shí)</div>' +
                      '</div>' +
                      '</div>' +
                      '<div>' +
                      '<div class="gear time_mm" data-datetype="time_mm"></div>' +
                      '<div class="date_grid">' +
                      '<div>分</div>' +
                      '</div>' +
                      '</div>' +
                      '</div>' + //date_roll
                      '</div>' + //date_roll_mask
                      '</div>';
                  document.body.appendChild(_self.gearDate);
                  dateTimeCtrlInit();
                  var lcalendar_cancel = _self.gearDate.querySelector(".lcalendar_cancel");
                  lcalendar_cancel.addEventListener('touchstart', closeMobileCalendar);
                  var lcalendar_finish = _self.gearDate.querySelector(".lcalendar_finish");
                  lcalendar_finish.addEventListener('touchstart', finishMobileDateTime);
                  var date_yy = _self.gearDate.querySelector(".date_yy");
                  var date_mm = _self.gearDate.querySelector(".date_mm");
                  var date_dd = _self.gearDate.querySelector(".date_dd");
                  var time_hh = _self.gearDate.querySelector(".time_hh");
                  var time_mm = _self.gearDate.querySelector(".time_mm");
                  date_yy.addEventListener('touchstart', gearTouchStart);
                  date_mm.addEventListener('touchstart', gearTouchStart);
                  date_dd.addEventListener('touchstart', gearTouchStart);
                  time_hh.addEventListener('touchstart', gearTouchStart);
                  time_mm.addEventListener('touchstart', gearTouchStart);
                  date_yy.addEventListener('touchmove', gearTouchMove);
                  date_mm.addEventListener('touchmove', gearTouchMove);
                  date_dd.addEventListener('touchmove', gearTouchMove);
                  time_hh.addEventListener('touchmove', gearTouchMove);
                  time_mm.addEventListener('touchmove', gearTouchMove);
                  date_yy.addEventListener('touchend', gearTouchEnd);
                  date_mm.addEventListener('touchend', gearTouchEnd);
                  date_dd.addEventListener('touchend', gearTouchEnd);
                  time_hh.addEventListener('touchend', gearTouchEnd);
                  time_mm.addEventListener('touchend', gearTouchEnd);
              }
              //初始化年月日時(shí)分插件默認(rèn)值
              function dateTimeCtrlInit() {
                  var date = new Date();
                  var dateArr = {
                      yy: date.getFullYear(),
                      mm: date.getMonth(),
                      dd: date.getDate() - 1,
                      hh: date.getHours(),
                      mi: date.getMinutes()
                  };
                  if (/^\d{4}-\d{1,2}-\d{1,2}\s\d{2}:\d{2}$/.test(_self.trigger.value)) {
                      rs = _self.trigger.value.match(/(^|-|\s|:)\d{1,4}/g);
                      dateArr.yy = rs[0] - _self.minY;
                      dateArr.mm = rs[1].replace(/-/g, "") - 1;
                      dateArr.dd = rs[2].replace(/-/g, "") - 1;
                      dateArr.hh = parseInt(rs[3].replace(/\s0?/g, ""));
                      dateArr.mi = parseInt(rs[4].replace(/:0?/g, ""));
                  } else {
                      dateArr.yy = dateArr.yy - _self.minY;
                  }
                  _self.gearDate.querySelector(".date_yy").setAttribute("val", dateArr.yy);
                  _self.gearDate.querySelector(".date_mm").setAttribute("val", dateArr.mm);
                  _self.gearDate.querySelector(".date_dd").setAttribute("val", dateArr.dd);
                  setDateGearTooth();
                  _self.gearDate.querySelector(".time_hh").setAttribute("val", dateArr.hh);
                  _self.gearDate.querySelector(".time_mm").setAttribute("val", dateArr.mi);
                  setTimeGearTooth();
              }
              //呼出時(shí)間插件
              function popupTime(e) {
                  _self.gearDate = document.createElement("div");
                  _self.gearDate.className = "gearDate";
                  _self.gearDate.innerHTML = '<div class="date_ctrl slideInUp">' +
                      '<div class="date_btn_box">' +
                      '<div class="date_btn lcalendar_cancel">取消</div>' +
                      '<div class="date_btn lcalendar_finish">確定</div>' +
                      '</div>' +
                      '<div class="date_roll_mask">' +
                      '<div class="time_roll">' +
                      '<div>' +
                      '<div class="gear time_hh" data-datetype="time_hh"></div>' +
                      '<div class="date_grid">' +
                      '<div>時(shí)</div>' +
                      '</div>' +
                      '</div>' +
                      '<div>' +
                      '<div class="gear time_mm" data-datetype="time_mm"></div>' +
                      '<div class="date_grid">' +
                      '<div>分</div>' +
                      '</div>' +
                      '</div>' +
                      '</div>' + //time_roll
                      '</div>' +
                      '</div>';
                  document.body.appendChild(_self.gearDate);
                  timeCtrlInit();
                  var lcalendar_cancel = _self.gearDate.querySelector(".lcalendar_cancel");
                  lcalendar_cancel.addEventListener('touchstart', closeMobileCalendar);
                  var lcalendar_finish = _self.gearDate.querySelector(".lcalendar_finish");
                  lcalendar_finish.addEventListener('touchstart', finishMobileTime);
                  var time_hh = _self.gearDate.querySelector(".time_hh");
                  var time_mm = _self.gearDate.querySelector(".time_mm");
                  time_hh.addEventListener('touchstart', gearTouchStart);
                  time_mm.addEventListener('touchstart', gearTouchStart);
                  time_hh.addEventListener('touchmove', gearTouchMove);
                  time_mm.addEventListener('touchmove', gearTouchMove);
                  time_hh.addEventListener('touchend', gearTouchEnd);
                  time_mm.addEventListener('touchend', gearTouchEnd);
              }
              //初始化時(shí)分插件默認(rèn)值
              function timeCtrlInit() {
                  var d = new Date();
                  var e = {
                      hh: d.getHours(),
                      mm: d.getMinutes()
                  };
                  if (/^\d{2}:\d{2}$/.test(_self.trigger.value)) {
                      rs = _self.trigger.value.match(/(^|:)\d{2}/g);
                      e.hh = parseInt(rs[0].replace(/^0?/g, ""));
                      e.mm = parseInt(rs[1].replace(/:0?/g, ""))
                  }
                  _self.gearDate.querySelector(".time_hh").setAttribute("val", e.hh);
                  _self.gearDate.querySelector(".time_mm").setAttribute("val", e.mm);
                  setTimeGearTooth();
              }
              //重置日期節(jié)點(diǎn)個(gè)數(shù)
              function setDateGearTooth() {
                  var passY = _self.maxY - _self.minY + 1;
                  var date_yy = _self.gearDate.querySelector(".date_yy");
                  var itemStr = "";
                  if (date_yy && date_yy.getAttribute("val")) {
                      //得到年份的值
                      var yyVal = parseInt(date_yy.getAttribute("val"));
                      //p 當(dāng)前節(jié)點(diǎn)前后需要展示的節(jié)點(diǎn)個(gè)數(shù)
                      for (var p = 0; p <= passY - 1; p++) {
                          itemStr += "<div class='tooth'>" + (_self.minY + p) + "</div>";
                      }
                      date_yy.innerHTML = itemStr;
                      var top = Math.floor(parseFloat(date_yy.getAttribute('top')));
                      if (!isNaN(top)) {
                          top % 2 == 0 ? (top = top) : (top = top + 1);
                          top > 8 && (top = 8);
                          var minTop = 8 - (passY - 1) * 2;
                          top < minTop && (top = minTop);
                          date_yy.style["-webkit-transform"] = 'translate3d(0,' + top + 'em,0)';
                          date_yy.setAttribute('top', top + 'em');
                          yyVal = Math.abs(top - 8) / 2;
                          date_yy.setAttribute("val", yyVal);
                      } else {
                          date_yy.style["-webkit-transform"] = 'translate3d(0,' + (8 - yyVal * 2) + 'em,0)';
                          date_yy.setAttribute('top', 8 - yyVal * 2 + 'em');
                      }
                  } else {
                      return;
                  }
                  var date_mm = _self.gearDate.querySelector(".date_mm");
                  if (date_mm && date_mm.getAttribute("val")) {
                      itemStr = "";
                      //得到月份的值
                      var mmVal = parseInt(date_mm.getAttribute("val"));
                      var maxM = 11;
                      var minM = 0;
                      //當(dāng)年份到達(dá)最大值
                      if (yyVal == passY - 1) {
                          maxM = _self.maxM - 1;
                      }
                      //當(dāng)年份到達(dá)最小值
                      if (yyVal == 0) {
                          minM = _self.minM - 1;
                      }
                      //p 當(dāng)前節(jié)點(diǎn)前后需要展示的節(jié)點(diǎn)個(gè)數(shù)
                      for (var p = 0; p < maxM - minM + 1; p++) {
                          itemStr += "<div class='tooth'>" + (minM + p + 1) + "</div>";
                      }
                      date_mm.innerHTML = itemStr;
                      if (mmVal > maxM) {
                          mmVal = maxM;
                          date_mm.setAttribute("val", mmVal);
                      } else if (mmVal < minM) {
                          mmVal = maxM;
                          date_mm.setAttribute("val", mmVal);
                      }
                      date_mm.style["-webkit-transform"] = 'translate3d(0,' + (8 - (mmVal - minM) * 2) + 'em,0)';
                      date_mm.setAttribute('top', 8 - (mmVal - minM) * 2 + 'em');
                  } else {
                      return;
                  }
                  var date_dd = _self.gearDate.querySelector(".date_dd");
                  if (date_dd && date_dd.getAttribute("val")) {
                      itemStr = "";
                      //得到日期的值
                      var ddVal = parseInt(date_dd.getAttribute("val"));
                      //返回月份的天數(shù)
                      var maxMonthDays = calcDays(yyVal, mmVal);
                      //p 當(dāng)前節(jié)點(diǎn)前后需要展示的節(jié)點(diǎn)個(gè)數(shù)
                      var maxD = maxMonthDays - 1;
                      var minD = 0;
                      //當(dāng)年份月份到達(dá)最大值
                      if (yyVal == passY - 1 && _self.maxM == mmVal + 1) {
                          maxD = _self.maxD - 1;
                      }
                      //當(dāng)年、月到達(dá)最小值
                      if (yyVal == 0 && _self.minM == mmVal + 1) {
                          minD = _self.minD - 1;
                      }
                      for (var p = 0; p < maxD - minD + 1; p++) {
                          itemStr += "<div class='tooth'>" + (minD + p + 1) + "</div>";
                      }
                      date_dd.innerHTML = itemStr;
                      if (ddVal > maxD) {
                          ddVal = maxD;
                          date_dd.setAttribute("val", ddVal);
                      } else if (ddVal < minD) {
                          ddVal = minD;
                          date_dd.setAttribute("val", ddVal);
                      }
                      date_dd.style["-webkit-transform"] = 'translate3d(0,' + (8 - (ddVal - minD) * 2) + 'em,0)';
                      date_dd.setAttribute('top', 8 - (ddVal - minD) * 2 + 'em');
                  } else {
                      return;
                  }
              }
              //重置時(shí)間節(jié)點(diǎn)個(gè)數(shù)
              function setTimeGearTooth() {
                  var time_hh = _self.gearDate.querySelector(".time_hh");
                  if (time_hh && time_hh.getAttribute("val")) {
                      var i = "";
                      var hhVal = parseInt(time_hh.getAttribute("val"));
                      for (var g = 0; g <= 23; g++) {
                          i += "<div class='tooth'>" + g + "</div>";
                      }
                      time_hh.innerHTML = i;
                      time_hh.style["-webkit-transform"] = 'translate3d(0,' + (8 - hhVal * 2) + 'em,0)';
                      time_hh.setAttribute('top', 8 - hhVal * 2 + 'em');
                  } else {
                      return
                  }
                  var time_mm = _self.gearDate.querySelector(".time_mm");
                  if (time_mm && time_mm.getAttribute("val")) {
                      var i = "";
                      var mmVal = parseInt(time_mm.getAttribute("val"));
                      for (var g = 0; g <= 59; g++) {
                          i += "<div class='tooth'>" + g + "</div>";
                      }
                      time_mm.innerHTML = i;
                      time_mm.style["-webkit-transform"] = 'translate3d(0,' + (8 - mmVal * 2) + 'em,0)';
                      time_mm.setAttribute('top', 8 - mmVal * 2 + 'em');
                  } else {
                      return
                  }
              }
              //求月份最大天數(shù)
              function calcDays(year, month) {
                  if (month == 1) {
                      year += _self.minY;
                      if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0 && year % 4000 != 0)) {
                          return 29;
                      } else {
                          return 28;
                      }
                  } else {
                      if (month == 3 || month == 5 || month == 8 || month == 10) {
                          return 30;
                      } else {
                          return 31;
                      }
                  }
              }
              //觸摸開(kāi)始
              function gearTouchStart(e) {
                  e.preventDefault();
                  var target = e.target;
                  while (true) {
                      if (!target.classList.contains("gear")) {
                          target = target.parentElement;
                      } else {
                          break
                      }
                  }
                  clearInterval(target["int_" + target.id]);
                  target["old_" + target.id] = e.targetTouches[0].screenY;
                  target["o_t_" + target.id] = (new Date()).getTime();
                  var top = target.getAttribute('top');
                  if (top) {
                      target["o_d_" + target.id] = parseFloat(top.replace(/em/g, ""));
                  } else {
                      target["o_d_" + target.id] = 0;
                  }
                  target.style.webkitTransitionDuration = target.style.transitionDuration = '0ms';
              }
              //手指移動(dòng)
              function gearTouchMove(e) {
                  e.preventDefault();
                  var target = e.target;
                  while (true) {
                      if (!target.classList.contains("gear")) {
                          target = target.parentElement;
                      } else {
                          break
                      }
                  }
                  target["new_" + target.id] = e.targetTouches[0].screenY;
                  target["n_t_" + target.id] = (new Date()).getTime();
                  var f = (target["new_" + target.id] - target["old_" + target.id]) * 30 / window.innerHeight;
                  target["pos_" + target.id] = target["o_d_" + target.id] + f;
                  target.style["-webkit-transform"] = 'translate3d(0,' + target["pos_" + target.id] + 'em,0)';
                  target.setAttribute('top', target["pos_" + target.id] + 'em');
                  if (e.targetTouches[0].screenY < 1) {
                      gearTouchEnd(e);
                  };
              }
              //離開(kāi)屏幕
              function gearTouchEnd(e) {
                  e.preventDefault();
                  var target = e.target;
                  while (true) {
                      if (!target.classList.contains("gear")) {
                          target = target.parentElement;
                      } else {
                          break;
                      }
                  }
                  var flag = (target["new_" + target.id] - target["old_" + target.id]) / (target["n_t_" + target.id] - target["o_t_" + target.id]);
                  if (Math.abs(flag) <= 0.2) {
                      target["spd_" + target.id] = (flag < 0 ? -0.08 : 0.08);
                  } else {
                      if (Math.abs(flag) <= 0.5) {
                          target["spd_" + target.id] = (flag < 0 ? -0.16 : 0.16);
                      } else {
                          target["spd_" + target.id] = flag / 2;
                      }
                  }
                  if (!target["pos_" + target.id]) {
                      target["pos_" + target.id] = 0;
                  }
                  rollGear(target);
              }
              //緩動(dòng)效果
              function rollGear(target) {
                  var d = 0;
                  var stopGear = false;

                  function setDuration() {
                      target.style.webkitTransitionDuration = target.style.transitionDuration = '200ms';
                      stopGear = true;
                  }
                  var passY = _self.maxY - _self.minY + 1;
                  clearInterval(target["int_" + target.id]);
                  target["int_" + target.id] = setInterval(function() {
                      var pos = target["pos_" + target.id];
                      var speed = target["spd_" + target.id] * Math.exp(-0.03 * d);
                      pos += speed;
                      if (Math.abs(speed) > 0.1) {} else {
                          var b = Math.round(pos / 2) * 2;
                          pos = b;
                          setDuration();
                      }
                      if (pos > 8) {
                          pos = 8;
                          setDuration();
                      }
                      switch (target.dataset.datetype) {
                          case "date_yy":
                              var minTop = 8 - (passY - 1) * 2;
                              if (pos < minTop) {
                                  pos = minTop;
                                  setDuration();
                              }
                              if (stopGear) {
                                  var gearVal = Math.abs(pos - 8) / 2;
                                  setGear(target, gearVal);
                                  clearInterval(target["int_" + target.id]);
                              }
                              break;
                          case "date_mm":
                              var date_yy = _self.gearDate.querySelector(".date_yy");
                              //得到年份的值
                              var yyVal = parseInt(date_yy.getAttribute("val"));
                              var maxM = 11;
                              var minM = 0;
                              //當(dāng)年份到達(dá)最大值
                              if (yyVal == passY - 1) {
                                  maxM = _self.maxM - 1;
                              }
                              //當(dāng)年份到達(dá)最小值
                              if (yyVal == 0) {
                                  minM = _self.minM - 1;
                              }
                              var minTop = 8 - (maxM - minM) * 2;
                              if (pos < minTop) {
                                  pos = minTop;
                                  setDuration();
                              }
                              if (stopGear) {
                                  var gearVal = Math.abs(pos - 8) / 2 + minM;
                    
回答
編輯回答
若相惜

因?yàn)槟阏{(diào)用的時(shí)候dom還沒(méi)有渲染,簡(jiǎn)而言之就是 你new 一個(gè)插件的時(shí)候 沒(méi)有dom,然后插件需要找到dom元素才能進(jìn)行一系列的動(dòng)作。

解決方法,放到vue的mounted生命周期,如果覺(jué)得不靠譜 再加上nextTick

2017年11月25日 16:59
編輯回答
巫婆

評(píng)論中rs未定義的問(wèn)題是因?yàn)閞s一直都沒(méi)有定義過(guò),在每個(gè)rs變量出現(xiàn)的前面加上let或者var定義一下就不會(huì)出現(xiàn)第二次再無(wú)數(shù)據(jù)的情況了,至于為什么第一次不報(bào)錯(cuò)就不清楚了。

2017年5月28日 17:59