aiot-app/pages/warehouse/inventory/components/listOption.vue

<template>
  <view class="list-wrap">
    <view
      class="item"
      v-for="(item, index) in list"
      :key="index"
      :class="isActive(item)"
      @click="change(item)"
    >
      {{ item[label] }}
    </view>
  </view>
</template>

<script>
export default {
  model: {
    prop: 'active',
    event: 'change'
  },
  props: {
    list: {
      type: Array,
      default () {
        return []
      }
    },
    active: {
      type: [Number, String]
    },
    label: {
      type: String,
      default: 'label'
    },
    value: {
      type: String,
      default () {
        return 'value'
      }
    }
  },
  methods: {
    isActive (item) {
      if (this.active === item[this.value]) {
        return 'active'
      } else {
        return ''
      }
    },
    change (item) {
      this.$emit('change', item[this.value])
    }
  }
}
</script>

<style lang="scss" scoped>
$cols: 3; // 列数
$marginWidth: 20rpx; // 间隔
.list-wrap {
  padding: 0 30rpx;
  display: flex;
  flex-wrap: wrap;

  .item {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
    color: #333333;
    border: 1px solid #f2f2f2;
    width: calc((100% - #{($cols - 1) * $marginWidth}) / #{$cols});
    margin-left: $marginWidth;
    margin-bottom: $marginWidth;
    box-sizing: border-box;
    height: 60rpx;
  }

  .item:nth-of-type(#{$cols}n + 1) {
    margin-left: 0;
  }

  & .active {
    border: 1px solid #4b7902;
  }
}
</style>