<!-- 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>
Comentarios sobre la versión: 1.0 (0)
No hay comentarios