Vant vue用Cell,Popup,DatetimePicker,Picker制作时间和性别选择

Vant vue用Cell,Popup,DatetimePicker,Picker制作时间和性别选择

<template>
  <div>
    <div class="from_item">
      <van-cell
        title="出生年月"
        input-align="right"
        :value="formData.birthDate || '请选择出生年月'"
        @click="showBirthDatePopup = true"
      />
    </div>
    <div class="from_item">
      <van-cell
        title="性别"
        input-align="right"
        :value="formData.sex || '请选择性别'"
        @click="showsexPopup = true"
      />
    </div>
    <van-popup v-model="showBirthDatePopup" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        title="出生年月"
        type="year-month"
        :min-date="minDate"
        @confirm="checkDate()"
        @cancel="close"
      />
    </van-popup>
    <van-popup v-model="showsexPopup" position="bottom">
      <van-picker
        show-toolbar
        title="性别"
        :columns="columns"
        @cancel="onCancel"
        @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formData: {
        birthDate: "",
        sex: ""
      },
      columns: ["男", "女"],
      minDate: new Date(1900, 0, 1),
      currentDate: new Date(),
      showBirthDatePopup: false,
      showsexPopup: false,
      value: ""
    };
  },

  computed: {},

  methods: {
    checkDate() {
      this.formData.birthDate = this.$dateFormat(this.currentDate, "YYYY-MM");

      this.showBirthDatePopup = false;
    },
    close() {
      this.showBirthDatePopup = false;
    },
    onConfirm(value) {
      this.formData.sex = value;
      this.showsexPopup = false;
    },
    onCancel() {
      this.showsexPopup = false;
    }
  }
};
</script>

效果图

如果想知道更多的Vant用法