简单封装一个button组件

柔光的暖阳◎ 2023-06-03 05:51 16阅读 0赞

> **Github地址：[https://github.com/ElsonJe/Simple-ui.git][https_github.com_ElsonJe_Simple-ui.git]**
> 
> **阿里矢量图标库：[https://www.iconfont.cn/][https_www.iconfont.cn]**

**一、效果**

![1459138-20190903224206578-1036838649.gif][]

** 二、封装**

<template>
        <button @click="ClickHandler()" :class="styles" :disabled="disabled">{
        { text }}</button>
    </template>
    
    <script>
    export default {
        name: 'sp-button',
        data() {
            return {}
        },
        props: {
            /* 按钮中显示的文字 */
            text: {
                type: String
            },
            /* 是否启用按钮 */
            disabled: {
                type: Boolean,
                default: false
            },
            /* 按钮形状 */
            design: {
                type: String,
                default: 'block'
            },
            /* 矢量图标 */
            icon: String,
            /* 内置按钮风格 */
            type: {
                type: String,
                default: 'normal'
            }
        },
        methods: {
            /* 按钮点击时触发的事件，用于父组件中使用 */
            ClickHandler() {
                this.$emit('click')
            }
        },
        computed: {
            /* 根据不同的props，展示按钮样式 */
            styles: {
                get() {
                    return ['sp-button', this.design, this.icon, this.type]
                }
            }
        }
    }
    </script>
    
    <style scoped>
    /* 引入矢量图标 */
    @import '../../assets/icons/iconfont.css';
    button {
        width: 100px;
        height: 30px;
        outline: none; /*outline 去除原生的button样式*/
    
        /*动画设置*/
        transition: border 0.8s;
        -webkit-transition: border 0.8s;
        transition: background-color 0.1s;
        -webkit-transition: background-color 0.1s;
    }
    /*normal style*/
    .normal {
        border: 1px solid rgb(135, 135, 136);
        background-color: #ffffff;
        font-size: 12px;
        color: rgb(92, 90, 90);
    }
    .normal:hover {
        cursor: pointer;
        background-color: #F4F4F5;
    }
    .normal:active {
        color: #000;
        border: 1px solid rgb(135, 135, 136);
        background-color: #F4F4F5;
    }
    .normal:disabled {
        cursor: not-allowed;
        background-color: rgb(241, 243, 245);
        opacity: 0.8;
    }
    /* primary style */
    .primary {
        color: #ffffff;
        background-color: #3a8ee6;
        font-size: 12px;
        border: none;
    }
    .primary:active {
        background-color: rgb(192, 215, 250);
        color: rgb(105, 83, 233);
        border: none;
    }
    .primary:hover{
        cursor: pointer;
        background-color: rgb(125, 174, 248);
    }
    .primary:disabled{
        background-color: rgb(192, 215, 250);
        color: #3a8ee6;
        border: none;
        cursor: not-allowed;
    }
    /* warning style*/
    .warning {
        color: #ffffff;
        background-color: #CF9236;
        font-size: 12px;
        border: none;
    }
    .warning:active {
        background-color: rgb(233, 202, 157);
        color: rgb(185, 115, 10);
        border: none;
    }
    .warning:hover{
        cursor: pointer;
        background-color: rgb(231, 177, 97);
    }
    .warning:disabled{
        background-color: rgb(233, 202, 157);
        color: rgb(185, 115, 10);
        border: none;
        cursor: not-allowed;
    }
    /* error style*/
    .error {
        color: #ffffff;
        background-color: rgb(250, 96, 96);
        font-size: 12px;
        border: none;
    }
    .error:active {
        background-color: rgb(243, 181, 181);
        color: rgb(245, 60, 60);
        border: none;
    }
    .error:hover{
        cursor: pointer;
        background-color: rgb(238, 127, 127);
    }
    .error:disabled{
        background-color: rgb(243, 181, 181);
        color: rgb(245, 60, 60);
        border: none;
        cursor: not-allowed;
    }
    /* success style */
    .success {
        color: #ffffff;
        background-color: #5DAF34;
        font-size: 12px;
        border: none;
    }
    .success:active {
        background-color: rgb(185, 218, 168);
        color: rgb(70, 153, 29);
        border: none;
    }
    .success:hover{
        cursor: pointer;
        background-color: rgb(129, 211, 85);
    }
    .success:disabled{
        background-color: rgb(185, 218, 168);
        color: rgb(70, 153, 29);
        border: none;
        cursor: not-allowed;
    }
    /* info style */
    .info {
        color: #ffffff;
        background-color: #A6A9AD;
        font-size: 12px;
        border: none;
    }
    .info:active {
        background-color: rgb(212, 214, 218);
        color: rgb(141, 144, 146);
        border: none;
    }
    .info:hover{
        cursor: pointer;
        background-color: rgb(176, 178, 182);
    }
    .info:disabled{
        background-color: rgb(212, 214, 218);
        color: rgb(141, 144, 146);
        border: none;
        cursor: not-allowed;
    }
    /* 方块 */
    .block {
        border-radius: 0px;
    }
    /* 半圆 */
    .oval {
        border-radius: 50px;
    }
    /* 圆角 */
    .fillet {
        border-radius: 5px;
    }
    /* 圆 */
    .circle {
        /*宽高相等才能成为圆,但从视觉上来看，width比height多5px更为好看*/
        width: 50px;
        height: 45px;
        border-radius: 50%;
    }
    </style>

**三、总结**

功能不多，更多的是样式的设计和颜色的搭配。

> **`谦良恭卑，信诚实至；``生活不易，共勉同求。`**

转载于:https://www.cnblogs.com/elsonww/p/11456244.html

[https_github.com_ElsonJe_Simple-ui.git]: https://github.com/ElsonJe/Simple-ui.git
[https_www.iconfont.cn]: https://www.iconfont.cn/
[1459138-20190903224206578-1036838649.gif]: /images/20230601/044de5ef949640b7aa2a1a1e23325b16.png