基于taro的bem规范实践及checkbox组件的案例

前端

2023-12-14 16:07:10

作为一名技术博客创作专家，我很荣幸地与大家分享我在基于taro的bem规范实践中的经验和心得。在本文中，我将通过一个checkbox组件的案例，详细讲解bem规范的具体应用。我希望这篇文章能对各位读者有所帮助。

1. bem规范简介

bem规范是一种前端开发中的命名约定，它可以帮助我们提高代码的可读性、可维护性和可重用性。bem规范由三部分组成：

块（block） ：一个独立的、可重用的组件，如按钮、表格等。
元素（element） ：块的一部分，如按钮的文本内容、表格的行等。
修饰符（modifier） ：用于改变块或元素的外观或行为，如按钮的禁用状态、表格的斑马线样式等。

2. 基于taro的bem规范实践

在taro中，我们可以通过以下步骤来实现bem规范：

定义块、元素和修饰符。

对于每个组件，我们需要定义它的块、元素和修饰符。例如，对于一个按钮组件，我们可以定义如下：

块：btn
元素：text
修饰符：disabled

在组件的样式文件中使用bem规范。

在组件的样式文件中，我们需要使用bem规范来定义组件的样式。例如，对于按钮组件，我们可以定义如下：

.btn {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  color: #333;
  text-align: center;
  line-height: 20px;
  cursor: pointer;
}

.btn--disabled {
  background-color: #ccc;
  color: #999;
  cursor: not-allowed;
}

.btn__text {
  font-size: 14px;
}

在组件的模板文件中使用bem规范。

在组件的模板文件中，我们需要使用bem规范来定义组件的结构。例如，对于按钮组件，我们可以定义如下：

<template>
  <button class="btn">
    <span class="btn__text">{{ text }}</span>
  </button>
</template>

在组件的逻辑文件中使用bem规范。

在组件的逻辑文件中，我们需要使用bem规范来定义组件的行为。例如，对于按钮组件，我们可以定义如下：

import Taro from '@tarojs/taro'

export default class Button extends Component {
  handleClick() {
    if (!this.props.disabled) {
      Taro.showToast({
        title: '按钮被点击了',
        icon: 'none'
      })
    }
  }

  render() {
    return (
      <view class="btn" onClick={this.handleClick}>
        <view class="btn__text">{{ text }}</view>
      </view>
    )
  }
}

3. checkbox组件的案例

现在，让我们通过一个checkbox组件的案例来详细讲解bem规范的具体应用。

3.1 定义块、元素和修饰符

对于checkbox组件，我们可以定义如下：

块：checkbox
元素：input, label
修饰符：checked, disabled

3.2 在组件的样式文件中使用bem规范

.checkbox {
  display: inline-block;
  vertical-align: middle;
}

.checkbox__input {
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
}

.checkbox__input:checked {
  background-color: #007bff;
  border-color: #007bff;
}

.checkbox__input:disabled {
  background-color: #ccc;
  border-color: #ccc;
  cursor: not-allowed;
}

.checkbox__label {
  margin-left: 4px;
  font-size: 14px;
  cursor: pointer;
}

3.3 在组件的模板文件中使用bem规范

<template>
  <view class="checkbox">
    <input class="checkbox__input" type="checkbox" id="{{ id }}" {{ checked ? 'checked' : '' }} {{ disabled ? 'disabled' : '' }} />
    <label class="checkbox__label" for="{{ id }}">{{ text }}</label>
  </view>
</template>

3.4 在组件的逻辑文件中使用bem规范

import Taro from '@tarojs/taro'

export default class Checkbox extends Component {
  onChange(e) {
    this.props.onChange(e.detail.value)
  }

  render() {
    return (
      <view class="checkbox">
        <input class="checkbox__input" type="checkbox" id="{{ id }}" {{ checked ? 'checked' : '' }} {{ disabled ? 'disabled' : '' }} onChange={this.onChange} />
        <label class="checkbox__label" for="{{ id }}">{{ text }}</label>
      </view>
    )
  }
}