Middle+

Чӣ гуна метавон компоненти ҷадвал бо рангҳои гуногуни ҳошия дар контекстҳои гуногун, бо истифода аз BEM ва муносибати асосёфта ба компонентҳо дар Vue, амалӣ кард?

sobes.tech AI

Ҷавоб аз AI

Для реализации таблицы с разными цветами бордера в разных контекстах, используя BEM и компонентный подход Vue, можно сделать так:

Определить базовый компонент таблицы с классом блока, например, table.
Для разных контекстов создать модификаторы, например, table--primary, table--secondary.
В CSS описать стили для этих модификаторов, задавая нужные цвета бордера.
В компоненте Vue принимать проп context и динамически добавлять соответствующий класс.

Пример:

<template>
  <table :class="['table', `table--${context}`]">
    <thead class="table__head">
      <tr class="table__row">
        <th class="table__cell">Заголовок</th>
      </tr>
    </thead>
    <tbody class="table__body">
      <tr class="table__row">
        <td class="table__cell">Данные</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: 'Table',
  props: {
    context: {
      type: String,
      default: 'primary'
    }
  }
}
</script>

<style scoped>
.table {
  border-collapse: collapse;
}
.table__cell {
  border: 1px solid;
  padding: 8px;
}
.table--primary .table__cell {
  border-color: blue;
}
.table--secondary .table__cell {
  border-color: green;
}
</style>

Такой подход сохраняет семантику BEM, позволяет легко расширять стили для новых контекстов и поддерживает переиспользуемость компонента.

Гузашта Оянда