Ⅰ、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