<template>
  <div :style="barStyle" class="button-line bg-primary"></div>
</template>
<script>
export default {
  name: "buttonLine",
  props:{
    width:{
      default:'30px'
    },
    btnIdx:{
      default:'0'
    }
  },
  computed: {
    barStyle() {
      let x=this.width * this.btnIdx *3 +'%'
      let re= {
        width:'100%',
        transform:`translateX(${x})`,
        msTransform:`translateX(${x})`,
        webkitTransform:`translateX(${x})`,
      }
      console.log(JSON.stringify(re))
      return re  
    }
  }
};
</script>
<style scoped lang="scss">
.button-line {
  height: 2px;
  margin:0 3px;
}
</style>
