Ladda的vue封裝

風靈使發表於2018-12-31
Vue封裝

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue-ladda example</title>

  <script src="https://unpkg.com/vue@2.3.2/dist/vue.min.js"></script>
  <script src="./vue-ladda.js"></script>

  <style>
    button { outline: none; }
  </style>
</head>
<body>
  <div id="app">
    <vue-ladda v-for="(button, index) in buttons"
               :key="index"
               :loading="button.loading"
               :data-style="button.dataStyle"
               :progress="button.progress"
               @click="submit(button)">
    </vue-ladda>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: function() {
        return {
          buttons: [
            {
              loading: false,
              'dataStyle': 'expand-left',
              progress: 0,

            },
            {
              loading: false,
              'dataStyle': 'expand-up',
              progress: 0
            },
            {
              loading: false,
              'dataStyle': 'contract-overlay',
              progress: 0
            }
          ]
        }
      },
      methods: {
        submit: function(button) {
          const duration = 2000;

          button.loading = true;
          updateButtonProgress(duration, button);

          setTimeout(function() {
            button.loading = false;
          }, duration);
        }
      }
    });


    function updateButtonProgress(duration, button) {
      var start = null;
      function update(timestamp) {
        var delta, progress;

        if (!start) start = timestamp;
        delta = timestamp - start;
        progress = delta / duration;
        if (progress >= 1 || progress < 0) return;
        button.progress = progress;
        window.requestAnimationFrame(update);
      }

      window.requestAnimationFrame(update);
    }
  </script>
</body>
</html>

vue-ladda.vue

<template>
  <button :class="buttonClass" ref="ladda" :data-style="dataStyle" @click="handleClick">
    <slot><span class="ladda-label">Submit</span></slot>
  </button>
</template>

<script>
  import Ladda from 'ladda/js/ladda';

  export default {
    name: 'VueLadda',

    props: {
      // customizable button's class attribute - you can use your own CSS class
      'buttonClass': {
        type: String,
        default: 'ladda-button'
      },
      // use vue props validation to make sure "data-style" is given. (ladda need it)
      'dataStyle': {
        type: String,
        default: 'expand-left'
      },
      // loading prop to change the status of this component.
      loading: {
        type: Boolean,
        required: true
      },
      progress: {
        validator: function(progress) {
          return progress >= 0 && progress <= 1;
        },
        default: 0
      }
    },

    watch: {
      loading: function(loading) {
        loading ? this.ladda.start() : this.ladda.stop();
      },

      progress: function(progress) {
        this.ladda.setProgress(progress);
      }
    },

    methods: {
      handleClick: function(e) {
        this.$emit('click', e);
      }
    },

    mounted: function() {
      this.ladda = Ladda.create(this.$refs.ladda);
      this.loading ? this.ladda.start() : this.ladda.stop();
    },

    beforeDestroy: function() {
      this.ladda.remove();
      delete this.ladda;
    }
  };
</script>

<style lang="scss">
  // TODO: make themed a option?
  @import '~ladda/css/ladda-themed.scss';
</style>

執行結果如圖:

在這裡插入圖片描述在這裡插入圖片描述

相關文章