0

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

1 respuesta 1

0

En la página de typescript.nuxtjs hay un ejemplo de la implementación de una computed property.

Simplemente tienes que crear un getter y regresar la propiedad que deseas ejemplo:

get fullName (): string {
return 'this.tuPropiedad'
}




        export default class YourComponent extends Vue {
  @Prop({ type: Object, required: true }) readonly user!: User

  message: string = 'This is a message'

  get fullName (): string {
    return `${this.user.firstName} ${this.user.lastName}`
  }
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.