1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677 |
- <template>
- <div class="beat-wrapper">
- <input v-model="divisioni" type="number" min="1" oninput="validity.valid||(value='');">
- <!--- trovare modo per prevenire scrittura di input-->
- <div class="division-wrapper">
- <div class="suddivisione-wrapper" v-for="j in nDivisioni" :key='j' :id="'suddivisione'+j" >
- <div class="suddivisione-content" :style="{'background-color': colore }"></div>
- </div>
- </div>
- </div>
- </template>
- <script>
- export default {
- props: [ 'id', 'line' ],
- data() {
- return {
- nome:'',
- colore: 'red',
- divisioni: 1,
- timing: 0
- }
- },
- computed: {
- nDivisioni() {
- var n = parseInt(this.divisioni);
- return isNaN(n) ? 0 : n;
- }
- },
- methods: {
- titolo(progressivo){
- this.nome = "nomeBeat" + progressivo;
- }
- }
- }
- </script>
- <style>
- .suddivisione-wrapper{
- flex: 1 1 auto;
- width: 100%;
- height:1em;
- display:flex;
- }
- .active{
- background-color:black;
- }
- input {
- background:transparent;
- width:2em;
- }
- .division-wrapper {
- flex:1 1 auto;
- display: flex;
- }
- .suddivisione-content{
- flex:1 1 auto;
- }
- input[type=number]::-webkit-inner-spin-button,
- input[type=number]::-webkit-outer-spin-button {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- margin: 0;
- }
- input[type=number] {
- -moz-appearance:textfield;
- padding-left:0.2em;
- color:lightgray;
- border:none;
- }
- </style>
|