• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

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

vue 搞代码 4年前 (2022-01-08) 12次浏览 已收录 0个评论

这篇文章主要介绍了 基于vue2.0+vuex的日期选择组件功能实现,详细介绍了使用vue编写的日期组件,,非常具有实用价值,需要的朋友可以参考下。

calendar vue日期选择组件

一个选择日期的vue组件

基于vue2.0 + vuex

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

demo展示&&项目中的使用

目录结构

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

 calendar  |--dist build生成的目录  |--doc  展示图片  |--src    |--assets 资源    |--components      |--calendar  日期组件      |--dateScroll 滚动的子组件    |--css    |store  vuex目录      |--modules        |--calendar      |--mutation   组件的一些状态      |--store    <strong>本文来源gao@daima#com搞(%代@#码@网2</strong>|App.vue  入口    |main.js

组件使用

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

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

  <div id="app"> <p>点击设置日期</p><!--显示返回的日期--><p>{{date}}</p><!--组件--><!--遮罩--><div class="mark"></div></div>

运行

 # 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_jb51.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持gaodaima搞代码网

以上就是基于vue2.0+vuex的日期选择组件功能实现的详细内容,更多请关注gaodaima搞代码网其它相关文章!


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:基于vue2.0+vuex的日期选择组件功能实现

喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址