包括在 Vue.js 中与 Tabulator 一起使用的 Moment.js 库的问题

Question

我正在尝试将日期时间功能与需要 moment.js 库的 Tabulator 一起使用。在我添加 Tabulator 之前的应用程序中，moment.js 已经在该级别的某些组件中使用。我有一个使用 Tabulator 并尝试使用 datetime 的新测试组件。通常我只会导入时刻并在这里使用它，但似乎在制表符本身中需要时刻。

我的第一个想法是 Moment.js 需要在我的应用程序中全局设置，所以我这样做了。

Main.js：

```
   import Vue from 'vue'
   import App from './App'
   import router from './router'
   import { store } from './store'
   import Vuetify from 'vuetify'
   import 'vuetify/dist/vuetify.min.css'
   import moment from 'moment'

   Vue.prototype.moment = moment

   ...............

   new Vue({
   el: '#app',
   data () {
    return {
      info: null,
      loading: true,
      errored: false // this.$root.$data.errored
    }
  },
  router,
  components: { App },
  template: '<App/>',
  store
  })

```

在我的组件中（Testpage.vue）

```
<template>
  <div>
    <div ref="example_table"></div>
  </div>
</template>

<script>
// import moment from 'moment'
var Tabulator = require('tabulator-tables')
export default {
  name: 'Test',
  data: function () {
    return {
      tabulator: null, // variable to hold your table
      tableData: [{id: 1, date: '2019-01-10'}] // data for table to display
    }
  },
  watch: {
    // update table if data changes
    tableData: {
      handler: function (newData) {
        this.tabulator.replaceData(newData)
      },
      deep: true
    }
  },
mounted () {
    // instantiate Tabulator when element is mounted
    this.tabulator = new Tabulator(this.$refs.example_table, {
      data: this.tableData, // link data to table
      columns: [
        {title: 'Date', field: 'date', formatter: 'datetime', formatterParams: {inputFormat: 'YYYY-MM-DD', outputFormat: 'DD/MM/YY', invalidPlaceholder: '(invalid date)'}}
      ],
}
</script>
```

我收到错误：“未捕获（承诺中）参考错误：在 Format.datetime (tabulator.js?ab1f:14619) 中未定义时刻” 我可以通过使用 this.$moment() 在其他组件中使用矩，但我需要它在 node_modules\tabulator-tables\dist\js\tabulator.js 中可用 因为这就是发生错误的地方。知道如何包含该库吗？

Answer 1

回到你尝试的第一个选项，因为用 moment 注释 Vue 原型绝对不是正确的方法。即使它被推荐（它不是），Tabulator 也必须知道通过查找 Vue.moment 才能找到它。它没有被编码来做到这一点。

我喜欢开源的一件事是，您可以准确地看到库正在做什么来帮助解决问题。快速搜索 Tabulator 代码库会发现：

https://github.com/olifolkerd/tabulator/blob/3aa6f17b04cccdd36a334768635a60770aa10e38/src/js/modules/format.js

var newDatetime = moment(value, inputFormat);

格式化程序只是直接调用 moment，而不是导入它。它显然是围绕期望图书馆在全球范围内可用的老式机制设计的。在浏览器领域，这意味着它位于“窗口”对象上。两个快速的选项可以解决这个问题：

1. 使用 CDN 托管的 Moment 版本，例如 https://cdnjs.com/libraries/moment.js/，方法是在页面模板的标题中添加如下内容：

   <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script>
   

2. 调整上面的代码以在窗口上设置时刻：

   window.moment = moment;
   

从 date-fns 在许多方面更好的角度来看，ohgodwhy 的上述评论不一定是错误的。但它对你不起作用，因为 Tabulator 是硬编码来寻找时刻的，所以你需要时刻本身来工作。