單獨的Vue樣式插槽

我是 vue 的新手（在這種情況下是 vue 2），我正在嘗試了解如何以最佳方式使用插槽。我有以下代碼：

   <template>
        <div>
            <button class="btn {{ In here I would like to be able to choose between btn-one and btn-three}}">
                <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>

我正在嘗試以這種方式使用它：

   <template>
    <div class="page-margins">
        <h1>This is to test slots</h1>

        <BaseButton>
            <div class="position">
                <span class="button-span">DOWNLOAD</span>
                <span class="material-icons">file_download</span>        
            </div>
        </BaseButton>

        <BaseButton>
            <div class="position">
                <span class="button-span">CANCEL</span>
                <span class="material-icons">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>

因此，我的問題是：我怎樣才能從 btn-one 更改為 btn-three，因為現在我正在使用 btn-one 并且兩個按鈕都是紅色的，但我想將 btn-three 用于第二個......

先感謝您。

uj5u.com熱心網友回復：

您應該擺脫<div>按鈕組件的內部，以便能夠將 css 屬性直接限定為按鈕。

當您的 BaseButton 看起來像這樣時：

<template>
    <button class="btn">
        <slot></slot>
    </button>
</template>

你可以像這樣使用它：

<BaseButton class="btn-three">
    <span class="position">
         <span class="button-span">DOWNLOAD</span>
         <span class="material-icons">file_download</span>        
    </span>
</BaseButton>

像這樣，按鈕將具有類屬性btn btn-three。其他按鈕可能會使您的實作獲得其他類。

附帶說明一下，您不應該<div>在 a中使用，<button>因為這里只允許使用短語內容。

uj5u.com熱心網友回復：

嘗試這個

{{#if something}}
    <button class="btn-one">
        <slot></slot>
    </button>
{{/if}}

{{#if somethingThree}}
     <button class="btn-three">
          <slot></slot>
     </button>
{{/if}}

您也可以使用：

<button v-if="something" class="btn-one">
     <slot></slot>
</button>

 <button v-if="somethingThree" class="btn-three">
     <slot></slot>
</button>

更多資訊： https ://es.vuejs.org/v2/guide/conditional.html

標籤：html css Vue.js

上一篇：Vue3：如何在方法函式中訪問狀態

下一篇：axios回傳嵌套的JSON檔案