I am new to vue (vue 2 in this case) and I am trying to understand how to use slots the best way possible. I have the following code:

   <template>
        <div>
            <button >
                <slot></slot>
            </button>
        </div>
    </template>
    
   <style scoped>
    .btn {
        margin: 20px 0px;
        height: 50px;
        text-align: center;
        width: 250px;
        cursor: pointer;
    }

    /* 
    ========================
        BUTTON ONE
    ========================
    */

    .btn-one {
        background-color: #FF6766;
        color: #FFF;
        transition: all 0.3s;
        position: relative;
    }

    .btn-one span {
        transition: all 0.3s;
    }

    .btn-one::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        opacity: 0;
        transition: all 0.3s;
        border-top-width: 1px;
        border-bottom-width: 1px;
        border-top-style: solid;
        border-bottom-style: solid;
        border-top-color: rgba(255,255,255,0.5);
        border-bottom-color: rgba(255,255,255,0.5);
        transform: scale(0.1, 1);
    }

    .btn-one:hover span {
        letter-spacing: 2px;
    }

    .btn-one:hover::before {
        opacity: 1; 
        transform: scale(1, 1); 
    }

    .btn-one::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        transition: all 0.3s;
        background-color: rgba(255,255,255,0.1);
    }
    
    .btn-one:hover::after {
        opacity: 0; 
        transform: scale(0.1, 1);
    }


        /* 
    ========================
        BUTTON THREE
    ========================
    */
    .btn-three {
        color: #FFF;
        transition: all 0.5s;
        position: relative;
        background-color: #66A182;;
    }

    .btn-three::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-color: rgba(255,255,255,0.1);
        transition: all 0.3s;
    }

    .btn-three:hover::before {
        opacity: 0 ;
        transform: scale(0.5,0.5);
    }

    .btn-three::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        opacity: 0;
        transition: all 0.3s;
        border: 1px solid rgba(255,255,255,0.5);
        transform: scale(1.2,1.2);
    }

    .btn-three:hover::after {
        opacity: 1;
        transform: scale(1,1);
    }

</style>

And I am trying to use it this way:

   <template>
    <div >
        <h1>This is to test slots</h1>

        <BaseButton>
            <div >
                <span >DOWNLOAD</span>
                <span >file_download</span>        
            </div>
        </BaseButton>

        <BaseButton>
            <div >
                <span >CANCEL</span>
                <span >close</span>        
            </div>
        </BaseButton> 
    </div>
</template>

<script>

import BaseButton from '../components/BaseButton.vue'

    export default {

        components: {
            BaseButton
        }
        
    }
</script>

<style scoped>
    .page-margins{
        margin: 100px 50px;;
    }

    .material-icons{
        font-size: 25px;
        letter-spacing: normal;
        display: inline-block;
        white-space: nowrap;
    }

    .position {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

</style>

My question therefore is: how can I change from btn-one to btn-three because right now I am using btn-one and both buttons are red but I would like to use btn-three for the second one...

Thank you in advance.

CodePudding user response：

You should get rid of the <div> inside of your button component to be able to scope the css attribute directly to the button.

When your BaseButton looks like this:

<template>
    <button >
        <slot></slot>
    </button>
</template>

You can use it like this:

<BaseButton >
    <span >
         <span >DOWNLOAD</span>
         <span >file_download</span>        
    </span>
</BaseButton>

Like this, the button would have the class attribute of btn btn-three. Other buttons may get other classes up to your implementation.

On a side note, you should not use <div> inside of a <button> as only phrasing content is allowed here.

CodePudding user response：

Try this

{{#if something}}
    <button >
        <slot></slot>
    </button>
{{/if}}

{{#if somethingThree}}
     <button >
          <slot></slot>
     </button>
{{/if}}

Also you can use:

<button v-if="something" >
     <slot></slot>
</button>

 <button v-if="somethingThree" >
     <slot></slot>
</button>

For more information: https://es.vuejs.org/v2/guide/conditional.html