Ladda的vue封裝

原創 风灵使 2018-12-31 23:57

index.html

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

  <script src="https://unpkg.com/[email protected]/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>

運行結果如圖:

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

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

vue開發的手機購物商城APP東京大藥房(帶數據庫，定位，支付，等)

源碼下載就能上線,需要的注注,私信,

qq_36824777 2020-07-08 11:50:38

Vue坑點雜談（一）Module not found Error Cannot resolve file or directory

Vue坑點雜談（一）Module not found: Error: Cannot resolve ‘file’ or ‘directory’ 一、寫在開頭 這個算是學習vue的同時開的一個新坑吧，記錄一下學習過程出現的紕漏，也幫

ODST_TheSolverO5 2020-07-08 10:59:42

Mac 安裝Yarn

前言 近期學習ant-design-vue-pro, 需要使用Yarn安裝相關依賴包，以下說說在Mac上安裝Yarn的嘗試 幾種安裝方式 使用homebrew 安裝 brew install yarn 等待許久後，得到如下錯誤，

bertramlau 2020-07-08 10:39:04

el-tree Scoped Slot自定義內容

問題描述 element-ui中的el-tree組件自定義內容實現。依靠Scoped Slot <el-tree :expand-on-click-node="false" :props="{label:'orgName'

杨阳洋 2020-07-08 07:18:28

vue開發必須知道的小技巧

近年來，vue越來越火，使用它的人也越來越多。vue基本用法很容易上手，但是還有很多優化的寫法你就不一定知道了。本文列舉了一些vue常用的開發技巧。 require.context() 在實際開發中，絕大部分人都是以組件化的方式進

MonkeySoft 2020-07-08 07:12:19

Vue------shortid組件的安裝及使用

一、shortid組件安裝步驟 插件shortid是生成隨機ID的 cmd 進入到項目目錄中，輸入npm i shortid --save 或 在webstorm項目中右擊，Open in Terminal中輸入：npm i

chowhoundgh 2020-07-08 06:48:05

element-ui+vue彈出多個message的問題處理

如果出現網絡問題，刷新頁面，或者有多個接口請求就會出現報錯，那麼提示就會連續彈出幾個： 解決方案：重寫Message。彈出前判斷是否有相同彈出框，若有則關閉它再彈出新的 resetMessage.js： import {Mess

zeke_x 2020-07-08 06:07:33

移動端使用釘釘api進行地圖定位

釘釘前端api 效果圖  注意事項：需要在釘釘app中打開，才能調用此地圖，代碼示範 需要後臺接口，前端需要分割 <template> <div class="valStyle"> <p class="le

webYin 2020-07-08 05:45:21

使用callback進行把異步改爲同步

 //在生命週期中掛載函數，當外面的函數執行完了在執行回調函數 mounted() { dutyIndexShow(()=>{   this.indexShow(); }) }

webYin 2020-07-08 05:45:21

vue element-ui配合form 上傳文件

 直接上代碼，接口和token添自己的其他可以照搬 <!-- 上傳文件 --> <template> <el-upload action="111" class="upload-demo" :http-request="

webYin 2020-07-08 05:45:21

Vue學習-axios使用

Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。 特性 從瀏覽器中創建 XMLHttpRequests 從 node.js 創建 http 請求 支持 Promise API 攔截請

Dennis_Shaw 2020-07-08 05:40:55

Vue實例——點擊v-for的某個元素，消除其它元素關聯

實現這樣的一個需求：使用v-for生成一個列表，點擊列表中的某個元素，該元素改變其樣式（也就是字體變紅），其它元素不變 解決方法 通過設置一個點擊事件btnClick(index)獲取點擊元素的下標，將被點擊的元素的下標與列

Flowery Me 2020-07-08 05:00:04

Vue實例：購物車的搭建——界面設計

HTML <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>購物車</title> <link rel="stylesh

Flowery Me 2020-07-08 05:00:04

Vue獲取瀏覽器點擊事件作爲函數參數

<body> <div id="app"> <!-- 瀏覽器會默認傳遞事件屬性 --> <button @click="btnClick1">按鈕1</button> <!-- 當需要傳遞事件屬性時，

Flowery Me 2020-07-08 05:00:04

vue中虛擬複用的一個小例子

在下面的代碼中，如果input後面不加key屬性的話，則在切換登錄方式時，原本輸入在input框裏的字符不會消失。這是vue底層的實現。 當希望input框裏面的內容因爲切換登錄方式而消失時，可以在後邊加上key屬性，用來標識不同

Flowery Me 2020-07-08 05:00:04