customization ui via slot options

HELMAB · Jun 30, 2020 · 5a3f74e · 5a3f74e
1 parent 1275edc
commit 5a3f74e
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -63,3 +63,4 @@ Vue.use(loading, {
 | icon      | `deault: 'spinner'`      |   : support font-awesome |
 | size | `default: '3'`      |    : {1, 2, 3, 4, 5} string |
 | icon_color | `default: '#ffffff'`      |    : color string |
+| slot | `default: font-awesome`      |    : raw html |
diff --git a/index.js b/index.js
@@ -30,6 +30,9 @@ export default {
                     if (options.hasOwnProperty('icon_color')) {
                         vm.icon_color = options.icon_color
                     }
+                    if (options.hasOwnProperty('slot')) {
+                        vm.slot = options.slot
+                    }
                 }
             }
         })

diff --git a/index.vue b/index.vue
@@ -2,9 +2,14 @@
     <div class="loading"
          :style="`background-color: ${bg};`"
          v-show="isLoading">
-        <i :class="`fa fa-${icon} fa-pulse fa-${size}x fa-fw`"
-           :style="`color: ${icon_color}`"></i>
-        <span class="sr-only">Loading...</span>
+        <template v-if="slot">
+            <div v-html="slot"></div>
+        </template>
+        <template v-else>
+            <i :class="`fa fa-${icon} fa-pulse fa-${size}x fa-fw`"
+               :style="`color: ${icon_color}`"></i>
+            <span class="sr-only">Loading...</span>
+        </template>
     </div>
 </template>
 
@@ -18,6 +23,7 @@
                 icon: 'spinner',
                 size: '3',
                 icon_color: '#ffffff',
+                slot: null,
             }
         },
         methods: {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vuejs-loading-screen",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Blocking screen while process worked",
   "main": "index.js",
   "scripts": {