Element复选框分析

前端

2023-10-19 22:36:17

Element源码分析系列6-Checkbox(复选框)#

说到复选框大家肯定都比较熟悉，在我们日常使用的很多网页表格中都有复选框的出现，用于进行多选操作，比如：

在商品详情页中，经常会看到一个“添加到购物车”按钮，点击后会将商品添加到购物车中，并显示一个勾选框，表示该商品已添加到购物车中；

在问卷调查中，经常会看到多选题，每个选项旁边都有一个勾选框，供用户选择。

复选框的原理其实很简单，它是一个可以被用户勾选或取消勾选的控件。当用户勾选复选框时，其值会被设置为“true”，当用户取消勾选复选框时，其值会被设置为“false”。

Element中的复选框组件是一个非常强大的组件，它提供了丰富的功能和属性，可以满足各种各样的需求。下面，我们就一起来分析一下Element中复选框组件的代码。

逻辑分析

复选框的逻辑比单选框更为复杂，代码量也更多，这里只介绍其与单选框不同的逻辑，其余的分析参考单选框。

先上代码

<!-- checkbox 一组 -->
<el-checkbox-group v-model="checkboxGroup">
  <el-checkbox label="Default" name="default"></el-checkbox>
  <el-checkbox label="Disabled" name="disabled" disabled></el-checkbox>
  <el-checkbox label="Checked" name="checked" checked></el-checkbox>
</el-checkbox-group>

<!-- checkbox 单个 -->
<el-checkbox v-model="checkbox">...</el-checkbox>

是不是看的一脸懵逼，最好是打开官网，对照checkbox用法一项项来分析其原理。

首先是el-checkbox-group，它是一个组合复选框的组件，它可以将多个复选框组合在一起，实现多选功能。

<!-- checkbox 一组 -->
<el-checkbox-group v-model="checkboxGroup">
  <el-checkbox label="Default" name="default"></el-checkbox>
  <el-checkbox label="Disabled" name="disabled" disabled></el-checkbox>
  <el-checkbox label="Checked" name="checked" checked></el-checkbox>
</el-checkbox-group>

上面代码中，我们创建了一个el-checkbox-group组件，并将它与checkboxGroup数据绑定。这个组件中有三个el-checkbox组件，分别代表了三个复选框。

当用户勾选某个复选框时，checkboxGroup的数据值就会发生变化，我们可以通过监听checkboxGroup的变化来获取用户选择的复选框。

<!-- checkbox 单个 -->
<el-checkbox v-model="checkbox">...</el-checkbox>

上面代码中，我们创建了一个单个的el-checkbox组件，并将它与checkbox数据绑定。当用户勾选或取消勾选复选框时，checkbox的数据值就会发生变化，我们可以通过监听checkbox的变化来获取用户的选择。

样式分析

复选框的样式也比较简单，主要由一个勾选框和一个标签组成。勾选框的样式可以通过checkbox的icon属性来设置，标签的样式可以通过checkbox的label属性来设置。

<!-- checkbox 自定义样式 -->
<el-checkbox v-model="checkbox" icon="el-icon-star-on" label="我是自定义的复选框"></el-checkbox>

上面代码中，我们设置了复选框的勾选框样式和标签样式。

实例演示

下面我们来通过一个实例演示一下Element中的复选框组件如何使用。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <!-- checkbox 一组 -->
    <el-checkbox-group v-model="checkboxGroup">
      <el-checkbox label="Default" name="default"></el-checkbox>
      <el-checkbox label="Disabled" name="disabled" disabled></el-checkbox>
      <el-checkbox label="Checked" name="checked" checked></el-checkbox>
    </el-checkbox-group>

    <!-- checkbox 单个 -->
    <el-checkbox v-model="checkbox">...</el-checkbox>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            checkboxGroup: [],
            checkbox: false
          }
        }
      })
    </script>
  </div>
</body>
</html>