(El-button-group)解决：优化 el-button 实现 button 相连且动态切换的使用案例(涉及：动态绑定 class )

news2024/11/25 21:23:29

Ⅰ、Element-ui 提供的组件与想要目标情况的对比：

1、Element-ui 提供组件情况：
其一、Element-ui 自提供的代码情况为(示例的代码，例子如下)：
在这里插入图片描述

// Element-ui 自提供的代码：
<template>
  <div>
    <el-button-group>
      <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
      <el-button type="primary">下一页<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>

代码地址：https://element.eleme.cn/#/zh-CN/component/button

其二、页面的显示情况为：

// 忽略它的颜色，按道理应该是和 Element-ui 上显示一样的 蓝色 ，但是所做项目中挑了默认的 Element-ui 的底色，因此是绿色；
在这里插入图片描述

Ⅱ、实现 El-button-group 样式变化的过程：

1、从 main.js 中引入 base.scss 文件，此时关于样式的问题就可以直接在 base.scss 文件里面写了；

其一、在 main.js 中引入 base.scss ：

在这里插入图片描述

// 文件结构；

在这里插入图片描述

其二、在 base.scss 文件里面写的样式为：

.button_active {
  border-color: #1890ff !important;
  background-color: #e6f7ff !important;
  color: #1890ff !important;
  // 控制被点击的 button 的长度;
  min-width: 90px !important; 
}
.button_inactive {
  background: #fff !important;
  padding: 0 12px !important;
  color: #096dd9 !important;
  // 控制未被点击的 button 的长度;
  min-width: 90px !important; 
}
// 该样式是：控制右侧的 button 距离左侧的距离，为了显示连接在一起，因此是 margin-left: 1px;
.left_width {
  margin-left: 1px !important;
}

2、 在单文件组件里引入 El-button-group 及 el-button 并动态绑定着被点击或不被点击的样式：

其一、代码为：

// 此时就用到了动态绑定 class 类为：button_active、button_inactive、left_width

<template>
  <div style="margin-top:100px;">
    <el-button-group>
      <el-button :class="button_all">全部</el-button>
      <el-button :class="button_synchronized">已同步</el-button>
      <el-button :class="button_unsynchronized" >未同步</el-button>
      <el-button :class="button_affiliate">挂靠</el-button>
      <el-button :class="button_migrate" >迁移</el-button>
      <el-button :class="button_deleted" >已删除</el-button>
      <el-button :class="button_disabled" >禁用</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>

其二、页面为：

// 此时的页面并不能实现点击切换的操作，只是能展示出来，用的 button_inactive，left_width，button_active 的类，就是在 base.scss 中定义的类；
在这里插入图片描述

3、添加 el-button 间的切换功能：

其一、代码为：

<template>
  <div style="margin-top:100px;margin-left:50px;">
    <el-button-group>
      <el-button :class="button_all" @click="onSearch('all')">全部</el-button>
      <el-button :class="button_synchronized" @click="onSearch('synchronized')">已同步</el-button>
      <el-button :class="button_unsynchronized" @click="onSearch('unsynchronized')">未同步</el-button>
      <el-button :class="button_affiliate" @click="onSearch('affiliate')">挂靠</el-button>
      <el-button :class="button_migrate" @click="onSearch('migrate')">迁移</el-button>
      <el-button :class="button_deleted" @click="onSearch('deleted')">已删除</el-button>
      <el-button :class="button_disabled" @click="onSearch('disabled')">禁用</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>

其二、页面为：

// 此时任意点击，都可以实现切换的效果；
在这里插入图片描述

Ⅲ、实现 El-button-group 样式的整体代码与显示结果：

1、整体代码为：

其一、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;
}

其二、案例页面代码：

<template>
  <div style="margin-top:100px;margin-left:50px;">
    <el-button-group>
      <el-button :class="button_all" @click="onSearch('all')">全部</el-button>
      <el-button :class="button_synchronized" @click="onSearch('synchronized')">已同步</el-button>
      <el-button :class="button_unsynchronized" @click="onSearch('unsynchronized')">未同步</el-button>
      <el-button :class="button_affiliate" @click="onSearch('affiliate')">挂靠</el-button>
      <el-button :class="button_migrate" @click="onSearch('migrate')">迁移</el-button>
      <el-button :class="button_deleted" @click="onSearch('deleted')">已删除</el-button>
      <el-button :class="button_disabled" @click="onSearch('disabled')">禁用</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、显示结果为：
在这里插入图片描述

Ⅳ、小结：

其一、哪里有不对或不合适的地方，还请大佬们多多指点和交流！
其二、有兴趣的话，可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/566253.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

深度解析多线程的创建方式和正确启动多线程

深度解析多线程的创建方式和正确启动多线程

