vant 时间选择器--开始时间和结束时间实例

2023-07-12 19:51:03 178

我就废话不多说了，大家还是直接看代码吧~






/*覆盖原有弹出层样式*/
.van-popup{
position:absolute;
background:transparent;
/*bottom:3.01rem;*/
}
/*覆盖日期组件原有样式*/
.van-picker{
position:relative;
background-color:#fff;
user-select:none;
width:100%;
}

/*筛选条件们的div样式*/
.conditionDiv{
display:flex;
justify-content:center;
width:100%;
height:3.7%;
margin-top:4%;
}
/*单个筛选条件的样式*/
.singleCondition{
width:27%;
margin-left:2%;
margin-right:2%;
/*border:1pxsolid#451da4;*/
height:100%;
/*padding-right:5%;*/
color:#fff;
display:flex;
justify-content:center;
align-items:center;
/*flex-direction:column;*/
font-size:0.72rem;
}
/*日期组件的div，由于其背景用icon而非整个背景图，因此样式上不同*/
.singleDateDiv{
width:23%;
margin-left:2%;
margin-right:2%;
/*border:1pxsolid#451da4;*/
height:100%;
color:#fff;
padding-right:5%;
display:flex;
justify-content:flex-start;
}
/*日期的值位置样式*/
.dateValueDiv{
display:flex;
justify-content:center;
flex-direction:column;
font-size:0.72rem;
width:82%;
}
/*日期弹出层中选择今天div样式*/
.chooseTodayDiv{
box-sizing:border-box;
z-index:2;
display:flex;
justify-content:center;
align-items:center;
position:absolute;
bottom:0;
color:red;
height:3rem;
width:90%;
background:#fff;
border-top:1pxsolidlightgrey;
font-size:0.875rem;
}

/*日期弹窗*/
.popupDate{
border-radius:2px;
background:#fff;
height:100%;
width:90%;
margin:0auto;
}

补充知识：Vant库的使用，及日期组件的一些注意点

Vant库对于开发商城类项目，真的是非常nice，会让你情不自禁爱上它。Vant库支持按需加载、为移动端商城设计的风格，非常完美。但是，本人在实际开发中，也遇到了一些小问题，折腾了老半天，最终得以解决。

下面先说说在vue中使用Vant库的流程及一些注意事项，以及遇到的坑和解决办法。

首先送上官网传送门：www.youzanyun.com/zanui/vant#…，具体的api可自行查阅使用。

第一步，安装：

cnpmivant-S

第二步，引入组件：

关于怎么引入Vant组件，有全局引入（非常不推荐）和按需引入两种方式

这里演示按需引入的方式，因为官网说的稍微有些复杂，对于一些刚接触的小伙伴，可能会造成一些误解（PS：我在刚开始接触的时候这里就蹲了两个坑，简直欲哭无泪呀~）。直接说怎么用吧：

为了方便我们按需引入组件，这里还需要安装一个插件

cnpmibabel-plugin-import-D

安装好该插件好，还需要在.babelrc文件中plugins那里进行一个简单的配置，这里附上完整的plugins部分内容。这里我们在plugins数组中插入了import那个数组，其他内容是原来就有的。

"plugins":[
"transform-vue-jsx",
"transform-runtime",
["import",{
"libraryName":"vant",
"libraryDirectory":"es",
"style":true
}]
]

完成好配置后，在main.js中按需引入你需要的组件。例如这里引入Vant的button组件：

import{Button}from'vant';//在mian.js中通过import导入组件，多个组件直接在{，，，}加入即可
Vue.use(Button);//让vue加载该组件如果还需要用其他组件，可以这样写Vue.use(Button).use().user();
默认按钮//在template中使用组件

这里提一点，如果是类似Toast这种组件，只需要在main.js中引入就好：

import{Toast}from'vant';

//然后在你需要的页面直接这样使用就好
//只要引入后，vant就会自动把Toast组件挂在vue的原型上Vue.prototype.$Toast=Toast;
this.$Toast('message');

可以看到，这里button组件以及正常导入使用了。Vant中还有更多适合实际开发的功能更丰富的组件，小伙伴们自行查阅官方文档使用吧。

附官网API文档传送门：www.youzanyun.com/zanui/vant#…

最后，在说一个关于Vant日期组件使用时所遇到的一个大坑。

Vant日期组件的官网api没有给出关于事件函数的使用demo，到时小编在使用时不小心迈进了一个大坑。

就是change或者confirm事件时，怎么都获取不到回调参数，即在点击确定时回去不到返回的选中时间，总是提示undefined或者null。下面是小编错误的写法，大家不要踩坑：




//这是对应的方法
methods:{
confirm(val){
console.log(val)
},
change(e){
console.log(e.getValues())
}
}

乍一看，是按照文档上说的方式使用的呀，可是不仅confirm没有返回选中的日期时间，change事件的各种回调方式也使用不了。

但是吧，如果你要打印1，又可以打印出来，说明接口走这个方法了。

到底怎么回事呢，选中的时间怎么就出不来呢？小编差点都要怀疑是不是这个Vant组件有问题了！

说重点：后来小编终于找到了解决办法：

原来是这里出了问题，@confirm="confirm()"@change="change()"

这里多加了一对括号，正确的写法是




//这是对应的方法
methods:{
confirm(val){
console.log(val)//打印出了时间
},
change(e){
console.log(e.getValues())//打印出了选中的时间，是个数组
}
}

到这，问题圆满解决了！

以上这篇vant时间选择器--开始时间和结束时间实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

vant 时间选择器--开始时间和结束时间实例

热门推荐

随机推荐