Nonviolent Pigeon Manifestation

    vue-component-weekcalender

    1.1.1 • Public • Published

    vue 日历(以周为单位)组件

    typescript+vue开发的日历组件,使用swiper库来支持日历滑动功能,简单易用

    npm NPM Version npm

    代码示例

    image image

    • 安装组件包

        npm install vue-component-weekcalender --save-dev
      
    • js代码(没有自定义(reset=false的情况)日期状态的实例)

      import Vue from 'vue';
      import VueWeekcalender from "vue-component-weekcalender";
       
      new Vue({
      el: '#app',
      components: {
        VueWeekcalender
      },
      data() {
        return {
          options: {
            showHeader: true,
            beginDate: "2018-07-30",
            endDate: "2018-08-12",
            currentDate: "2018-08-03"
          }
        }
      },
      methods: {
        chooseDayItemHandle: function (dayItem) {
          console.log(dayItem)
        },
       
        slideChangeHandle:function(item) {
          console.log(item);
        }
      }
      });
    • html模板

      <div id="app">
        <vue-weekcalender 
         @on-slide="slideChangeHandle"
         @on-click="chooseDayItemHandle"
         :option="options">
        </vue-weekcalender>
      </div>
      <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
      <script src="./dist/index.js"></script>

    • 自定义日期每天状态的实例(reset=true的情况)

      import "./index.less";
      import Vue from 'vue';
      import VueWeekcalender from "vue-component-weekcalender";
       
      new Vue({
        el: '#app',
        components: {
          VueWeekcalender
        },
        data() {
          return {
            options: {
              showHeader: true,
              beginDate: "2018-07-01",
              endDate: "2018-09-16",
              currentDate: "2018-08-04"
            },
            reset: true,
            dayStatus: [{
              currentDate: "2018-08-13",
              dayClass: "day enabled",
              enabled: true,
              default: true
            }, {
              currentDate: "2018-08-14",
              dayClass: "day enabled",
              enabled: true,
              default: false
            }]
          }
        },
        methods: {
       
          changeStatus:function() {
            this.dayStatus= [{
              currentDate: "2018-08-04",
              dayClass: "day enabled",
              enabled: true,
              default: true
            }, {
              currentDate: "2018-08-14",
              dayClass: "day enabled",
              enabled: true,
              default: false
            }]
          },
          
          chooseDayItemHandle: function (dayItem) {
            console.log(dayItem)
          },
       
          slideChangeHandle: function (item) {
            console.log(item);
          }
        }
      });
    • html模板

      <!DOCTYPE html>
      <html lang="en">
       
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
      </head>
       
      <body style="margin:0;">
        <div id="app">
          <button @click="changeStatus">修改状态</button>
          <vue-weekcalender 
           @on-slide="slideChangeHandle"
           @on-click="chooseDayItemHandle"
           :option="options"
           :reset="reset"
           :status"dayStatus">
          </vue-weekcalender>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> 
        <script src="./dist/index.js"></script> 
      </body>
       
      </html>

    组件API

    • calender props
    属性 说明 类型 默认值
    option option对象提供4个属性值:

    showHeader(是否显示标题),
    beginDate(开始时间:yyyy-MM-dd格式),
    endDate(结束时间:yyyy-MM-dd格式),
    currentDate(当前时间:yyyy-MM-dd格式)
    object 空对象
    reset 是否需要重置初始化生成的日历的每天日期,默认值为false,
    该值设置为true以后,使用者可设置status属性,来自定义修改生成的日历每天日期状态,原来日历中每一项均不可点,即每一项的
    enabled属性会被重置为false
    boolean false
    status 需要自定义的日期状态数组(reset属性为true有效),
    数组的每一项是个object对象,对象提供一下几个属性:
    currentDate:当前日期格式yyyy-MM-dd
    dayClass:当前日期显示的样式名称
    enabled:boolean类型,是否可用(可以点击)
    default:boolean类型,是否是默认选中的一天,true为默认选中的一天,
    需要注意的是,status的数组对象中,仅有一项default的值为true(有多个日期为选中状态,不符合实际需求吧)
    Array []
    • calender events
    方法名称 说明 参数
    on-click 日历上某一天触发 当前日期对象,对象有以下属性:

    currentDate:选中的日期,格式:yyyy-MM-dd,
    dayClass:类名称,
    dayDesc/day:几号,如:2,
    enabled:是否可以点击,true表示可以点击
    on-slide 左右滑动日历触发 返回滑动到的下一个日历的第一天日期,格式:yyyy-MM-dd格式

    组件开发说明

    • 安装依赖

      npm/cnpm install
      
    • 编译

      npm run build
      
    • demo运行

      # cd test
      # npm/cnpm install
      # npm run build
      
      #把test目录的index.html在浏览器打开,切换到移动的端模拟器,可以预览在手机端的展示结果
      

    ### 备注 相互学习共同提高,欢迎使用并且issue

    Install

    npm i vue-component-weekcalender

    DownloadsWeekly Downloads

    6

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    919 kB

    Total Files

    29

    Last publish

    Collaborators

    • shangshanruoshui