Vue3使用香草JS日期picker

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，您应该使用模板ref: https://vuejs.org/guide/essentials/template-refs.html#template-refs
它将产生与文档选择器相同的结果，但由于您使用的是SPA，因此这是更好的实践。