0

我正在尝试显示一个基于jsCalendar库的简单日历。当我导航到页面时，日历不会出现；但是，当我重新加载页面[⌘-R]或直接输入页面URL时，内容正常显示。我已经在 Safari 和 FireFox 中进行了测试，并且行为是相同的。

期望的结果：

通过 Vue Router 或直接导航到达页面时显示内容。

日历.vue

<template>
    <div class="auto-jsCalendar black-theme"
         data-navigator-position="right"
         data-month-format="month YYYY"
         data-day-format="DDD">
    </div>
</template>

<script>
import 'simple-jscalendar'

  export default {
    emits: ['page-data'],
    mounted() {
      this.$emit('page-data', {title: 'calendar', content: '',})
    },
  }
</script>

<style>
  @Import '~simple-jscalendar/source/jsCalendar.css';
  @Import '~simple-jscalendar/themes/jsCalendar.darkseries.css';
</style>

导航到 Calendar.vue

导航到页面时，div如下所示：

<div class="auto-jsCalendar black-theme" data-navigator-position="right" data-month-format="month YYYY" data-day-format="DDD"></div>

重新加载或直接导航

重新加载页面或直接在浏览器中输入 URL 时，div如下所示：

<div class="auto-jsCalendar black-theme" data-navigator-position="right" data-month-format="month YYYY" data-day-format="DDD" jscalendar-loaded="true"></div>

（动态属性jscalendar-loaded（在显示日历对象时添加到 div）在导航到页面时未建立。）

js日历输出

环境：

Dave@[SNIP] my_spa % npm list
my_spa@0.1.33 /.../my_spa
├── @vue/cli-plugin-babel@4.5.15
├── @vue/cli-plugin-router@4.5.15
├── @vue/cli-plugin-vuex@4.5.15
├── @vue/cli-service@4.5.15
├── @vue/compiler-sfc@3.2.20
├── babel-eslint@10.1.0
├── chart.js@3.6.0
├── chartjs-plugin-annotation@1.1.0
├── chartjs-plugin-datalabels@2.0.0
├── core-js@3.19.0
├── eslint-plugin-vue@7.20.0
├── simple-jscalendar@1.4.4
├── vue-router@4.0.11
├── vue@3.2.20
├── vue3-smooth-dnd@0.0.2
├── vuex-persist@3.1.3
└── vuex@4.0.2

编辑：在咨询 jsCalendar 的作者时，我了解到该脚本作用于页面加载事件，这解释了为什么导航到视图时内容不更新。外部脚本有一个autoFind()函数，可以调用mounted()它来更新内容；但是，我一直无法找到调用该函数的正确方法。

import jsCalendar from 'simple-jscalendar'

mounted() {
  jsCalendar.autoFind()
  this.$emit('page-data', {title: 'calendar', content: '',})
},

结果是：

Unhandled Promise Rejection: TypeError: simple_jscalendar__WEBPACK_IMPORTED_MODULE_0___default.a.autoFind is not a function.
4

1 回答 1

0

我查看了链接中的文档，这就是我要做
的：从 div 中删除，auto-jsCalendar因为这是在加载页面时使其工作的钩子，但在导航和添加ref.
然后在您安装的钩子中调用jsCalendar.new此处记录的： https ://gramthanos.github.io/jsCalendar/docs.html （Javascript 创建日历）

<template>
    <div class="black-theme"
         data-navigator-position="right"
         data-month-format="month YYYY"
         data-day-format="DDD"
         ref="calendar">
    </div>
</template>

<script>
import 'simple-jscalendar'

  export default {
    emits: ['page-data'],
    mounted() {
      jsCalendar.new(this.$refs.calendar)
      this.$emit('page-data', {title: 'calendar', content: '',})
    },
  }
</script>

<style>
  @Import '~simple-jscalendar/source/jsCalendar.css';
  @Import '~simple-jscalendar/themes/jsCalendar.darkseries.css';
</style>

虽然从长远来看，我建议寻找一个为 Vue 构建的库。如果第三方库操作 Vue 也使用的 DOM，这总是有点棘手。

于 2021-12-02T13:26:22.300 回答