vue组件封装之按钮封装★

vue实战当中的按钮封装

用到的知识点

1.动态绑定类名方法

 动态绑定类名方法有三种
    一种是对象的写法
    <button class="zy-button" :class="{'is-plain':plain}">
    index===currentIndex这个返回一个布尔值,如果是false则不加is-plain这个类名,如果为true则加
    <button class="zy-button" :class="{'is-plain':index===currentIndex}">
    一种是数组的写法
    <button :class="["zy-button",index===currentIndex？'className':'']">
    这样button会有至少一个类名,如果index===currentIndex那么就有两个类名,分别为zy-button和className
    还有一种是数组内部放对象的写法
    :class="[`zy-button--${type}`,{'is-plain':plain}]"

2.props校验

 // 封装一个通用的组件,会对props做一个约束,props进行校验
    props: {
        // 属性为type属性
        type: {
            //数据类型为字符串类型
            type: String,
            // 如果app.vue文件里的zy-button标签没有写type属性
            // 如下的default属性就是默认值,如果不填type属性就用默认值"default"
            default: "default"
        },
        // plain属性如果传了就是true,如果不传就是false
        plain: {
            type: Boolean,
            default: false
        },
        round: {
            type: Boolean,
            default: false
        },
        circle: {
            type: Boolean,
            default: false
        }
    },

封装正文如下

main.js文件代码如下

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 注册一个全局的组件
import zyButton from "./components/zy-button.vue"
console.log(zyButton.name)
Vue.component(zyButton.name,zyButton)
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

app.vue文件如下

<template>
<div id="app">
    <div class="row">
        <div>
            <zy-button @abc="fn">张亿</zy-button>
            <zy-button type="success">跟</zy-button>
            <zy-button type="primary">马嘉宁</zy-button>
            <zy-button type="info">Say</zy-button>
            <zy-button type="warning">哈</zy-button>
            <zy-button type="danger">喽</zy-button>
        </div>
        <hr>
        <div>
            <zy-button plain>张亿</zy-button>
            <zy-button plain type="success">跟</zy-button>
            <zy-button plain type="primary">马嘉宁</zy-button>
            <zy-button plain type="info">Say</zy-button>
            <zy-button plain type="warning">哈</zy-button>
            <zy-button plain type="danger">喽</zy-button>
        </div>
        <hr>
        <div>
            <zy-button round>张亿</zy-button>
            <zy-button type="success" round>跟</zy-button>
            <zy-button type="primary" round>马嘉宁</zy-button>
            <zy-button type="info" round>Say</zy-button>
            <zy-button type="warning" round>哈</zy-button>
            <zy-button type="danger" round>喽</zy-button>
        </div>
        <hr>
        <div>
            <zy-button circle round>张</zy-button>
            <zy-button circle round>亿</zy-button>
            <zy-button circle type="success">跟</zy-button>
            <zy-button circle type="primary">马</zy-button>
            <zy-button circle type="primary">嘉</zy-button>
            <zy-button circle type="primary">宁</zy-button>
            <zy-button circle type="info">S</zy-button>
            <zy-button circle type="info">a</zy-button>
            <zy-button circle type="info">y</zy-button>
            <zy-button circle type="warning">哈</zy-button>
            <zy-button circle type="danger">喽</zy-button>
        </div>
        <p class="z is">zzdd</p>
    </div>
</div>
</template>

<script>
export default {
    methods: {
        fn(a) {
            console.log(123)
            console.log(a)
        }
    }
}
</script>

<style lang="scss" scoped>
.row {
    margin-bottom: 20px;

    .zy-button {
        margin-right: 20px;
    }

    // .a.b{样式}这种写法表示标签同时有a和b两个class类名才可以拥有花括号内部的样式
    .z.is {
        margin-right: 20px;
        width: 70px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        background: chocolate;
        color: white;

        &:hover,
        &focus {
            background: #fff;
            border-color: #409eff;
            color: #409eff;
        }
    }

}
</style>

zy-button.vue文件夹下的代码

<template>
<button :class="['zy-button',`zy-button--${type}`,{'is-plain':plain},{'is-round':round},{'is-circle':circle}]" @click="handleClick">
    <!--:class="[`zy-button--${type}`,{'is-plain':plain}]"-->
    <!--
    动态绑定类名方法有三种
    一种是对象的写法
    <button class="zy-button" :class="{'is-plain':plain}">
    index===currentIndex这个返回一个布尔值,如果是false则不加is-plain这个类名,如果为true则加
    <button class="zy-button" :class="{'is-plain':index===currentIndex}">
    一种是数组的写法
    <button :class="["zy-button",index===currentIndex？'className':'']">
    这样button会有至少一个类名,如果index===currentIndex那么就有两个类名,分别为zy-button和className
    还有一种是数组内部放对象的写法
    :class="[`zy-button--${type}`,{'is-plain':plain}]"
    -->
    <span>
        <slot></slot>
    </span>
