基于vue2.0+vuex的日期选择组件功能实现


Posted in Javascript onMarch 13, 2017

calendar vue日期选择组件

一个选择日期的vue组件

基于vue2.0 + vuex

原本是想找这样的一个组件的,查看了vuex后,发现vuex的写法还不是基于2.0的,所以就自己动手做了

demo展示&&项目中的使用

基于vue2.0+vuex的日期选择组件功能实现

基于vue2.0+vuex的日期选择组件功能实现

目录结构

demo 用vue-cli 的webpack-simple构建的

calendar
 |--dist build生成的目录
 |--doc  展示图片
 |--src
 |--assets 资源

 |--components


 |--calendar  日期组件


 |--dateScroll 滚动的子组件

 |--css

 |store  vuex目录


 |--modules



 |--calendar  


 |--mutation   组件的一些状态


 |--store

 |App.vue  入口

 |main.js

组件使用

组件可以传入一个年份的范围,startTime 和 endTime 都是数字, 默认是1900 - 2050

触发组件 this.$store.dispatch('calendarStatus',true)

<template>
   <div id="app">
    <p @click = "setDate">点击设置日期</p>
     <!--显示返回的日期-->
    <p>{{date}}</p>
     <!--组件-->
    <com-calendar :style = "calendar" :startTime = "start" :endTime="end"></com-calendar>
      <!--遮罩-->
    <div v-show = "mark" class="mark" @touchmove.stop.prevent ="" @touchstart.stop.prevent ="" @touchend.stop.prevent =""></div>

   </div>
  </template>

  <script>
   require('./css/style.scss');
  import calendar from './components/calendar';
  export default {
   name: 'app',
   data () {
    return {
     //选择日期的开始返回,默认是1900 - 2050
      start:1950,
      end:2030
    }
   },
   components:{
    comCalendar:calendar
   },
   methods:{
    setDate:function () {
     //触发日期组件
     this.$store.dispatch('calendarStatus',true);
    }
   },
    computed:{
     //遮罩状态
     mark:function () {
      return this.$store.getters.markStatus
     },
     //组件状态
     calendar:function () {
      return this.$store.getters.getCalendarStatus?{ display:'block'}:{ display:'none'};
     },
     //返回的日期
     date:function () {
      return this.$store.getters.getCalendarDate;
     }

    }

  }
  </script>

运行

# install dependencies
npm install

# serve with hot reload at localhost:8081
npm run dev

# build for production with minification
npm run build

版本

1.0.0 vue日期组件

demo地址:vue-calendar_3water.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让textarea自动调整大小的js代码
Apr 12 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
May 15 Javascript
JavaScript实现动态添加,删除行的方法实例详解
Jul 02 Javascript
js跨域请求的5中解决方式
Jul 02 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
手动初始化Angular的模块与控制器
Dec 26 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 Javascript
jQuery复合事件用法示例
Jun 10 jQuery
angularjs实现上拉加载和下拉刷新数据功能
Jun 12 Javascript
详解如何在Vue里建立长按指令
Aug 20 Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 Javascript
js实现全选和全不选
Jul 28 Javascript
VUE实现日历组件功能
Mar 13 #Javascript
JS正则表达式判断有效数实例代码
Mar 13 #Javascript
又一款MVVM组件 构建自己的Vue组件(2)
Mar 13 #Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 #Javascript
干货!教大家如何选择Vue和React
Mar 13 #Javascript
JavaScript 数据类型详解
Mar 13 #Javascript
Java与JavaScript中判断两字符串是否相等的区别
Mar 13 #Javascript
You might like
推荐几个开源的微信开发项目
2014/12/28 PHP
php的4种常用运行方式详解
2016/12/22 PHP
js 图片轮播(5张图片)
2008/12/30 Javascript
JavaScript 对象、函数和继承
2009/07/07 Javascript
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
Three.js源码阅读笔记(物体是如何组织的)
2012/12/27 Javascript
JavaScript中prototype为对象添加属性的误区介绍
2013/10/15 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
JavaScript中的闭包
2016/02/24 Javascript
JS实现漂亮的时间选择框效果
2016/08/20 Javascript
AngularJs ng-route路由详解及实例代码
2016/09/14 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
利用Bootstrap实现表格复选框checkbox全选
2016/12/21 Javascript
angular ng-click防止重复提交实例
2017/06/16 Javascript
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
JS分页的实现(同步与异步)
2017/09/16 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
2017/10/06 Javascript
vue-router配合ElementUI实现导航的实例
2018/02/11 Javascript
使用vue实现一个电子签名组件的示例代码
2020/01/06 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
2020/08/04 Javascript
python列表操作实例
2015/01/14 Python
Python代码调试的几种方法总结
2015/04/15 Python
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
Python使用贪婪算法解决问题
2019/10/22 Python
python中time.ctime()实例用法
2021/02/03 Python
CSS3实现超慢速移动动画效果非常流畅无卡顿
2014/06/15 HTML / CSS
微软中国官方旗舰店:销售Surface、Xbox One、笔记本电脑、Office
2018/07/23 全球购物
广州品高软件.net笔面试题目
2012/04/18 面试题
大学生职业生涯规划范文——找准自我,定位人生
2014/01/23 职场文书
大学辅导员事迹材料
2014/02/05 职场文书
单位委托书范本(3篇)
2014/09/18 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
调研报告的主要写法
2019/04/18 职场文书
关于Python中进度条的六个实用技巧分享
2022/04/05 Python