Vue 用Vant实现时间选择器的示例代码

1.查看Vant官网https://youzan.github.io/vant/#/zh-CN/datetime-picker

引入Vant中DatetimePicker组件（全局引入后可直接使用）

import Vue from 'vue';
import { DatetimePicker } from 'vant'
Vue.use(DatetimePicker);

关键使用代码（结合vant组件Popup的底部弹出层一起使用）

<van-popup v-model="dateShow" position="bottom">
   <van-datetime-picker v-model="currentDate" type="year-month" @cancel="handleCancel"
    @confirm="handleEndDateConfirm" />
  </van-popup>

export default {
 data() {
  return {
   dateShow: false,
   currentDate: new Date()
  };
 }
}

效果图

实现点击确定 和取消的方法

handleCancel () {
   this.dateShow = false;
  },
  //开始时间
  handleEndDateConfirm () {
   this.dateShow = false;
   this.titleTime = dateFormat(this.currentDate, 'yyyy-MM')
  },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue与bootstrap实现时间选择器的示例代码

    一.下载bootstrap-datetimepicker时间选择器js,css文件. 1. github地址:bootstrap-datetimepicker 2. 官方网站地址:官网bootstrap-datetimepicker地址,有具体的例子与解释 二.在vue项目文件中引入 import './assets/css/bootstrap.min.css' import "./assets/css/bootstrap-datetimepicker.min.css" import

  • Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能

    具体代码如下所述: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue.js中使用iView日期选择器并设置开始时间结束时间校验</title> <!-- import Vue.js --> <script src="//vuejs.org/js/vue.min.js"></script

  • Vue 用Vant实现时间选择器的示例代码

    Vue 用Vant实现时间选择器的示例代码

    1.查看Vant官网https://youzan.github.io/vant/#/zh-CN/datetime-picker 引入Vant中DatetimePicker组件(全局引入后可直接使用) import Vue from 'vue'; import { DatetimePicker } from 'vant' Vue.use(DatetimePicker); 关键使用代码(结合vant组件Popup的底部弹出层一起使用) <van-popup v-model="dateShow&

  • vue实现两列水平时间轴的示例代码

    vue实现两列水平时间轴的示例代码

    目录 一.实现组件timelineH.vue 二.调用组件 本文主要介绍了vue实现两列水平时间轴的示例代码,分享给大家,具体如下: 先上图,主要实现两列水平时间轴,查看了很多人实现的,水平只有一列,并且elementUI的时间轴只有竖着的,不支持横向,最后只能含泪自己实现了,没想到还可以,只是如果数据很多翻页还没实现,有实现过这种的掘友可以艾特我一下. 一.实现组件timelineH.vue timelineH.vue中的H代表横,起名字烦恼,哈哈. <template> <ul cl

  • 使用Vue调取接口,并渲染数据的示例代码

    刚接触vue.js框架的时候,很伤脑筋.今天整理一下post/get两种方式,简单的调取数据库数据,并进行渲染,希望帮助大家! 首先,在HTML页面引入: //引入vue.js文件 <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> 引入vue-resource.min.js文件,就可以引入接口方法了 <script src="https://cdn.st

  • Vue+SpringBoot实现支付宝沙箱支付的示例代码

    首先去下载支付宝沙箱的一系列东西,具体的配置什么的我就不说了,有很多博客都讲了,还有蚂蚁金服官方也说的很详细,我就直接说怎么样把后端的支付页面显示到Vue前端来: 在你配置好AlipayConfig这个文件后,就可以写前端的逻辑了,前端是采用支付宝的页面如下: 下面展示一些 内联代码片. /* 以下是支付确认html */ <div style="text=#000000 bgColor=#ffffff leftMargin=0 topMargin=4"> <head

  • flask和vue前后端分离项目部署的示例代码

    前段时间开发了一个项目, 我后端用的是flask框架写接口,前端用的是vue框架,项目前后端完全分离,部署的时候遇到一点问题,记录一下. 部署环境:centos6.5.Python3.6.3 .flask0.12.0 vue 部署方式:uwsgi+nginx 步骤: ​ 1.首先安装python运行环境,正常 ​ 2.安装uswsgi运行,正常(使用pip安装,pip install uwsgi): 新建config.ini文件 [uwsgi] # uwsgi 启动时所使用的地址与端口,ngin

  • Vue实现红包雨小游戏的示例代码

    Vue实现红包雨小游戏的示例代码

    目录 0 写在前面 1 准备工作 2 设计HTML+CSS样式 3 设计JavaScript逻辑 4 完整代码 0 写在前面 红包也叫压岁钱,是过农历春节时长辈给小孩儿用红纸包裹的礼金.据传明清时期,压岁钱大多数是用红绳串着赐给孩子.民国以后,则演变为用红纸包裹.中国的红包传统民族文化在民间如此,社区.公司也奉行如仪.除了春节以外,在其他喜庆场合,例如婚礼.新店开张等亦有送红包的习俗. 本期迎新春专题用代码制作一个 红包雨小游戏 ,效果如下所示.看完本文相信你也可以完成这样一个小游戏设计. 1

  • Vue实现悬浮框自由移动+录音功能的示例代码

    Vue实现悬浮框自由移动+录音功能的示例代码

    目录 效果如下 主要功能 实现 1.封装第一个漂浮组件FloatBall.vue 2.封装第二个组件录音组件Audio.vue 3.recorder.js 效果如下 主要功能 1.一个漂浮的球,在全屏幕中自由移动遇到边边角角自动改变方向 ,自带动画效果 2.录音功能,可以录制用户的声音,可以下载为任意格式的音频文件到本地,也可以通过二进制流发给后端 由于后端要声音文件格式wav或者pcm,采样率16000,所以我改了配置文件,稍后我会介绍在哪里改,改什么什么样都是可以的. 注:代码我已经封装成组

  • ImageView 实现Android colorPikcer 选择器的示例代码

    ImageView 实现Android colorPikcer 选择器的示例代码

    本文介绍了ImageView 实现Android colorPikcer 选择器的示例代码,分享给大家,具体如下: Android colorPikcer 选择器 环形的ColorPicker,主要思路是: Color 选在放在ImageView 的background上面,根据点击的位置判断选择的颜色. 重写onTouch,在onTouch 里面判断点击点的颜色. 根据当前选择的颜色设置图片的src. 获取Bitmap 在 ColorPickerView 构造函数中初始化 Bitmap.因为g

  • vue组件中使用iframe元素的示例代码

    本文介绍了vue组件中使用iframe元素的示例代码,分享给大家,具体如下: 需要在本页面中展示vue组件中的超链接,地址栏不改变的方法: <template> <div class="accept-container"> <div class="go-back" v-show="goBackState" @click="goBack">GoBack</div> <ul&g

随机推荐