基于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 相关文章推荐
jscript之Read an Excel Spreadsheet
Jun 13 Javascript
javascript Array数组对象的扩展函数代码
May 22 Javascript
js判断某个字符出现的次数的简单实例
Jun 03 Javascript
老生常谈js动态添加事件--- 事件委托
Jul 19 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
domReady的实现案例
Nov 23 Javascript
jQuery EasyUI 获取tabs的实例解析
Dec 06 Javascript
node.js入门学习之url模块
Feb 25 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 Javascript
ES6学习教程之模板字符串详解
Oct 09 Javascript
vue中移动端调取本地的复制的文本方式
Jul 18 Javascript
利用javaScript处理常用事件详解
Apr 14 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
PHP常用技术文之文件操作和目录操作总结
2014/09/27 PHP
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
功能强大的php文件上传类
2016/08/29 PHP
php发送http请求的常用方法分析
2016/11/08 PHP
js 上传图片预览问题
2010/12/06 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
2015/10/27 Javascript
JavaScript中通过提示框跳转页面的方法
2016/02/14 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
JS实现的tab页切换效果完整示例
2018/12/18 Javascript
js实现继承的方法及优缺点总结
2019/05/08 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
js实现录音上传功能
2019/11/22 Javascript
python模拟Django框架实例
2016/05/17 Python
python实现按任意键继续执行程序
2016/12/30 Python
PyQt5主窗口动态加载Widget实例代码
2018/02/07 Python
Python 利用scrapy爬虫通过短短50行代码下载整站短视频
2018/10/29 Python
python-opencv颜色提取分割方法
2018/12/08 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
python实现拼图小游戏
2020/02/22 Python
scrapy-redis分布式爬虫的搭建过程(理论篇)
2020/09/29 Python
5款实用的python 工具推荐
2020/10/13 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
使用html5实现表格实现标题合并的实例代码
2019/05/13 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
Holland & Barrett爱尔兰:英国领先的健康零售商
2019/03/31 全球购物
设计师个人求职信范文
2014/02/02 职场文书
实习老师离校感言
2014/02/03 职场文书
语文课外活动总结
2014/08/27 职场文书
老公写给老婆的检讨书
2015/05/06 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