源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

有趣的bootstrap走动进度条

  • 时间:2021-03-28 17:16 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:有趣的bootstrap走动进度条
本教程教大家制作“走动”着的bootstrap进度条,供大家参考,具体内容如下 [b]1.页面效果:[/b] 起始位置: [img]http://files.jb51.net/file_images/article/201612/2016121142804100.jpg?2016111142821[/img] 单击"走"按钮后 [img]http://files.jb51.net/file_images/article/201612/2016121142828956.jpg?2016111142835[/img] [b]2.html代码:[/b]
<div>
<div class="progress progress-striped active">
 <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" v-bind:style="progressStyle">进度条</div>
</div>
<button type='button' v-on:click='queryEnterprise' class='btn btn-primary'>走</button>
</div>
[b]v-bind:style="progressStyle"[/b] 绑定内联样式: a.对象语法:v-bind:style 的对象语法十分直观——看着非常像 CSS,其实它是一个 JavaScript 对象。CSS 属性名可以用驼峰式(camelCase)或短横分隔命名(kebab-case): eg: html:
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
js:
data: {
 activeColor: 'red',
 fontSize: 30
}
直接绑定到一个样式对象通常更好,让模板更清晰: html:
<div v-bind:style="styleObject"></div>
js:
data: {
 styleObject: {
 color: 'red',
 fontSize: '13px'
 }
}
b.数组语法:  v-bind:style 的数组语法可以将多个样式对象应用到一个元素上: eg: html:
<div v-bind:style="[styleObjectA, styleObjectB]">
js:
data: {
 styleObjectA: {
 color: 'red' 
 },
 styleObjectB:{
 fontSize: '13px'
 }
}
c.自动添加前缀: 当 v-bind:style 使用需要厂商前缀的 CSS 属性时,如 transform,Vue.js 会自动侦测并添加相应的前缀。 [b]3.js代码:[/b]
<script>
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%',
    },
  }
 },

}
</script>

[b]4.style[/b]
.progress {
 height: 40px;
 transition: 3s;
}
.progress-bar {
 font-size: 16px;
 line-height: 40px;
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部