vue3基础组件开发detePicker日期选择组件示例

下面是针对“vue3基础组件开发detePicker日期选择组件”的完整攻略：

准备工作

1. 在项目中引入vue 和 date-fns；
2. 创建 datePicker.vue 组件，编写基础模板代码；
3. 在datePicker.vue组件中引入样式文件，并设置CSS样式；

模板编写

以下是示例代码：

<template>
  <div class="date-picker">
    <!-- Header -->
    <div class="picker-header">
      <div class="picker-header-action">取消</div>
      <div class="picker-header-title">
        {{ DateUtils.formatDate(selectedDate, 'yyyy/MM/dd') }}
      </div>
      <div class="picker-header-action">确定</div>
    </div>

    <!-- Body -->
    <div class="picker-body">
      <div class="picker-calendar">
        <table>
          <thead>
            <tr>
              <th>日</th>
              <th>一</th>
              <th>二</th>
              <th>三</th>
              <th>四</th>
              <th>五</th>
              <th>六</th>
            </tr>
          </thead>
          <tbody>
            <template v-for="week in dateTable">
              <tr>
              <template v-for="(date, index) in week">
                  <td 
                    v-bind:class="{disabled: DateUtils.isBeforeToday(date), selected: DateUtils.isSameDate(date, selectedDate)}" 
                    v-on:click="handleDateClick(date)"
                    :key="index"
                  >
                    {{ DateUtils.formatDate(date, 'dd') }}
                  </td>
                </template>
              </tr>
            </template>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

在组件中，我们为数据标记了不同的class，这些class将决定其样式。

Script 脚本编写

以下是示例代码：

<script>
import * as DateUtils from './dateUtils';

export default {
  name: 'datePicker',
  props: {
    value: {
      type: Date,
      default: new Date()
    }
  },
  setup() {
    const selectedDate = ref(new Date());
    const dateTable = computed(() => {
      const firstDayOfMonth = DateUtils.getFirstDateOfMonth(selectedDate.value);
      const lastDayOfMonth = DateUtils.getLastDateOfMonth(selectedDate.value);
      const weeks = DateUtils.getWeekArray(firstDayOfMonth);

      return weeks.map((week) => {
        return week.map((date) => {
          return date >= firstDayOfMonth && date <= lastDayOfMonth ? date : null;
        })
      })
    })

    const handleDateClick = (date) => {
      if (DateUtils.isBeforeToday(date)) {
        return;
      } else {
        selectedDate.value = date;
      }
    }

    return {
      selectedDate,
      dateTable,
      handleDateClick
    }
  }
}
</script>

在这段代码中，我们使用了 Vue 3.x 中新增的setup函数。在这个函数中，我们声明了三个ref：selectedDate、dateTable和handleDateClick。我们还引入了dateUtils工具模块，并将其中的方法引用到常量中。

当我们点击日期时，此处的方法会根据日期逻辑控制执行。

CSS 样式编写

以下是示例代码：

<style scoped>
.date-picker {
  position: absolute;
  width: 300px;
  border: 1px solid #ddd;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
  border-radius: 5px;
}

.picker-header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.picker-header-action {
  font-size: 14px;
  color: #999;
  cursor: pointer;
}

.picker-header-title {
  font-size: 14px;
  color: #333;
}

.picker-body {
  padding: 10px;
}

.picker-calendar {
  font-size: 14px;
}

table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%
}

th, td {
  text-align: center;
  font-weight: normal;
}

th {
  padding: 5px;
  font-size: 14px;
  color: #999;
}

td {
  padding: 10px;
  cursor: pointer;
}
.disabled {
  color: #ccc;
  cursor: not-allowed;
}
.selected {
  background-color: #f2f2f2;
}

</style>

我们在这里定义的样式将应用到我们的Vue组件里。组件渲染出的效果将会基于如上的 CSS 样式。

总结

我们通过以上步骤编写了一个简单的日期选择器组件。在最终渲染出的组件中，用户会看到一个具有一定样式和逻辑的日期选择器。其中，我们在 setup函数里通过使用 Vue 3.x 提供的API来构建的响应式数据使得组件能够动态地根据用户输入而进行更新。

总的来说，这是一个较为基础的Vue 3.x组件实现方式。我们在这个组件上可以进行多种变化和发散开发，例如增加自定义属性，修改样式，等等。