Hola estoy empezando a trabajar con Vue y he decido integrar typeScript en vez de javascript para lo cual he creado un componente para llamar unos botones que reciben propiedades de otro para mostrarse en la pagina.
La primera integración la hice en javascript y este es el resultado
<template>
<button class="btn_solid" :style="btnSolidStyle">
<span>{{ txt }}</span>
</button>
</template>
<style >
.btn_solid {
border-radius: 2rem;
text-decoration: none;
padding: 0.5rem;
cursor: pointer;
border: none;
text-align: center;
white-space: nowrap;
display: inline-block;
vertical-align: middle;
transition: all 250ms ease-in-out;
outline: none;
background: var(--backgroundColor);
color:var(--colorTxt);
width: var(--btnSize)
}
.btn_solid:hover {
background-color: var(--colorHover);
}
</style>
<script>
export default {
props: {
txt: {
type: String,
required: true
},
bgColor: {
type: String,
required: true
},
txtColor: {
type: String,
required: true,
default: "#FFF"
},
size: {
type: String,
default: "50%"
},
sizeTxt: {
type: String,
default: "1.25rem"
},
weightTxt: {
type: String,
default: "500"
},
hoverColor: {
type: String,
required: false,
default: "#FF9012"
}
},
computed: {
btnSolidStyle() {
return {
"--colorHover": this.hoverColor,
"--backgroundColor": this.bgColor,
"--colorTxt": this.txtColor,
"--btnSize": this.size,
"--txtSize": this.sizeTxt,
"--txtWeigth": this.weightTxt
};
}
},
data() {
return {
colorHover: this.hoverColor,
colorBtn: this.bgColor,
colorTxt: this.txtColor,
btnSize: this.size,
txtSize: this.sizeTxt,
txtWeigth: this.weightTxt
};
}
};
</script>
Como se peude ver a través de computed y data retorno el valor a una variable para utilizarlo en css, y asi poder recoger el valor y ponerlo en las propiedades de los estilos, tal como se ve en la seccion de style
Cambiando a TypeScript como puede hacer lo mismo que se hizo en computed para que recoger el valor dela propiedad para utilizarla en una variable en la sección de los estilos
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component
export default class BtnSolid extends Vue {
@Prop({ required: true }) private readonly txt!: string;
@Prop({ required: true }) readonly bgColor!: string;
@Prop({ required: true , default: "#FFF" }) readonly txtColor!: string;
@Prop({ default: "50%" }) readonly size!: string;
@Prop({ default: "1.25rem" }) readonly sizeTxt!: string;
@Prop({ default: "500" }) readonly weightTxt!: string;
@Prop({ required: true }) readonly hoverColor!: string;
}
</script>
Alguna idea de como crear variables para usarlas en css