前言
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
