javascript - vue2 flatpickr 指令方法不适用于移动设备

Question

我想使用一个简单的指令来将flatpickr与 vue.js 一起使用，就像作者在这里建议的那样：

import Flatpickr from "flatpickr";
import Vue from "vue";

// <input type="text" v-flatpickr="{'enableTime': true}"

Vue.directive("flatpickr", {
    bind: (el, binding) => {
        el._flatpickr = new Flatpickr(el, binding.value);
    },
    unbind: el => el._flatpickr.destroy()
});

我创建了一个简单的小提琴来看看这是否有效。在桌面上一切都很好，但是当切换到移动模式（通过 chrome 开发工具）并按“运行”时，不会创建所需的输入。仅hidden创建输入（通过检查查看）。

任何人都知道这可能导致这种情况吗？

Answer 1

try {
    self.input.parentNode.insertBefore(self.mobileInput, self.input.nextSibling);
} catch (e) {
    //
}

self.input.parentNode === null

如果节点刚刚创建并且尚未附加到树，它也会返回 null。

使用插入而不是绑定

Vue.component('greeting', {
  template: '<div><input type="text" v-flatpickr="{}" /></div>'
});

Vue.directive('flatpickr', {
  inserted: (el, binding) => {
    el._flatpickr = new flatpickr(el, binding.value)
  },
  unbind: el => el._flatpickr.destroy()
})

var vm = new Vue({
  el: '#app'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script src="https://cdn.rawgit.com/chmln/flatpickr/v3.0.5-1/dist/flatpickr.js"></script>
<link href="https://cdn.rawgit.com/chmln/flatpickr/v3.0.5-1/dist/flatpickr.css" rel="stylesheet"/>

<div id="app">
  <greeting></greeting>
</div>