Skip to content

Instantly share code, notes, and snippets.

@cwg999
Created May 29, 2019 20:27
Show Gist options
  • Save cwg999/1c134cacab734f5a9f5674b7850276fb to your computer and use it in GitHub Desktop.
Save cwg999/1c134cacab734f5a9f5674b7850276fb to your computer and use it in GitHub Desktop.
Vue basic Materialize Loading - Using Refs Example (USE PROPS/EVENTS FIRST)
Here is just one simple way of controlling a loading overlay element. In this case "app" could be a higher level component that implements "loadingbar".
The "app" component references the loading bar using `this.$refs` which is more of a global reference for app. There are various other methods by passing down "props" to the child component, emitting an "event" that the child listens to, etc.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<html>
<head>
<title>Loading Bar</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript" src="https://vuejs.org/js/vue.js"></script>
</head>
<body>
<div id="app">
Click the loading bar or button!
<LoadingBar ref="myLoadingBar">Loading Bar</LoadingBar>
<button class="btn" @click="doMainAppLoadingClick">Load More</button>
</div>
<script type="text/javascript">
var loadingbar = Vue.component("LoadingBar", {
template:
`<div :style="styl" @click="loadMore">
<div v-if="!hide" class="progress"><div class="determinate" :style="widthCalc()">
</div></div>
<slot></slot>
</div>`,
data: function(){
return {
styl:{
width: "50%",
},
percent:0,
hide:false
};
},
methods: {
loadMore: function() {
if(this.percent<100) this.percent+=25;
if(this.percent>=100) this.hide=true;
},
widthCalc(){
return 'width: '+this.percent+'%';
}
}
});
var vm = new Vue({
el: "#app",
components:{loadingbar:loadingbar},
methods:{
doMainAppLoadingClick: function(){
this.$refs.myLoadingBar.loadMore();
}
}
});
</script>
</body>
</html>
<!-- end snippet -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment