1. خانه
2. مقاله
3. دکمه (submit button) با progress قدرت گرفته از VueJS در طراحی وب سایت

دکمه (submit button) با progress قدرت گرفته از VueJS در طراحی وب سایت

pieces/vue-submit

یک دکمه زیبا که با کلیک شدن یک progress indicator هم روی آن به نمایش در آورده می شود

سایت دمو

مثال

برای استفاده از این کامپوننت شما باید فایل vue-submit.min.js را در پروژه خود اضافه کنید. اگر فقط از فایل vue-submit.min.js استفاده کنید، فراموش نکنید که Vue را نیز وارد کنید.

import Vue from 'vue'
import VueSubmit from './vue-submit.min.js'

Vue.component('vue-submit', VueSubmit)

در مرحله بعد در یک فایل کامپوننت Vue کدهای زیرا وارد می کنیم:

<template>
  <div class="hello">
    <vue-submit
            @click="send"
            :disabled="false"
            :progress='progress'
            :auto-progress="2000">
                    Send
        </vue-submit>
  </div>
</template>

<script>
export default {
    name: 'hello',
    data () {
        return {
            dis: false,
            progress: 0
        }
    },
    methods: {
        send: function () {
            this.progress = 1
            setTimeout(() => {
                this.progress = 0
        }, 2000)
        }
    }
}
</script>

پسوند کامپوننتها باید *.vue باشد.