(El-button-group) Solve: optimize el-button to realize the use case of button connection and dynamic switching (involving: dynamic binding class)

Ⅰ、Comparison between the components provided by Element-ui and the desired target situation:

1. Element-ui provides components:
First, the code provided by Element-ui is (sample code, the example is as follows):

// Code provided by Element-ui:
<template>
  <div>
    <el-button-group>
      <el-button type="primary" icon="el-icon-arrow-left">Previous page</el-button>
      <el-button type="primary">Next page<i class="el-icon-arrow-right el-icon--right"></i></el-button>
    </el-button-group>
    <el-button-group>
      <el-button type="primary" icon="el-icon-edit"></el-button>
      <el-button type="primary" icon="el-icon-share"></el-button>
      <el-button type="primary" icon="el-icon-delete"></el-button>
    </el-button-group>
  </div>
</template>

Code address: https://element.eleme.cn/#/zh-CN/component/button

Second, the display of the page is:

//Ignore its color, it should be the same blue as displayed on Element-ui, but the default Element- The background color of ui, so it is green;

Ⅱ. The process of realizing El-button-group style change:

1. Import the base.scss file from main.js. At this time, the questions about the style can be directly in base.scss It is written in the file;

First, introduce base.scss in main.js:

// file structure;

Second, the style written in the base.scss file is:

.button_active {<!-- -->
  border-color: #1890ff !important;
  background-color: #e6f7ff !important;
  color: #1890ff !important;
  // Control the length of the clicked button;
  min-width: 90px !important;
}
.button_inactive {<!-- -->
  background: #fff !important;
  padding: 0 12px !important;
  color: #096dd9 !important;
  // Control the length of the unclicked button;
  min-width: 90px !important;
}
// The style is: control the distance between the button on the right and the left side, in order to show that they are connected together, so margin-left: 1px;
.left_width {<!-- -->
  margin-left: 1px !important;
}

2. Introduce El-button-group and el-button in the single-file component and dynamically bind the style of being clicked or not:

First, the code is:

// At this time, dynamic binding class is used: button_active, button_inactive, left_width

<template>
  <div style="margin-top:100px;">
    <el-button-group>
      <el-button :class="button_all">All</el-button>
      <el-button :class="button_synchronized">Synchronized</el-button>
      <el-button :class="button_unsynchronized" >Unsynchronized</el-button>
      <el-button :class="button_affiliate">Affiliate</el-button>
      <el-button :class="button_migrate" >Migrate</el-button>
      <el-button :class="button_deleted" >Deleted</el-button>
      <el-button :class="button_disabled" >Disable</el-button>
    </el-button-group>
  </div>
