参数

Events

使用示例

<template>
  <div class="day-picker">
    <span @click="onShow">开始选择日期（星期日）</span>
    <p >{{daysText}}</p>
    <day-picker
      title="选择日期"
      :show.sync="show"
      :initValue="days"
      @confirm="onConfirm"
      @cancel="onCancel"
    >
    </day-picker>
  </div>
</template>
<script>
import Vue from "vue";
import { DayPicker } from "genie-ui";
export default {
  components: {
    DayPicker,
  },
  data() {
    return {
      // 是否显示选择器
      show: false,
      // 初始默认选中日期
      days: [1],
    }
  },
  computed: {
    daysText() {
      const defaultDays = [
        { key: 0, name: '周日' },
        { key: 1, name: '周一' },
        { key: 2, name: '周二' },
        { key: 3, name: '周三' },
        { key: 4, name: '周四' },
        { key: 5, name: '周五' },
        { key: 6, name: '周六' },
      ]
      return this.days.map(key => {
        const day = defaultDays.find(item => item.key === key)
        return day ? day.name : ''
      })
    }
  },
  methods: {
    onShow() {
      console.log('show day picker')
      this.show = true
    },
    onConfirm(selectedDays) {
      console.log('on confirm pick day', selectedDays)
      this.days = selectedDays
    },
    onCancel() {
      console.log('on cancel pick day')
    },
  }
};
</script>
<style scoped>
  .del {
    height: 100%;
    width: 50px;
    background: #f00;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>