资讯专栏INFORMATION COLUMN

基于vue2.x的手机端日期选择插件

tyheist / 2094人阅读

摘要:基于的手机端日期选择插件实际需求中总会有一些轮子是需要自己造的,比如现在说的这个时间选择插件,在网上找了好多都和的交互需求差一点,做完后发出来分享一下吧,如果觉得不错或者帮到你了请记得具体是这个样子的预览点这里手机端扫码项目地址点这里如何使

基于vue2.x的手机端日期选择插件

实际需求中总会有一些轮子是需要自己造的,比如现在说的这个时间选择插件,在网上找了好多都和UI的交互需求差一点,做完后发出来分享一下吧,如果觉得不错或者帮到你了请记得star

具体是这个样子的:

demo预览点这里

手机端扫码

项目地址点这里

如何使用

npm insatll

npm run dev

访问localhost

props

    showCalendar: {
      type: Boolean, //控制显示隐藏
      default: false
    },
    options: {
      type: Object,
      default() {
        return {
          start: "", // 开始日期
          end: "", // 结束日期
          maxDate: "12m", // 月份跨度
          startDate: "", // 默认选中的开始日期,
          endDate: "" // 默认选中的结束日期
        };
      }
    },
    isDoubleCheck: {
      type: Boolean,//是否双选,false的话只能选择一个时间
      default: true
    }

事件

changeDate: 选择成功后的事件 
            

事件参数:

start:开始时间

end:结束时间,如果没选结束时间,则开始时间=结束时间

注意:

默认使用了better-scroll(滑动体验) 和 fast-click(去除手机端点击的300ms延迟)两个依赖,都是为了让体验更加好

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/94506.html

相关文章

  • 基于Vue2.x日期选择组件

    摘要:基于日期选择组件是一款稍微复杂的组件,其中涉及的日历计算与显示需要比较清晰的逻辑。 vue-datepicker - 基于Vue2.x日期选择组件 Datepicker是一款稍微复杂的组件,其中涉及的日历计算与显示需要比较清晰的逻辑。 项目地址 https://github.com/watson-yan... 预览图 showImg(https://segmentfault.com/i...

    NusterCache 评论0 收藏0
  • 基于zepto移动轻量级日期插件

    摘要:本文简单介绍近来写的一款基于的移动端轻量级日期插件。再来看看兼容性对于移动开发足矣最后就是在绑定事件的兼容性问题,不同厂商对于这个事件的定义并不一致,比如里面监听的是事件,但是在安卓里面监听事件完全没反应,经过一番,发现安卓需要监听事件。 前言 做过移动Web开发的同学都知道,移动端日期选择是很常见的需求。在PC端,我们有很丰富的选择,比较出名的就有Mobiscroll和jQuery ...

    ranwu 评论0 收藏0
  • ElementUI日期选择器时间选择范围限制

    Element是一套基于vue2.x的一个ui框架。官方文档也很详细,这里记录一个element-ui日期插件的补充官方文档中使用picker-options属性来限制可选择的日期,下面举例补充: 单个日期时间输入框 组件代码: 情景1: 设置选择今天以及今天之后的日期 data (){ return { pickerOptions0: { disabl...

    liangzai_cool 评论0 收藏0
  • 2017年2月份前资源分享

    平日学习接触过的网站积累,以每月的形式发布。2017年以前看这个网址:http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二维码 十大经典排序算法(带动图演示) 为什么知乎前端圈普遍认为H5游戏和H5展示的JSer 个人整理和封装的YU.js库|中文详细注释|供新手学习使用 扩展JavaScript语法记录 - 掉坑初期工具 汉字拼音转换...

    lily_wang 评论0 收藏0
  • 2017年2月份前资源分享

    平日学习接触过的网站积累,以每月的形式发布。2017年以前看这个网址:http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二维码 十大经典排序算法(带动图演示) 为什么知乎前端圈普遍认为H5游戏和H5展示的JSer 个人整理和封装的YU.js库|中文详细注释|供新手学习使用 扩展JavaScript语法记录 - 掉坑初期工具 汉字拼音转换...

    chengjianhua 评论0 收藏0

发表评论

0条评论

tyheist

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<