3.vue造轮子-button-group

前言

image.png

制作如图的效果

新建button-group组件

<template>
    <div class="button-group">
        <slot></slot>
    </div>
</template>

import Vue from 'vue'
import  Button from './button'
import  Icon from './icon'
import  ButtonGroup from './button-group'

Vue.component('g-button',Button);
Vue.component('g-icon',Icon);
Vue.component('g-button-group',ButtonGroup);

new Vue({
    el: "#app",
    data:{
        loading1:false,
        loading2:true,
        loading3:false
    }
});

<div id="app">
    <g-button :loading="loading1" @click="loading1 = !loading1">按钮</g-button>
    <g-button icon="setting" icon-position="left" :loading="loading2" @click="loading2 = !loading2">按钮</g-button>
    <g-button icon="setting" icon-position="right" :loading="loading3" @click="loading3 = !loading3">按钮</g-button>

    <g-button-group>
        <g-button icon="left">上一页</g-button>
        <g-button>更多</g-button>
        <g-button icon="right" icon-position="right">下一页</g-button>
    </g-button-group>
</div>

添加 css样式

<style lang="scss">
    .button-group {
        display: inline-flex;

    }
</style>

image.png

上下不对齐，修改如下

<style lang="scss">
    .button-group {
        display: inline-flex;
        vertical-align: middle;
    }
</style>

image.png

发现一个bug 边框会出现重合

第一种方法 border-left：none

<style lang="scss">
    .button-group {
        display: inline-flex;
        vertical-align: middle;
        border-left: none;
        > .g-button{
            border-radius: 0;
            &:first-child{
                border-top-left-radius: var(--border-radius);
                border-bottom-left-radius: var(--border-radius);
            }
            &:last-child{
                border-top-right-radius: var(--border-radius);
                border-bottom-right-radius: var(--border-radius);
            }
        }
    }
</style>

image.png

设置第一个不修改

<style lang="scss">
    .button-group {
        display: inline-flex;
        vertical-align: middle;
        > .g-button{
            border-radius: 0;
            &:not(:first-child){
                border-left: none;
            }
            &:first-child{
                border-top-left-radius: var(--border-radius);
                border-bottom-left-radius: var(--border-radius);
            }
            &:last-child{
                border-top-right-radius: var(--border-radius);
                border-bottom-right-radius: var(--border-radius);
            }
        }
    }
</style>

image.png

发现bug，如下所示，之后的框都是三边框

image.png

margin-left position z-index

    .button-group {
        display: inline-flex;
        vertical-align: middle;
        > .g-button{
            border-radius: 0;
            margin-left: -1px;
            &:first-child{
                border-top-left-radius: var(--border-radius);
                border-bottom-left-radius: var(--border-radius);
            }
            &:last-child{
                border-top-right-radius: var(--border-radius);
                border-bottom-right-radius: var(--border-radius);
            }
            &:hover{
                position: relative;z-index: 1;
            }
        }
    }

image.png image.png

将子组件全部margin-left左移1px，然后鼠标浮动到该位置时 触发hover里面的条件

最终 bug

如果用户更改了位置会如何？？？
所以要判断标签是否是button ，不是的话就弹出警告

<div id="app">
    <g-button :loading="loading1" @click="loading1 = !loading1">按钮</g-button>
    <g-button icon="setting" icon-position="left" :loading="loading2" @click="loading2 = !loading2">按钮</g-button>
    <g-button icon="setting" icon-position="right" :loading="loading3" @click="loading3 = !loading3">按钮</g-button>

    <g-button-group>
        <div>
            <g-button icon="left">上一页</g-button>
        </div>
        <g-button>更多</g-button>
        <g-button icon="right" icon-position="right">下一页</g-button>
    </g-button-group>
</div>

image.png

mounted()

<script>
    export default {
        name: "button-group",
        mounted() {
            console.log(this.$children);
        }
    }
</script>

image.png

<script>
    export default {
        name: "button-group",
        mounted() {
            console.log(this.$el.children);
        }
    }
</script>

image.png

<script>
    export default {
        name: "button-group",
        mounted() {
            for(let node of this.$el.children){
                console.log(node);
            }
        }
    }
</script>

image.png

<script>
    export default {
        name: "button-group",
        mounted() {
            for (let node of this.$el.children) {
                if (node.nodeName !== 'button') {
                    console.warn('g-button-group的子元素应该都是button')
                }
            }
        }
    }
</script>

弹出警告

image.png

修改一下

<script>
    export default {
        name: "button-group",
        mounted() {
            for (let node of this.$el.children) {
                let name = node.nodeName.toLocaleLowerCase();
                if (name !== 'button') {
                    console.warn(`g-button-group的子元素应该都是button,但是你写的是 ${name}`)
                }
            }
        }
    }
</script>

image.png