نمونه‌های Vue

نمونه‌هایی از نحوه استفاده از کامپوننت انتخاب تاریخ در پروژه‌های Vue.

<template>
  <div>
    <persian-datepicker-element
      @change="handleDateChange"
      placeholder="تاریخ را انتخاب کنید"
    />
    <p v-if="selectedDate">تاریخ انتخاب شده: {{ selectedDate.join('/') }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: null
    }
  },
  methods: {
    handleDateChange(event) {
      this.selectedDate = event.detail.jalali;
    }
  }
}
</script>

<template>
  <div>
    <persian-datepicker-element
      @change="handleDateChange"
      placeholder="تاریخ را انتخاب کنید"
    />
    <p v-if="selectedDate">تاریخ انتخاب شده: {{ selectedDate.join('/') }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const selectedDate = ref(null)

const handleDateChange = (event) => {
  selectedDate.value = event.detail.jalali
}
</script>

<template>
  <div>
    <persian-datepicker-element
      @change="handleDateChange"
      placeholder="تاریخ را انتخاب کنید"
    />
    <p v-if="selectedDate">تاریخ انتخاب شده: {{ selectedDate.join('/') }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface DatePickerEvent extends CustomEvent {
  detail: {
    jalali: [number, number, number];
    gregorian: [number, number, number];
  };
}

const selectedDate = ref<[number, number, number] | null>(null)

const handleDateChange = (event: DatePickerEvent) => {
  selectedDate.value = event.detail.jalali
}
</script>

<template>
  <v-container>
    <v-row>
      <v-col cols="12" sm="6">
        <persian-datepicker-element
          class="v-text-field"
          @change="handleDateChange"
          placeholder="تاریخ را انتخاب کنید"
        />
      </v-col>
      <v-col cols="12" sm="6">
        <v-card v-if="selectedDate">
          <v-card-text>
            تاریخ انتخاب شده: {{ selectedDate.join('/') }}
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script setup>
import { ref } from 'vue'

const selectedDate = ref(null)

const handleDateChange = (event) => {
  selectedDate.value = event.detail.jalali
}
</script>

// plugins/persian-datepicker.ts
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('PersianDatePicker', {
    template: `
      <persian-datepicker-element
        @change="$emit('update:modelValue', $event.detail.jalali)"
        :value="modelValue"
        placeholder="تاریخ را انتخاب کنید"
      />
    `,
    props: {
      modelValue: {
        type: Array,
        default: null
      }
    }
  })
})

// pages/index.vue
<template>
  <div>
    <PersianDatePicker v-model="selectedDate" />
    <p v-if="selectedDate">تاریخ انتخاب شده: {{ selectedDate.join('/') }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const selectedDate = ref(null)
</script>