一、创建多线程 1. 实现多线程 java 实现多线程的方式准确来说有两种&#xff08;oracle官方文档说的&#xff09;&#xff1a; &#xff08;1&#xff09;实现 Runnable 接口&#xff0c; 重写run()函数&#xff0c;运行start()方法 代码演示&#xff1a; /*** 用Runnable…
阅读更多...
移动端浏览器性能优化探索

移动端浏览器性能优化探索

在移动端的页面开发过程中&#xff0c;我们经常提及页面性能优化、消除页面卡顿的话题&#xff0c;如何确定优化策略&#xff0c;我们首先应当对页面卡顿的行为有所认知。 前言 &#xfeff; 页面的卡顿现象可以比较明确的分为三个类型&#xff0c;分别是 “画面撕裂” 、“丢帧…
阅读更多...
让你不再好奇怎么给小说配音

让你不再好奇怎么给小说配音

你是否曾经想象过&#xff0c;当你在读小说时&#xff0c;你可以听到人物的声音&#xff0c;感受到情感和气氛的变化&#xff1f;有声书的出现已经让这一切成为可能。然而&#xff0c;如何为小说创造生动的配音效果却是一个需要仔细考虑的问题。如果你还不知道怎么给小说配音的…
阅读更多...
酷开会员丨版权时代，酷开科技打造更多优质内容服务消费者

酷开会员丨版权时代，酷开科技打造更多优质内容服务消费者

以版权产业为核心的文化产业&#xff0c;需要重视版权、鼓励创新&#xff0c;才能形成文化创新的环境与氛围&#xff0c;这也是版权时代的发展趋势。在版权时代&#xff0c;付费观看是基本意识&#xff0c;比如电视内容供应方提供了大量免费的资源&#xff0c;观众为观看更精良…
阅读更多...
数据结构之二叉树的基本实现

数据结构之二叉树的基本实现

在我们之前已经了解的堆这样的完全二叉树的实现&#xff0c;也对树型结构有了一些了解&#xff0c;那么今天我们来看看二叉树的一些性质。 因为二叉树是一种每个节点至多只有两个子树&#xff08;即二叉树的每个节点的度不大于2&#xff09;&#xff0c;并且二叉树的子树有左右…
阅读更多...
二、Django REST Framework (DRF)序列化反序列化数据校验

二、Django REST Framework (DRF)序列化反序列化数据校验

参考&#xff1a; DRF 官方文档&#xff1a; Serializers - Django REST framework中文站点 为什么要学DRF和什么是REST API | 大江狗的博客 上一章&#xff1a; 一、Django REST Framework (DRF)& RESTful 风格api_做测试的喵酱的博客-CSDN博客 下一章&#xff1a;…
阅读更多...
【C++】类和对象（中上）：类的六个默认成员函数——构造函数、析构函数、拷贝构造函数！

【C++】类和对象（中上）：类的六个默认成员函数——构造函数、析构函数、拷贝构造函数！

目录 前言&#xff1a; 一、类的默认成员函数&#xff1a; 二、构造函数&#xff1a; 1.特性&#xff1a; 构造函数调用规则&#xff1a; 1.无参数的构造函数&#xff08;默认构造函数&#xff09;&#xff1a; 2.带参数的构造函数&#xff1a; 3.全缺省的构造函数&…
阅读更多...
Qt编写视频监控系统75-计算实时码率并显示

Qt编写视频监控系统75-计算实时码率并显示

一、前言 做监控摄像头的实时视频显示&#xff0c;一般还会要求统计实时码率显示在通道画面上&#xff0c;一个是为了测试下整个软件的性能&#xff0c;同时也看下当前到底是主码流还是子码流&#xff0c;设备到底是不是真的按照设定的码流大小来传输视频数据的。视频码率就是…
阅读更多...
【Mysql】 数据类型

【Mysql】 数据类型

文章目录 【Mysql】 数据类型数据类型分类数值类型1. tinyint类型2. bit类型3. 小数类型 字符串类型1.char2.varchar3. 日期和时间类型4. enum 和 set 【Mysql】 数据类型 mysql中数据类型的作用&#xff1a; 约束操作者的行为更清晰的代码逻辑不同的功用 – 例如&#xff0c…
阅读更多...
【JavaSE】Java基础语法(八)

【JavaSE】Java基础语法(八)

文章目录 &#x1f353;1. 类和对象&#x1f379;&#x1f379;1.1 类和对象的关系&#x1f379;&#x1f379;1.2 类的定义 &#x1f353;2. 对象内存图&#x1f379;&#x1f379;2.1 单个对象内存图&#x1f379;&#x1f379;2.2 多个对象内存图2.3 多个对象指向相同内存图…
阅读更多...
统计学_贾俊平——思考题第9章 分类数据分析

