Switch

按钮切换组件

示例1

按钮1

按钮2

按钮3

代码

<template>
    <mao-switch :buttonItem="buttonList" @change="changeSwitch" />
</template>
<script>
export default {
    data() {
        return {
            buttonList: [
                {lable: '按钮1', value: 'button1'}, 
                {lable: '按钮2', value: 'button2'},
                {lable: '按钮3', value: 'button3'}
            ]
        }
    },
    methods: {
    changeSwitch(e) {
      console.log(e);
    }
  }
}
</script>

示例2

按钮1

按钮2

按钮3

代码

<template>
    <mao-switch 
        :width="40" :height="6"
        @change="changeSwitch" 
        background="#fff" 
        buttonClass="buttonClass" focusClss="switch" 
        :buttonItem="buttonList"
        :defaultIndex="1" />
</template>
<script>
export default {
    data() {
        return {
            buttonList: [
                {lable: '按钮1', value: 'button1'}, 
                {lable: '按钮2', value: 'button2'},
                {lable: '按钮3', value: 'button3'}
            ]
        }
    },
    methods: {
    changeSwitch(e) {
      console.log(e);
    }
  }
}
</script>
<style scoped lang="scss">
.switch {
  color: aliceblue !important;
  background: #b725c7;
}
.buttonClass {
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  color: rgb(47, 113, 237);
  font-size: 2vw;
  flex: 1;
  height: 4vh;
  cursor: pointer;
  &:not(:last-of-type) {
    border-right: #c8cecf 1px solid;
  }
  &:hover {
    background: #b725c7;
    color: aliceblue;
    text-shadow: 2px 3px 3px rgba(95, 101, 105, 1);
  }
}
</style>

Attributes

参数	说明	类型	是否必要	默认值
width	组件宽度	Number	false	20(vw)
height	组件高度	Number	false	5(vh)
background	组件背景色	String	false	——
buttonClass	按钮样式自定义	String	false	——
focusClss	选定按钮样式自定义	String	false	——
defaultIndex	默认选定按钮	Number	false	0
buttonItem	按钮	Array	true	——

Events

事件名称	说明	回调参数
change	按钮点击事件	目前的选中值