vue左右滑动选择日期组件封装的方法

下面就详细讲解“vue左右滑动选择日期组件封装的方法”的完整攻略。

组件的设计思路

1. 分解组件，将组件分成父子间的通信和功能实现
2. 第一层 — 外层组件：选择框和日期文字的显示。组件之间的通信通过组件之间的 props 属性。
3. 第二层 — 内层组件：上下滑动选择时间。组件之间的通信通过 $emit 触发事件，$parent 监听事件来实现。

组件的目录结构

通过目录结构，我们可以更好的组织代码和调试。

├── index.html
├── src
│   ├── components
│   │   ├── DatePicker // 日期选择器
│   │   │   ├── TimePicker.vue // 时间选择器
│   │   │   ├── DatePicker.vue // 日期选择器
│   │   ├── App.vue
│   │   └── main.js
│   ├── index.html
│   └── package.json
└── package.json

组件示例

下面将以两个示例，更加详细地说明如何实现 vue 左右滑动选择日期组件封装的方法。

示例一：如何使用 DatePicker 和 TimePicker 组件？

<template>
  <div>
    <DatePicker :date="startDate" :week="startDateWeek" @changeDate="handleChangeDate" />
    <TimePicker :time="time" @changeTime="handleChangeTime" />
  </div>
</template>

<script>
  import DatePicker from './components/DatePicker.vue'
  import TimePicker from './components/TimePicker.vue'
  export default {
    name: 'App',
    components: {
      DatePicker,
      TimePicker
    },
    data() {
      return {
        startDate: '',
        startDateWeek: '',
        time: ''
      }
    },
    methods: {
      // 日期变化回调函数
      handleChangeDate(date, week) {
        this.startDate = date
        this.startDateWeek = week
      },
      // 时间变化回调函数
      handleChangeTime(time) {
        this.time = time
      }
    }
  }
</script>

示例二：如何使用自定义的样式来渲染 DatePicker 组件？

<template>
  <div>
    <DatePicker :date="startDate" :week="startDateWeek" @changeDate="handleChangeDate" class="my-datepicker" />
  </div>
</template>

<script>
  import DatePicker from './components/DatePicker.vue'
  export default {
    name: 'App',
    components: {
      DatePicker
    },
    data() {
      return {
        startDate: '',
        startDateWeek: ''
      }
    },
    methods: {
      // 日期变化回调函数
      handleChangeDate(date, week) {
        this.startDate = date
        this.startDateWeek = week
      }
    }
  }
</script>

<style>
  .my-datepicker {
    background-color: #fff;
    font-size: 12px;
  }
</style>