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

Question

我想使用 a simple directive to use flatpickr with vue.js, like the author suggest here:

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()
});

我创建了 a simple fiddle 以查看是否有效。在桌面上一切正常，但当切换到移动模式（通过 chrome 开发工具）并按 "run" 时，所需的输入未创建。仅创建 hidden 输入（通过检查查看）。

有人知道这是什么原因造成的吗？

Answer 1

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

self.input.parentNode === 空

It also returns null if the node has just been created and is not yet attached to the tree.

使用 inserted 代替 bind

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>

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

vue2 flatpickr directive approach not working on mobile

javascript

vue.js

vuejs2

flatpickr