DZone>Web Dev Zone>Vuetensils 0.10: Vue 3, Vite, Better Forms, and More
Vuetensils 0.10: Vue 3, Vite, Better Forms, and More
我最近发布了Vuetensils的最新版本。下面是Vuetensils最吸引人的一些功能，以及如何利用它们。
通过
-
1月31日，22 - Web Dev Zone -新闻
喜欢 (2)
评论
保存
鸣叫
390次浏览
加入DZone社区，获得完整的会员体验。
我最近发布了Vuetensils的最新版本，想花点时间分享一下我最兴奋的一些功能。
Vue 3和Vite
对于任何从事新项目或新升级项目的人来说都是个好消息。Vuetensils现在可以和Vue 3一起工作。我们利用了 vue-demi来做一个小魔术来检查当前的版本是Vue 2还是3。
不幸的是，这确实意味着在项目中加入了我的第一个依赖项，但它允许支持最多的人，而不必维护两个项目。这使得我们更容易不断向大家推送新的功能，而不仅仅是Vue 3上的人们。
除了支持Vue 3之外，我还修复了一些阻碍支持Vite的因素。Vite是一个很棒的工具，我一直在用它进行开发（我甚至在开发一个叫Particles CSS的插件），所以它很好地维护了
VInput的改进
这可能是我最喜欢的新功能。VInput一直支持类和状态的一些验证错误逻辑，但我也一直在为生成验证错误信息而进行API设计。
许多其他的库为你做这个，只是决定错误信息是什么。这对这个库来说，设计责任有点大，但我想出了一个我相当满意的解决方案。
你现在可以向VInput提供一个errors 对象，并将适当的错误信息映射到相应的验证属性中。
它看起来像这样。
JavaScript
<template>
<VInput
label="Pick a number between 1 and 10"
name="one-to-ten"
type="number"
required
min="1"
max="10"
:errors="{
required: 'This field is required',
min: (n) => `Must be greater than ${n}`,
max: (n) => `Must be less than ${n}`,
}"
>
</VInput>
</template>
你可以为要显示的错误信息提供一个字符串，或者提供一个返回字符串的函数。该函数提供的是相应属性的值。
除了这个验证的改进，我还发现了我原来的验证逻辑中的一个错误，现在已经被修复了。我猜想还没有人碰到过这个bug。
VForm的改进
VForm现在接受一个preventNavigation 道具作为Boolean ，它将观察你的表单是否有任何变化。如果有任何输入的变化，浏览器会在离开之前通知用户，除非表单已经提交。
另一个被添加到Form中的便利是valid 和invalid 自定义事件。这些事件的工作原理与默认的submit 事件非常相似，但它们只在表单有效或无效时运行（如其名称所示）。
JavaScript
<template>
<VForm @valid="onValid" @invalid="onInvalid" novalidate>
<label>
Name:
<input name="name" required />
</label>
<button type="submit">
Submit
</button>
</VForm>
</template>
<script>
export default {
methods: {
onValid(event) {
event.preventDefault()
console.log('Everything looks good', event)
},
onInvalid(event) {
event.preventDefault()
console.log('Please fix the errors and try again', event)
},
}
}
</script>
这里的想法是减少你的应用程序在提交表单时可能会有的一些逻辑，并将功能分割开来。
VTabs重写
我对VTabs组件的第一次尝试还不错，但不是很好。没有一个很好的选项来定制标签的内容。
在这个新版本中，我对标签的创建方式更加满意。这都是基于标签和面板的自定义插槽名称。
它看起来像这样。
JavaScript
<template>
<VTabs>
<template #tab-1>Tab 1</template>
<template #panel-1>
Here's the content for tabpanel 1.
</template>
<template #tab-2>Tab 2</template>
<template #panel-2>
Here's the content for tabpanel 2.
</template>
<template #tab-3>Tab 3</template>
<template #panel-3>
Here's the content for tabpanel 3.
</template>
</VTabs>
</template>
唯一的要求是，你的标签名称以tab- 为前缀，面板名称以panel- 为前缀。标签和面板通过共享相同的后缀来连接。
这使得学习曲线相当简单，有很大的灵活性。
VDate i18n
由于Benjamin Courtel的一些工作，有一个小的PR来改善VDate组件的国际化支持。你现在可以为导航按钮提供自定义标签。
TypeScript
TypeScript支持在上一版本中已经部分存在，但几乎没有帮助任何人的方式。组件的类型定义没有被生成。这是一个忽略的问题。
现在，一些新的工具已经发布，而我也有时间，Vuetensils组件与类型定义文件一起发货，感谢 vue-typegen作者：Guillaume Chau。
这应该会使库的使用变得更加顺畅。
文档和依赖性
我注意到我的一些构建破坏了文档网站，所以我不得不深入研究并更新依赖关系，压制一些bug。
最终，我找到了潜在的问题并提交了一份PR。这个问题应该只对那些对项目有贡献的人有影响，因为文档也是开发环境。
主题。
vue.js, web开发, 编程, javascript, 前端, web开发区, vuetensils
经Austin Gil许可，发表于DZone。在此查看原文。
DZone贡献者所表达的观点属于他们自己。
在DZone上受欢迎
评论