</button>
</template>

<script>
export default {
    name: "ZyButton",
    // 封装一个通用的组件,会对props做一个约束,props进行校验
    props: {
        // 属性为type属性
        type: {
            //数据类型为字符串类型
            type: String,
            // 如果app.vue文件里的zy-button标签没有写type属性
            // 如下的default属性就是默认值,如果不填type属性就用默认值"default"
            default: "default"
        },
        // plain属性如果传了就是true,如果不传就是false
        plain: {
            type: Boolean,
            default: false
        },
        round: {
            type: Boolean,
            default: false
        },
        circle: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {}
    },
    created() {
        console.log(this.type)
        console.log("插槽", this.$slots)
        // this.$slots可以访问所有的插槽,如果是具名插槽/命名插槽则用this.$slots.你命的名字
    },
    components: {},

    methods: {
        handleClick(e) {
            // 给插槽绑定一个点击事件,然后触发,<zy-button></zy-button>标签内部绑定的自定义事件并且传参
            this.$emit("abc", 1)
        }
    }
}
</script>

<style lang="scss" scoped>
.zy-button {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    transition: 0.1s;
    font-weight: 500;
    // 禁止元素的文字被选中
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;

    &:hover,
    &:focus {
        color: #409eff;
        border-color: #c6e2ff;
        background-color: #ecf5ff;
    }
}

// type按钮颜色的样式
.zy-button--danger {
    color: #fff;
    background-color: #f56c6c;
    border-color: #f56c6c;

    &:hover,
    &:focus {
        background: #f78989;
        border-color: #f78989;
        color: #fff;
    }
}

.zy-button--warning {
    color: #fff;
    background-color: #e6a23c;
    border-color: #e6a23c;

    &:hover,
    &:focus {
        background: #ebb563;
        border-color: #ebb563;
        color: #fff;
    }
}

.zy-button--info {
    color: #fff;
    background-color: #909399;
    border-color: #909399;

    &:hover,
    &:focus {
        background: #a6a9ad;
        border-color: #a6a9ad;
        color: #fff;
    }
}

.zy-button--success {
    color: #fff;
    background-color: #67c23a;
    border-color: #67c23a;

    &:hover,
    &:focus {
        background: #85ce61;
        border-color: #85ce61;
        color: #fff;
    }
}

.zy-button--primary {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;

    &:hover,
    &:focus {
        background: #66b1ff;
        border-color: #66b1ff;
        color: #fff;
    }
}

// plain朴素按钮的样式
// .a.b{样式}这种写法表示标签同时有a和b两个class类名才可以拥有花括号内部的样式

.zy-button.is-plain {

    &:hover,
    &focus {
        background: #fff;
        border-color: #409eff;
        color: #409eff;
    }
}

.zy-button--primary.is-plain {
    color: #409eff;
    background: #ecf5ff;
    border-color: #b3d8ff;

    &:hover,
    &focus {
        background: #409eff;
        border-color: #409eff;
        color: #fff;
    }
}

.zy-button--success.is-plain {
    color: #67c23a;
    background: #f0f9eb;
    border-color: #c2e7b0;

    &:hover,
    &focus {
        background: #67c23a;
        border-color: #67c23a;
        color: #fff;
    }
}

.zy-button--info.is-plain {
    color: #909399;
    background: #f4f4f5;
    border-color: #d3d4d6;

    &:hover,
    &focus {
        background: #909399;
        border-color: #909399;
        color: #fff;
    }
}

.zy-button--warning.is-plain {
    color: #e6a23c;
    background: #fdf6ec;
    border-color: #f5dab1;

    &:hover,
    &focus {
        background: #e6a23c;
        border-color: #e6a23c;
        color: #fff;
    }
}

.zy-button--danger.is-plain {
    color: #f56c6c;
    background: #fef0f0;
    border-color: #fbc4c4;

    &:hover,
    &focus {
        background: #f56c6c;
        border-color: #f56c6c;
        color: #fff;
    }
}

// 圆角的样式
.zy-button.is-round {
    border-radius: 20px;
    padding: 12px 23px;
}

// 圆形的样式
.zy-button.is-circle {
    border-radius: 50%;
    padding: 12px;
}
</style>