开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

type属性生成主题按钮

首先我们通过slot默认插槽来获取文字

<template>
    <div>
        <a-button>默认按钮</a-button>
    </div>
</template>
<script>
export default {
    name: 'Home',
    components: {
        'a-button': () => import('@/components/button')
    }
}
</script>
//组件
<template>
    
        <button  class="a-button">
            <slot />
        </button>
        
</template>

通过type来设置主题颜色，子组件props来接受，使用computed来改变主题

<template>
    <div>
        <a-button>默认按钮</a-button>
        <a-button type="primary">蓝色按钮</a-button>
        <a-button type="success">绿色按钮</a-button>
    </div>
</template>
//组件
<template>
    
        <button  class="a-button" :class="theme">
            <slot />
        </button>
        
</template>
<script>
export default {
    name: "AButton",
    props: {
        type: {
            type: String,
            default: ''
        }
    },
    computed: {
        theme() {
            return this.type ? `a-button-${this.type}` : ''
        }
    },
    data() {
    return {};
    },
};
</script>
<style lang="less" scoped>
button {
    margin: 20px;
}
.a-button {
    border-width: 1px;
    border-style: solid;
    border-color: #dcdfdc;
    border-radius: 4px;
    background-color: #fff;
    font-size: 14px;
    color: #606266;
    height: 40px;
}
.a-button[disabled] {
    opacity: .5;
    cursor: not-allowed;
}
.a-button-primary {
    background-color: #409eff;
    border-color: #409eff;
    color: #fff;
    &.is-border {
        background-color: transparent;
        color: #409eff;
    }
}
.a-button-success {
    background-color: #00d100;
    border-color: #00d100;
    color: #fff;
    &.is-border {
        background-color: transparent;
        color: #00d100;
    }
}
.a-button-wraning {
    background-color: #e6a23c;
    border-color: #e6a23c;
    color: #fff;
    &.is-border {
        background-color: transparent;
        color: #e6a23c;
    }
}
.a-button-danger {
    background-color: #f56c6c;
    border-color: #f56c6c;
    color: #fff;
    &.is-border {
        background-color: transparent;
        color: #f56c6c;
    }
}
</style>

border属性、round属性、disabled属性

• 设置border属性的话，只需要在按钮上添加 border，子组件去接受，computed来设置样式

    <div>
        <a-button>默认按钮</a-button>
        <a-button type="primary" border>蓝色按钮</a-button>
        <a-button type="success">绿色按钮</a-button>
        <a-button type="wraning">橙色按钮</a-button>
        <a-button type="danger" border>红色按钮</a-button>
    </div>
    //组件
    <template>
    
        <button  class="a-button" :class="[theme, isBorder]">
            <slot />
        </button>
        
</template>
<script>
export default {
    name: "AButton",
    props: {
        
        border: Boolean //默认是false
    },
    computed: {
      
        isBorder() {
            return this.border ? `is-border` : ''
        }
    },
};
</script>

• 设置round属性 和上面一样

    <div>
        <a-button>默认按钮</a-button>
        <a-button type="primary" border round>蓝色按钮</a-button>
        <a-button type="success">绿色按钮</a-button>
        <a-button type="wraning">橙色按钮</a-button>
        <a-button type="danger" border>红色按钮</a-button>
    </div>
    //组件
    <script>
export default {
    name: "AButton",
    props: {
        type: {
            type: String,
            default: ''
        },
        border: Boolean, //默认是false
        round: Boolean //默认是false
    },
    computed: {
        isRound() {
            return this.round ? `is-round` : ''
        }
    },
    data() {
    return {};
    },
    .is-round { border-radius: 30px;}
};
</script>

    

• 设置disabled属性

        <a-button>默认按钮</a-button>
        <a-button type="primary" border round disabled>蓝色按钮</a-button>
        //组件
        <template>
        <button  class="a-button" :disabled="disabled" :class="[theme, isBorder, isRound]">
            <slot />
        </button>
        
</template>
<script>
export default {
    name: "AButton",
    props: {
        type: {
            type: String,
            default: ''
        }，
        disabled: Boolean //默认是false
    },

};
</script>