本文介绍了如何在HTML文件中使用Vant组件库实现一个从底部弹出的时间选择器。首先通过CDN引入Vant，然后在<body>内创建<div id="app">作为挂载点。接着编写JavaScript函数，引用van-popup弹出层组件，并确保它处于半闭合状态以容纳时间选择器。同时，引入van-datetime-picker组件并设置点击事件来触发时间选择器的显示。最后，实现了将选中时间同步到输入框的功能，利用JS进行日期格式化。
需求 ：实现一个从底部弹出的时间选择器
1、直接在 html 文件中引入 CDN 链接，通过全局变量 vant 访问到所有组件
<!-- 引入样式文件 -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css"
/>
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
2、<body>里套一个最大的<div id="app"></div>
3、新建引用vant组件的 js 函数
< script >
new Vue({
el: "#app",
data() {
return {
};
},
methods
最低0.47元/天 解锁文章
1722
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