统计学_贾俊平——思考题第9章 分类数据分析

1&#xff0e;简述列联表的构造与列联表的分布。 答&#xff1a;列联表是将两个以上的变量进行交叉分类的频数分布表。 列联表的分布可以从两个方面看&#xff0c;一个是观察值的分布&#xff0c;又称为条件分布&#xff0c;每个具体的观察值就是条件频数&#xff1b;一个是期望…
阅读更多...
【数据结构】树的认识

【数据结构】树的认识

一个人的未来不是预测出来的&#xff0c;而是创造出来的。 -- 亚当詹姆斯目录 &#x1f341;前言&#xff1a; &#x1f340;一.什么是树&#xff1f; &#x1f351;二.树有什么用&#xff1f; ❤️1. 数据库 &#x1f9e1;2. 文件系统 &#x1…
阅读更多...
chatgpt赋能python：PythonUSB摄像头-拍摄更美好的瞬间

chatgpt赋能python：PythonUSB摄像头-拍摄更美好的瞬间

Python USB摄像头 - 拍摄更美好的瞬间 在过去的几年中&#xff0c;摄影已经迅速成为了一种爆炸性的趋势。人们希望能够记录下人生中的美好瞬间&#xff0c;分享给全球的亲朋好友。而USB摄像头的普及与发展使得照片拍摄变得更加便利。而在这其中&#xff0c;Python也扮演了一个…
阅读更多...
spingboot+jsp仓储型物流企业车辆运输管理系统

spingboot+jsp仓储型物流企业车辆运输管理系统

随着时代的进步,物流车辆运输行业也逐渐变得庞大起来。当然,物流车辆运输公司要想做大做强,就有必要有自己完整的一套物流车辆运输管理系统。这必将为物流管理公司提供规范化的管理模式,在各个部门之间有效的协调、合作过程中必将为物流车辆公司提供大量的客户生源,争取赢得最大…
阅读更多...
6.4_7关键路径

6.4_7关键路径

上一节我们学的叫做AOV网&#xff08;activity on vertex&#xff09; 这一节我们是(activity on edge network) 顶点表示事件是一瞬间发生的事情。边上的权值表示完成该活动的开销。 AOE网中&#xff0c;有些事情是可以并行的。 前后活动之间存在依赖关系&#xff0c;我i们要知…
阅读更多...
python绘制密度图

python绘制密度图

本期目录 1、绘图参数2、使用 matplotlib 库绘制密度图时常用的参数3、案例4、 运行结果python绘图往期系列文章目录 1、绘图参数 可以使用多种库来绘制密度图&#xff0c;其中最常用的是 seaborn 和 matplotlib。以下是使用 seaborn 库绘制密度图时常用的参数&#xff1a; i…
阅读更多...
简历上，我写精通 JUC 的底气

简历上，我写精通 JUC 的底气

真的假的&#xff0c;你简历上敢写精通 JUC &#xff1f; 是真学到精通了&#xff0c;还是说只学到了个皮毛就写精通&#xff0c;从而争取一个面试机会。 我相信&#xff0c;当很多人看到文章标题的第一反应也会如上面的一样&#xff0c;质疑、好奇。这很正常&#xff0c;如果…
阅读更多...
手把手教你用Python调用彩云机器翻译API

手把手教你用Python调用彩云机器翻译API

一、引言 彩云这个小而美的机器翻译一直很低调&#xff0c;它让人眼前一亮的是之前我们分享的网页翻译插件&#xff0c;可以把外文网站翻译成英中对照的样式&#xff0c;便于我们学习。之前我们也写过文章介绍过&#xff1a; PythonFan&#xff1a;如何用Google翻译英文网页成…
阅读更多...
c++学习——类和对象

c++学习——类和对象

类和对象的基本概念 类是自定义数据类型&#xff0c;是C语言的结构体进化而成的 对象是类实例化出的&#xff0c;用数据类型定义一个变量 #define _CRT_SECURE_NO_WARNINGS #include <iostream> using namespace std;class Maker //这个是类 { public:int a;//成员属性…
阅读更多...
PostgreSQL EDB 公司推出新服务，ORACLE 平移到 POSTGRESQL 一体化服务

PostgreSQL EDB 公司推出新服务，ORACLE 平移到 POSTGRESQL 一体化服务

开头还是介绍一下群&#xff0c;如果感兴趣polardb ,mongodb ,mysql ,postgresql ,redis 等有问题&#xff0c;有需求都可以加群群内有各大数据库行业大咖&#xff0c;CTO&#xff0c;可以解决你的问题。加群请联系 liuaustin3 &#xff0c;在新加的朋友会分到2群&#xff08;共…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023