vant - 弹框 【Popup 弹出层】【DatetimePicker 时间选择】
【HelloWorld.vue】
<template>
<div class="hello">
<van-row class="m-header">
<van-col span="">
<van-icon name="arrow-left" class="m-header-icon" />内容</van-col>
</van-row>
<van-button type="primary" @click="showpopup">按钮</van-button>
<van-popup v-model="show" position="bottom">
<van-datetime-picker
v-model="currentDate"
type="date"
:min-date="minDate"
:max-date="maxDate"
:formatter="formatter"
/>
</van-popup>
</div>
</template>
<script>
import { Popup } from 'vant';
Vue.use(Popup);
export default {
data() {
return {
show: false,
minDate: new Date(,,),
maxDate: new Date(,,),
currentDate: new Date()
};
},
methods:{
popup:function(){
if(!this.show){
this.show = true;
}else{
this.show = false;
}
},
formatter(type, value) {
if (type === 'year') {
return `${value}年`;
} else if (type === 'month') {
return `${value}月`
} else if (type === 'day') {
return `${value}日`
}
return value;
}
}
};
</script>
position弹框位置等属性查看vant API 【Popup 弹出层】
type="datetime"
具体到时间
type="year-month"
只有年、月
vant - 弹框 【Popup 弹出层】【DatetimePicker 时间选择】的更多相关文章
- layer弹框,弹出后自动关闭
今天做项目,出现一个问题,需求是用ajax做文件上传功能,代码写好之后,测试发现问题. 弹出层出现以后我没有主动点击确定和关闭等操作,程序自动关闭了弹出层 一步一步排查,找到了错误,首先,先确认你页面 ...
- elementUI MessageBox弹框 <el-dialog>弹框如果出现input的type属性为password。项目中用到日期组件的地方会报错
ElementUI:项目中如果用到MessageBox弹框的输入框input且type为password,以及用到<el-dialog>里面用到input且type为password.此时 ...
- cookie-在关闭浏览器之前弹框只弹一次
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- css-dialog样式实现弹框蒙层全屏无需JS计算高度兼容IE7
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title> ...
- iOS 15 无法弹出授权弹框之解决方案---Your app uses the AppTrackingTransparency framework, but we are unable to locate the App Tracking Transparency permission request when reviewed on iOS 15.0
2021年9月30日下午:我正愉快的期盼着即将到来的国庆假期,时不时刷新下appstoreconnect的网址,28号就提上去的包,今天还在审核中....由于这个版本刚升级的xcode系统和新出的iO ...
- [组件封装]微信小程序-底部弹框
描述 模仿ios浏览器底部弹框效果. 遮罩层淡入淡出,弹框高度根据内容自适应. 效果 源码 popup-bottom.wxml <!-- popup-bottom.wxml --> < ...
- html自定义弹框
一.要实现的功能 1.弹框弹出时有遮罩 2.弹框内的文字过多时右侧有滚动条 3.根据执行结果变更弹框title的样式 二.具体实现 思路:定义一个有宽高的div,默认隐藏,当要显示时,设置为dis ...
- 在弹框中获取foreach中遍历的id值,并传递给地址栏(方法2)
1.php有时候我们需要再弹框中获取foreach中遍历的数据(例如id),在弹框中点击按钮并传递给地址栏跳转.那么应该怎么做呢.第二种方法. 2. 可以在弹框中给出一个input hidden 点击 ...
- pc端弹框
pc弹框插件:http://aui.github.io/artDialog/doc/index.html#quickref-bubble PC端,手机端,layui很好用,分页啥的:http://ww ...
随机推荐
- 两种简单实现菜单高亮显示的JS类(转载)
两种简单实现菜单高亮显示的JS类 近期在写一个博客管理后台的前端,涉及在同一页面两种高亮显示当前菜单的需求.记得当年写静态页时,为了实现高亮都是在每个页面加不同的样式,呵.高亮显示我觉得对于web ...
- [原]CentOS 7 网卡子接口的创建
OS:CentOS 7 在linux上创建vlan需要加载802.1q模块: 1.检测OS是否已经加载802.1q模块 [root@controller ~]# modinfo 8021q filen ...
- 微信小游戏 main.js没有被压缩
发布时,发现main.js没有被压缩. 在config.wxgame.ts里增加如下图.
- 【CF526F】Pudding Monsters cdq分治
[CF526F]Pudding Monsters 题意:给你一个排列$p_i$,问你有对少个区间的值域段是连续的. $n\le 3\times 10^5$ 题解:bzoj3745 Norma 的弱化版 ...
- 中小学教育缴费----支付宝回传数据.net core 接收中文乱码
问题描述: 中小学教育缴费,发送账单到家长支付宝,家长支付成功之后,支付宝回传数据,验签的时候失败了,排查之后发现账单名称乱码了.支付宝回传的时候中文传的是GBK编码格式,但是我接收的是%D5˵%A5 ...
- at MySql.Data.MySqlClient.MySqlStream.ReadPacket 或 FUNCTION account.AddMinutes does not exist
Application Exception MySql.Data.MySqlClient.MySqlException FUNCTION account.AddMinutes does not exi ...
- SQL中的between and
"between xx and xx "在SQL中的用法 这个大家都很熟悉,但是当问到是否包含两端的值时,就有点儿不确定了.在W3School网站上,有这样的一段话: 参考:ht ...
- vue + vue-router+vuex+elementUI开发环境搭建
先在npm中安装vue脚手架, //先安装国内镜像源 npm install -g cnpm --registry=https://registry.npm.taobao.org //安装vue cn ...
- HDU5988/nowcoder 207G - Coding Contest - [最小费用最大流]
题目链接:https://www.nowcoder.com/acm/contest/207/G 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5988 ...
- 查询大数据表的效率对比:Linq to SQL、Entity Framework、企业库存储过程、ADO.Net
最近因为要开发大数据量网站,特作比较. Linq to SQL 查询 记录数:399997Linq to SQL 查询 Milliseconds:1910视图查询 记录数:399997视图查询 Mil ...