<!-- esta parte podrás incrustarla en el body html si no lo pruebas en app laravel -->
<template>
<div class="container">
<deg-component :degs="degs"></deg-component>
<div v-bind:style="linearGradientStyle" class="gradient"></div>
</div>
</template>
<!-- end incrustacion body html-->
<script>
import DegComponent from './DegComponent'
export default {// puedes usar la función Vue.component(´nombre_component',function() e incrustar los metodos de //vue
data(){ return { degs:1,
}
},
computed:{ linearGradientStyle(){ let css=``;
css += `background: `;
css += `linear-gradient(`;
css += `${this.degProperty}deg, chartreuse 15%,blue, orange 25%, purple);`; return css;
},
degProperty:{ set(val){ this.degs=val
},
get(){ return this.degs;
}
}
},
components:{ 'deg-component':DegComponent
},
created(){ this.$on("changeDeg",(changeStep)=>{ this.degProperty = changeStep;
})
}
}
</script>
<!-- solo para aplicaciones vue con babel o entornos laravel -->
<style scoped>
div.gradient{ border: solid chartreuse doted;
padding: 2px 2px;
height: 550px;
width: 95%;
}
</style>
<!-- el otro componente -->
<template><!-- los mismos para este componente -->
<div>
<input type="range" max="360" v-model="changeStep" @change="emitStep(changeStep)">
</div>
</template>
<script>
export default { props:["degs"],
data(){ return { step:1
}
},
methods:{ emitStep(changeStep){ this.$parent.$emit("changeDeg",changeStep) }
},
computed:{ changeStep:{ set(val){ this.step = val
},
get(){ return this.step;
}
}
}
}
/* en la instancia de new Vue poner propiedad components y declara mediante un objeto los componentess*/
</script>
Crear cuenta
Comentarios sobre la versión: 1.0 (0)
No hay comentarios