panwenhua / vue-calendar-list-view Goto Github PK

View Code? Open in Web Editor NEW

基于vue的移动端日历列表组件，可用于旅游网站的出行日期选择。

HTML 3.53% JavaScript 4.67% Vue 64.46% CSS 27.33%

vue-calendar-list-view's Introduction

vue-calendar-list-view

一个日历列表组件。

install

Development

npm install
npm serve

Example

http://localhost:8000/

online example: https://panwenhua.github.io/vue-calendar-list-view/

Usage

import 'vue-calendar-list-view'
import 'vue-calendar-list-view/lib/calendarListView.css'


<template>
	<CalendarList :aroud="calendar.aroud" :on-select="onSelect" :options="calendar.options" :value="currentDate"></CalendarList>
</template>
<script>
export default {
  data() {
    return {
      calendar: {
        aroud: 12, //12个月
        options: [
          {
            //对应日期的  人数
            date: "2018-11-11",
            label: "剩12人",
            value: 12
          },
          {
            date: "2018-11-12",
            label: "剩13人",
            value: 13
          },
          {
            date: "2018-11-13",
            label: "剩14人",
            value: 14
          },
          {
            date: "2018-11-14",
            label: "剩15人",
            value: 15
          },
          {
            date: "2018-11-20",
            label: "剩16人",
            value: 16
          }
        ]
      },
      currentDate: null //当前选择的日期
    };
  },
  methods: {
    onSelect(date, value, recode) {
      //date：当前选择的日期 
      //value：当前选择的数量
      //recode：当前选择的的对象
      console.log(date, value, recode);
      this.currentDate = date;
    }
  }
};
</script>
<style lang="scss" scoped>
</style>

API

Props

name

type

default

description

aroud

Number

渲染日历的区间，例如当前为2018年11月，则日历会渲染2018年11月到2019年10月的数据

value

String

当前日历选中的值

options

Object[]

name	type	description
date	String	日期。例如 "2018-11-14"
value	String\|Number	日期对应的数量。比如出行人数"14"
label	String	对应数量的渲染label。比如"还剩14人"