有趣的bootstrap走动进度条

标签:新闻动态    日期:2017-12-22 10:38    录入:汇盛国际平台    浏览:

  

[bootstrap,进度条]有趣的bootstrap走动进度条

  

本教程教大家制作“走动”着的bootstrap进度条,供大家参考,具体内容如下  

  

1.页面效果:  

  

起始位置:  

  

  

  

单击"走"按钮后  

  

  

  

2.html代码:  

  
  
  
  
  
进度条
  
    
  
  
  

v-bind:style="progressStyle"  
  

  

绑定内联样式:  

  

a.对象语法:v-bind:style 的对象语法十分直观——看着非常像 CSS,其实它是一个 JavaScript 对象。CSS 属性名可以用驼峰式(camelCase)或短横分隔命名(kebab-case):  

  

eg:  

  

html:  

  
  
  
  
  
  

js:  

  
  
  data: {  activeColor: 'red',  fontSize: 30  }  
  
  

直接绑定到一个样式对象通常更好,让模板更清晰:  

  

html:  

  
  
  
  
  
  

js:  

  
  
  data: {  styleObject: {  color: 'red',  fontSize: '13px'  }  }  
  
  

b.数组语法: v-bind:style 的数组语法可以将多个样式对象应用到一个元素上:  

  

eg:  

  

html:  

  
  
  
  
  
  

js:  

  
  
  data: {  styleObjectA: {  color: 'red'  },  styleObjectB:{  fontSize: '13px'  }  }
  
  

c.自动添加前缀: 当 v-bind:style 使用需要厂商前缀的 CSS 属性时,如 transform,Vue.js 会自动侦测并添加相应的前缀。

  

  

3.js代码:  

  
  
  export default {  components:{},  props:{},  ready:function(){},  computed:{},  methods:{  queryEnterprise:function(){  if(parseInt(this.progressStyle.width)<100){  this.progressStyle.width=parseInt(this.progressStyle.width)+30+'%';  }else{  alert("进度条已经走完");  }  }  },  data () {  return {  //进度条样式  progressStyle:{  width:'10%',  },  }  },  }  
  
  

4.style  

  
  
  .progress {  height: 40px;  transition: 3s;  }  .progress-bar {  font-size: 16px;  line-height: 40px;  }  
  
  

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

  

★★★小编:汇盛国际注册 整理文章,欢迎大家转载 ★★★