Vue3 使用 Vanilla JS Datepicker

Question

我正在尝试在 Vue3 项目中使用 Vanilla JS Datepicker，但不确定如何正确设置它。根据文档（我意识到与 Vue 没有具体关系），我已经安装了该包：

npm install --save-dev vanillajs-datepicker 

在模板中：

<input type="text" name="foo" />

剧本：

import { Datepicker } from "vanillajs-datepicker";


mounted() {
    const elem = document.getElementById("foo");
    const datepicker = new Datepicker(elem, {
      // ...options
    });
},

我收到错误：

错误“datepicker”被分配了一个值但从未使用过

更新

<input type="text" ref="foo" />

new Datepicker(this.$refs.foo, {
  // ...options
});

一切正常。

Answer 1

更新

这是我实现的可行解决方案。
我发现它已经有点乱了，不确定我是否会使用那个，但可以说它有效。

<script setup>
import { onMounted } from "vue";
import "../../node_modules/vanillajs-datepicker/dist/css/datepicker.min.css";
import Datepicker from "vanillajs-datepicker/Datepicker";

onMounted(() => {
  const elem = document.querySelector('input[name="date"]');
  const datepicker = new Datepicker(elem);
  console.log("picker", datepicker);
});
</script>

<template>
  <input type="text" name="date" />
</template>

---

该错误与 ESlint 有关，这意味着您的变量

datepicker

未在代码中使用（此网站上有很多类似的问题，如果您需要更多详细信息，您可以查找）。

例如，如果您使用

console.log(datepicker)

，它就会消失。

您还可以禁用该

rule

或将其标记为

warning

。

至于

elem

，您应该使用模板引用：https://vuejs.org/guide/essentials/template-refs.html#template-refs
它会产生与文档选择器相同的结果，但这是一种更好的做法，因为您使用的是 SPA。