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

Question

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

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

主要.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>
```

我收到错误：“Uncaught (in promise) Reference Error: moment is not defined at Format.datetime (tabulator.js?ab1f:14619)” 我可以通过使用 this.$moment() 在其他组件中使用 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 是硬编码来寻找时刻的，所以你需要时刻本身来工作。