h5 learning notes: vuejs writing progress bar

Recently, I want to practice vuejs, which can write some components. I haven't tried before. It's also very good to try the following vuejs component development today. Now record the progress bar.

Write a global component using Vue. Refer to the official following documents

https://cn.vuejs.org/v2/guide/components.html

The initial starting point is to pass a data and show a progress bar. So when building global components, three parameters are passed. Define three property values. The remaining quantity of rest, total, barwidth is the style length.

The renderings are as follows

Component style design

The progress bar needs a bottom color and adopts orange design. The layout of css uses relative layout to realize left and right layout. And color bar display. To show the progress bar, the length of the width is bound to the progress bar.

Vue.component('progressbar', {
              template: `<div class="progressContainer">        
                          <div class="progressItem" v-bind:style="{width:barwidth+'%'}"></div>
                          <div class="progressLabel">
                            <span class="left">Surplus:{{rest}}</span>
                            <span class="right">Total:{{total}}</span>
                          </div>              
                        </div> `,
                props: ['total',"rest","barwidth"],
              data: function() {
                 return  { 


                 }
              }
            })

After defining a component, the component can be used in a pair of labels.

 <progressbar></progressbar> // Custom progress bar

Total code below

<html>
    <head>
        <meta charset="utf-8"/>
         <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
    </head>
    <style type="text/css">
        .progressContainer{
            position: relative;
            height: 6px;
            width: 100%;
            background-color: #666666;
             border-radius: 2px;
        }

        .progressItem{

             position: absolute;
             height: 6px;
             width: 30%;
             background-color: orange;
             border-radius: 2px;
        }

        .progressLabel{
             position: relative;
             top: 6px;
             display: block;
             width: 100%;
             color: #999999;
        }

        .progressLabel .left{

            position: absolute;
            left: 0px;
        } 

        .progressLabel .right{

            position: absolute;
            right:0px;

        } 

        .btn-area{
            margin-top: 30px;
        }

    </style>
    <body>
      <div id="app">
          <progressbar :rest="rest" :total="total" :barwidth="barwidth"></progressbar>
          <div class="btn-area">
             <button v-on:click="onBuy">purchase</button>
          </div>

      </div>


    <Script type="text/javascript">


            Vue.component('progressbar', {
              template: `<div class="progressContainer">        
                          <div class="progressItem" v-bind:style="{width:barwidth+'%'}"></div>
                          <div class="progressLabel">
                            <span class="left">Surplus:{{rest}}</span>
                            <span class="right">Total:{{total}}</span>
                          </div>              
                        </div> `,
                props: ['total',"rest","barwidth"],
              data: function() {
                 return  { 


                 }
              }
            })


            new Vue({
                   el : "#app",
                   data:{
                        total:100,
                        rest:50,
                        barwidth:10
                   },
                   methods:{
                         onBuy:function(){

                             this.rest+=1;
                             if(this.rest >=100) this.rest = 100;
                             this.barwidth = Math.round(this.rest/this.total*100);


                         }

                   }
             })

    </Script>
  </body>
</html>

Tags: REST Vue Javascript

Posted on Sun, 03 May 2020 04:52:48 -0400 by kgahn