vue.js实现仿原生ios时间选择组件实例代码

下面就是“vue.js实现仿原生ios时间选择组件实例代码”的完整攻略。

一、需求分析

首先，我们需要明确该时间选择组件的需求。该组件应该具有以下几个特点：

• 类似原生 iOS 的时间选择器的样式；
• 可以选择小时、分钟；
• 通过点击取消和确认按钮，可以改变选择的时间；
• 可以通过外部传入初始时间；
• 选择时间后，应该将选择的时间通过事件回传给外部。

二、实现思路

经过需求分析，我们可以确定该选择器需要至少两个组件：一个是显示时间的组件，另一个是选择时间的组件。

我们可以先实现一个选择时间的组件，在组件内，使用 Range Slider 实现选择小时和分钟的功能。然后，使用 Vue 的路由功能，在主页上添加一个按钮，点击该按钮，页面跳转到选择器页面，并加载时间选择器组件。

在选择器页面中，将选择器组件和确认、取消按钮放在一个模拟的 iPhone 工具条中，通过该工具条向上滑动时显示。选择器组件接收外部传入的时间参数，并可通过 emit 方法向外部回传选择的时间。

三、代码实现

1. 选择器组件

选择器组件需要有以下功能：

• 根据外部传入的时间参数初始化显示时间；
• 使用 Range Slider 组件实现选择小时和分钟的功能；
• 点击取消和确认按钮时，返回选择的时间。

代码如下：

<template>
  <div class="picker-container">
    <div class="picker-mask"></div>
    <div class="picker">
      <div class="picker-header">
        <button class="cancel-button" @click="cancel">取消</button>
        <button class="confirm-button" @click="confirm">确定</button>
      </div>
      <div class="picker-body">
        <div class="picker-column">
          <div class="picker-label">{{ "0" + hour }}</div>
          <input type="range" min="1" max="24" class="picker-range" @input="setHour" v-model="hour" />
        </div>
        <div class="picker-divider"></div>
        <div class="picker-column">
          <div class="picker-label">{{ "0" + minute }}</div>
          <input type="range" min="0" max="59" class="picker-range" @input="setMinute" v-model="minute" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 初始化时间
    time: {
      type: String,
      default: "00:00",
    },
  },
  data() {
    const [hour, minute] = this.time.split(":");
    return {
      hour,
      minute,
    };
  },
  methods: {
    // 设置小时
    setHour(event) {
      this.hour = event.target.value.padStart(2, "0");
    },
    // 设置分钟
    setMinute(event) {
      this.minute = event.target.value.padStart(2, "0");
    },
    // 确定按钮点击事件
    confirm() {
      this.$emit("pick", `${this.hour}:${this.minute}`);
    },
    // 取消按钮点击事件
    cancel() {
      this.$emit("cancel");
    },
  },
};
</script>

<style scoped>
.picker-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.picker-mask {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.picker {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 500px;
  height: 200px;
  margin: 0 20px;
  background-color: #f5f5f5;
  border-radius: 5px;
  overflow: hidden;
}
.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  padding: 0 10px;
  background-color: #eee;
}
.picker-header button {
  font-size: 16px;
  font-weight: bold;
  color: #007aff;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
}
.picker-body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 20px;
}
.picker-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.picker-label {
  font-size: 36px;
  font-weight: bold;
}
.picker-range {
  width: 100%;
  margin-top: 10px;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.picker-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background-color: #007aff;
  border-radius: 50%;
  cursor: pointer;
}
.picker-range::-moz-range-thumb {
  -moz-appearance: none;
  width: 16px;
  height: 16px;
  background-color: #007aff;
  border-radius: 50%;
  cursor: pointer;
}
.picker-divider {
  margin: 0 20px;
  border-right: 1px solid #ccc;
}
</style>

2. 主页

在主页中添加一个按钮，点击该按钮，跳转到选择器页面。代码如下：

<template>
  <div>
    <button class="show-picker-button" @click="showPicker">显示时间选择器</button>
  </div>
</template>

<script>
export default {
  methods: {
    showPicker() {
      this.$router.push("/picker");
    },
  },
};
</script>

<style scoped>
.show-picker-button {
  background-color: #007aff;
  color: #fff;
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>

3. 选择器页面

在选择器页面中，将选择器组件、确认、取消按钮放在一个模拟的 iPhone 工具条中。代码如下：

<template>
  <div class="picker-page">
    <comp-iphonetoolbar>
      <h1 slot="title">时间选择器</h1>
      <span slot="left" @click="cancel">取消</span>
      <span slot="right" @click="confirm">确定</span>
    </comp-iphonetoolbar>
    <picker :time="time" @pick="pick" @cancel="cancel" />
  </div>
</template>

<script>
import CompIphoneToolbar from "@/components/CompIphoneToolbar";
import Picker from "@/components/Picker";

export default {
  components: {
    CompIphoneToolbar,
    Picker,
  },
  data() {
    return {
      time: "12:00",
    };
  },
  methods: {
    // 确定按钮点击事件，将选择的时间保存
    confirm(time) {
      this.time = time;
      this.$router.go(-1);
    },
    // 取消按钮点击事件，返回上一页
    cancel() {
      this.$router.go(-1);
    },
    // 接收选择器组件发出的时间事件
    pick(time) {
      this.time = time;
    },
  },
};
</script>

<style scoped>
.picker-page {
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>

到这里，可以启动项目，点击主页上的按钮，跳转到选择器页面，并显示时间选择器。选择时间后，点击确认按钮，返回主页，显示选择的时间。

4. 示例说明

示例1：在主页上添加两个按钮

在主页上，添加一个按钮，点击该按钮显示时间选择器，并将选择的时间保存。再添加一个按钮，点击该按钮显示上次保存的时间。

代码如下：

<template>
  <div>
    <button @click="showPickerAndSave">选择时间并保存</button>
    <button @click="showPickerWithLastSavedTime">显示上次保存的时间</button>
    <div v-if="!!lastSavedTime">上次保存的时间是{{ lastSavedTime }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lastSavedTime: "",
    };
  },
  methods: {
    async showPickerAndSave() {
      const { default: Picker } = await import("../components/Picker");

      const time = await new Promise((resolve) => {
        const PickerView = Vue.extend(Picker);
        const vm = new PickerView({
          propsData: {
            time: this.lastSavedTime || "12:00",
          },
          methods: {
            pick(time) {
              resolve(time);
            },
            cancel() {
              resolve(false);
            },
          },
        }).$mount();

        document.querySelector("body").appendChild(vm.$el);
      });

      if (time !== false) {
        this.lastSavedTime = time;
      }
    },
    async showPickerWithLastSavedTime() {
      const { default: Picker } = await import("../components/Picker");

      await new Promise((resolve) => {
        const PickerView = Vue.extend(Picker);
        const vm = new PickerView({
          propsData: {
            time: this.lastSavedTime || "12:00",
          },
          methods: {
            pick(time) {
              resolve(time);
            },
            cancel() {
              resolve(false);
            },
          },
        }).$mount();

        document.querySelector("body").appendChild(vm.$el);
      });
    },
  },
};
</script>

示例2：支持多个时间选择器

该示例需要在主页添加一个按钮，点击该按钮可以添加一个时间选择器组件。每个时间选择器组件都可以选择不同的时间，并可以通过事件回传选择的时间。

代码如下：

<template>
  <div>
    <button @click="addPicker">添加时间选择器</button>
    <comp-iphonetoolbar v-if="pickers.length">
      <h1 slot="title">选择时间</h1>
      <span slot="left" @click="cancel">取消</span>
      <span slot="right" @click="confirm">确定</span>
    </comp-iphonetoolbar>
    <picker v-for="(picker, index) in pickers" :key="index" :time="picker" @pick="pick(index)" />
  </div>
</template>

<script>
import CompIphoneToolbar from "@/components/CompIphoneToolbar";
import Picker from "@/components/Picker";

export default {
  components: {
    CompIphoneToolbar,
    Picker,
  },
  data() {
    return {
      pickers: ["12:00"],
    };
  },
  methods: {
    // 添加时间选择器
    addPicker() {
      this.pickers.push("12:00");
    },
    // 接收选择器组件发出的时间事件
    pick(index) {
      return (time) => {
        this.$set(this.pickers, index, time);
      };
    },
    // 确定按钮点击事件，将选择的时间保存
    confirm() {
      console.log(this.pickers);
      this.$router.go(-1);
    },
    // 取消按钮点击事件，返回上一页
    cancel() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.picker-page {
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>

注意这个示例采用了响应式 API，pickers数组中的元素改变时需要使用$set方法来更新 DOM。