</template>
<script>
export default {<!-- -->
  data() {<!-- -->
    return {<!-- -->
      button_all: 'button_active',
      button_synchronized: 'button_inactive left_width',
      button_unsynchronized: 'button_inactive left_width',
      button_affiliate: 'button_inactive left_width',
      button_migrate: 'button_inactive left_width',
      button_deleted: 'button_inactive left_width',
      button_disabled: 'button_inactive left_width'
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>

Second, the page is:

// At this time, the page cannot realize the operation of clicking and switching, but can only be displayed, using button_inactive, left_width, button_active The class is the class defined in base.scss;

3. Add the switching function between el-buttons:

First, the code is:

<template>
  <div style="margin-top:100px;margin-left:50px;">
    <el-button-group>
      <el-button :class="button_all" @click="onSearch('all')">All</el-button>
      <el-button :class="button_synchronized" @click="onSearch('synchronized')">Synchronized</el-button>
      <el-button :class="button_unsynchronized" @click="onSearch('unsynchronized')">Unsynchronized</el-button>
      <el-button :class="button_affiliate" @click="onSearch('affiliate')">Affiliate</el-button>
      <el-button :class="button_migrate" @click="onSearch('migrate')">Migrate</el-button>
      <el-button :class="button_deleted" @click="onSearch('deleted')">Deleted</el-button>
      <el-button :class="button_disabled" @click="onSearch('disabled')">Disable</el-button>
    </el-button-group>
  </div>
</template>
<script>
export default {<!-- -->
  data() {<!-- -->
    return {<!-- -->
      button_all: 'button_active',
      button_synchronized: 'button_inactive left_width',
      button_unsynchronized: 'button_inactive left_width',
      button_affiliate: 'button_inactive left_width',
      button_migrate: 'button_inactive left_width',
      button_deleted: 'button_inactive left_width',
      button_disabled: 'button_inactive left_width'
    }
  },
  methods: {<!-- -->
    onSearch(type) {<!-- -->
      let scope = this
      if(type === 'all') {<!-- -->
        scope.button_all = 'button_active'
        scope.button_synchronized = 'button_inactive left_width'
        scope.button_unsynchronized = 'button_inactive left_width'
        scope.button_affiliate = 'button_inactive left_width'
        scope.button_migrate = 'button_inactive left_width'
        scope.button_deleted = 'button_inactive left_width'
        scope.button_disabled = 'button_inactive left_width'
      } else if( type === 'synchronized' ) {<!-- -->
          scope.button_all = 'button_inactive'
          scope.button_synchronized = 'button_active left_width'
          scope.button_unsynchronized = 'button_inactive left_width'
          scope.button_affiliate = 'button_inactive left_width'
          scope.button_migrate = 'button_inactive left_width'
          scope.button_deleted = 'button_inactive left_width'
          scope.button_disabled = 'button_inactive left_width'
      } else if(type === 'unsynchronized') {<!-- -->
          scope.button_all = 'button_inactive'
          scope.button_synchronized = 'button_inactive left_width'
          scope.button_unsynchronized = 'button_active left_width'
          scope.button_affiliate = 'button_inactive left_width'
          scope.button_migrate = 'button_inactive left_width'
          scope.button_deleted = 'button_inactive left_width'
          scope.button_disabled = 'button_inactive left_width'
      } else if(type === 'affiliate') {<!-- -->
          scope.button_all = 'button_inactive'
          scope.button_synchronized = 'button_inactive left_width'
          scope.button_unsynchronized = 'button_inactive left_width'
          scope.button_affiliate = 'button_active left_width'
          scope.button_migrate = 'button_inactive left_width'
          scope.button_deleted = 'button_inactive left_width'
          scope.button_disabled = 'button_inactive left_width'
      } else if(type === 'migrate') {<!-- -->
          scope.button_all = 'button_inactive'
          scope.button_synchronized = 'button_inactive left_width'
          scope.button_unsynchronized = 'button_inactive left_width'
          scope.button_affiliate = 'button_inactive left_width'
          scope.button_migrate = 'button_active left_width'
          scope.button_deleted = 'button_inactive left_width'
          scope.button_disabled = 'button_inactive left_width'
      } else if(type === 'deleted') {<!-- -->
          scope.button_all = 'button_inactive'
          scope.button_synchronized = 'button_inactive left_width'
          scope.button_unsynchronized = 'button_inactive left_width'
          scope.button_affiliate = 'button_inactive left_width'
          scope.button_migrate = 'button_inactive left_width'
          scope.button_deleted = 'button_active left_width'
          scope.button_disabled = 'button_inactive left_width'
      } else {<!-- -->
        scope.button_all = 'button_inactive'
        scope.button_synchronized = 'button_inactive left_width'
        scope.button_unsynchronized = 'button_inactive left_width'
        scope.button_affiliate = 'button_inactive left_width'
        scope.button_migrate = 'button_inactive left_width'
        scope.button_deleted = 'button_inactive left_width'
        scope.button_disabled = 'button_active left_width'
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>

Second, the page is:

// At this time, any click can realize the effect of switching;

Ⅲ. The overall code and display results to realize the El-button-group style:

1. The overall code is:

First, the code of base.scss:

.button_active {<!-- -->
  border-color: #1890ff !important;
  background-color: #e6f7ff !important;
  color: #1890ff !important;
  min-width: 90px !important;
}
.button_inactive {<!-- -->
  background: #fff !important;
  padding: 0 12px !important;
  color: #096dd9 !important;
  min-width: 90px !important;
}
.left_width {<!-- -->
  margin-left: 1px !important;
}

Second, case page code:

<template>
  <div style="margin-top:100px;margin-left:50px;">
    <el-button-group>
      <el-button :class="button_all" @click="onSearch('all')">All</el-button>
      <el-button :class="button_synchronized" @click="onSearch('synchronized')">Synchronized</el-button>
      <el-button :class="button_unsynchronized" @click="onSearch('unsynchronized')">Unsynchronized</el-button>
      <el-button :class="button_affiliate" @click="onSearch('affiliate')">Affiliate</el-button>
      <el-button :class="button_migrate" @click="onSearch('migrate')">Migrate</el-button>
      <el-button :class="button_deleted" @click="onSearch('deleted')">Deleted</el-button>
      <el-button :class="button_disabled" @click="onSearch('disabled')">Disable</el-button>
    </el-button-group>
  </div>
</template>
<script>
export default {<!-- -->
  data() {<!-- -->
    return {<!-- -->
      button_all: 'button_active',
      button_synchronized: 'button_inactive left_width',
      button_unsynchronized: 'button_inactive left_width',
      button_affiliate: 'button_inactive left_width',
      button_migrate: 'button_inactive left_width',
      button_deleted: 'button_inactive left_width',
      button_disabled: 'button_inactive left_width'
    }
  },
  methods: {<!-- -->
    onSearch(type) {<!-- -->
      let scope = this
      if(type === 'all') {<!-- -->
        scope.button_all = 'button_active'
        scope.button_synchronized = 'button_inactive left_width'
        scope.button_unsynchronized = 'button_inactive left_width'
        scope.button_affiliate = 'button_inactive left_width'
        scope.button_migrate = 'button_inactive left_width'
        scope.button_deleted = 'button_inactive left_width'
        scope.button_disabled = 'button_inactive left_width'
      } else if( type === 'synchronized' ) {<!-- -->
          scope.button_all = 'button_inactive'
          scope.button_synchronized = 'button_active left_width'
          scope.button_unsynchronized = 'button_inactive left_width'
          scope.button_affiliate = 'button_inactive left_width'
          scope.button_migrate = 'button_inactive left_width'
          scope.button_deleted = 'button_inactive left_width'
          scope.button_disabled = 'button_inactive left_width'
      } else if(type === 'unsynchronized') {<!-- -->
          scope.button_all = 'button_inactive'
          scope.button_synchronized = 'button_inactive left_width'
          scope.button_unsynchronized = 'button_active left_width'
          scope.button_affiliate = 'button_inactive left_width'
          scope.button_migrate = 'button_inactive left_width'
          scope.button_deleted = 'button_inactive left_width'
          scope.button_disabled = 'button_inactive left_width'
      } else if(type === 'affiliate') {<!-- -->
          scope.button_all = 'button_inactive'
          scope.button_synchronized = 'button_inactive left_width'
          scope.button_unsynchronized = 'button_inactive left_width'
          scope.button_affiliate = 'button_active left_width'
          scope.button_migrate = 'button_inactive left_width'
          scope.button_deleted = 'button_inactive left_width'
          scope.button_disabled = 'button_inactive left_width'
      } else if(type === 'migrate') {<!-- -->
          scope.button_all = 'button_inactive'
          scope.button_synchronized = 'button_inactive left_width'
          scope.button_unsynchronized = 'button_inactive left_width'
          scope.button_affiliate = 'button_inactive left_width'
          scope.button_migrate = 'button_active left_width'
          scope.button_deleted = 'button_inactive left_width'
          scope.button_disabled = 'button_inactive left_width'
      } else if(type === 'deleted') {<!-- -->
          scope.button_all = 'button_inactive'
          scope.button_synchronized = 'button_inactive left_width'
          scope.button_unsynchronized = 'button_inactive left_width'
          scope.button_affiliate = 'button_inactive left_width'
          scope.button_migrate = 'button_inactive left_width'
          scope.button_deleted = 'button_active left_width'
          scope.button_disabled = 'button_inactive left_width'
      } else {<!-- -->
        scope.button_all = 'button_inactive'
        scope.button_synchronized = 'button_inactive left_width'
        scope.button_unsynchronized = 'button_inactive left_width'
        scope.button_affiliate = 'button_inactive left_width'
        scope.button_migrate = 'button_inactive left_width'
        scope.button_deleted = 'button_inactive left_width'
        scope.button_disabled = 'button_active left_width'
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>

2. The displayed result is:

IV. Summary:

First, where there is something wrong or inappropriate, please give me some pointers and exchanges!
Second, if you are interested, you can pay more attention to this column (Vue (Vue2 + Vue3) interview must-have column): https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014 .3001.5482