巧用 Vue.js 编写菜鸟上门取件时间选择器

2024-01-09 06:48:00

前端开发中的上门时间选择器设计与实现

在前端开发中，上门时间选择器是一个常见的需求，它允许用户轻松便捷地选择上门取件或服务的日期和时间段。对于用户来说，这可以显著提升他们的体验；而对于开发者来说，却是一个令人头疼的问题，因为市面上几乎没有合适的现成组件。本文将详细介绍如何使用 Vue.js 框架从头开始构建一个功能完备的上门时间选择器。

需求分析

在开始动手之前，我们需要明确时间选择器的基本需求和交互逻辑：

日期和时间段选择： 用户应该能够自由选择上门取件或服务的日期和时间段。
单日/多日选择： 时间选择器应支持单日和多日选择。
自定义时间段： 时间选择器应允许用户自定义时间段。
多地址管理： 时间选择器应支持用户保存和管理多个收货地址。

组件设计

有了明确的需求后，就可以开始设计时间选择器的组件结构了。我们将使用 Vue.js 框架，因为它简单易用，生态系统丰富。

根组件： 负责管理整体状态和交互逻辑。
日期选择器子组件： 允许用户选择上门日期。
时间段选择器子组件： 允许用户选择上门时间段。
地址选择器子组件： 允许用户保存和管理多个收货地址。

代码实现

1. 安装依赖项

npm install vue vue-router vuex

2. 创建根组件

import Vue from 'vue'
import Router from 'vue-router'
import Vuex from 'vuex'

Vue.use(Router)
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    // ...
  },
  mutations: {
    // ...
  },
  actions: {
    // ...
  }
})

const router = new Router({
  routes: [
    {
      path: '/',
      component: () => import('./views/Home.vue')
    }
  ]
})

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3. 创建子组件

日期选择器

import Vue from 'vue'

export default Vue.component('date-picker', {
  template: `
    <div>
      <input type="date">
    </div>
  `
})

时间段选择器

import Vue from 'vue'

export default Vue.component('time-picker', {
  template: `
    <div>
      <select>
        <option value="09:00-12:00">09:00-12:00</option>
        <option value="12:00-15:00">12:00-15:00</option>
        <option value="15:00-18:00">15:00-18:00</option>
      </select>
    </div>
  `
})

地址选择器

import Vue from 'vue'

export default Vue.component('address-picker', {
  template: `
    <div>
      <select>
        <option value="地址1">地址1</option>
        <option value="地址2">地址2</option>
        <option value="地址3">地址3</option>
      </select>
    </div>
  `
})

4. 组装完整时间选择器

import Vue from 'vue'

export default Vue.component('time-selector', {
  template: `
    <div>
      <date-picker></date-picker>
      <time-picker></time-picker>
      <address-picker></address-picker>
      <button @click="submit">提交</button>
    </div>
  `,
  methods: {
    submit() {
      // ...
    }
  }
})