Question

我想使用a simple directive将flatpickr与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 dev工具）并按“运行”时，不会创建所需的输入。仅创建hidden输入（请参阅检查）。

任何人都知道这会导致什么？

Answer 1

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

self.input.parentNode === null

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

使用插入代替绑定

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指令方法不适用于移动设备

1 个答案: