微信小程序实现筛选多选

KAGHQ

已于 2024-01-21 22:39:43 修改

阅读量651

点赞数 8

文章标签：微信小程序小程序

于 2024-01-19 14:02:18 首次发布

本文链接：https://blog.csdn.net/lrqqhm/article/details/135696275

版权

PopupArray.vue

<template>
  <div>
    <div class="battery-status flex flex-wrap">
      <div class="item" :class="item.flag ? 'current' : ''" v-for="item in batteryArray" :key="item.value"
        @click.stop="clickBattery(item)">
        <span>{{ item.label }}：{{ item.count }}</span>
        <div class="item-double" v-if="item.flag">
          <div class="double-image">
            <image :src="warehouseImage.DOUBLE_IMAGE"></image>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import warehouseImage from "@/static/images/warehouseImage.js";


export default {
  props: {
    batteryArray: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      currentValue: '',
      warehouseImage
    };
  },
  computed: {

  },
  created() {

  },
  mounted() {

  },
  watch: {

  },
  methods: {
    clickBattery(item) {
      this.currentValue = item.value
      this.$emit('clickBattery', item.value)
    }
  },
  components: {

  },
};
</script>

<style scoped lang="scss">
.item {
  position: relative;
  width: 338rpx;
  height: 76rpx;
  line-height: 76rpx;
  text-align: center;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background: #f2f2f2;
  margin-right: 24rpx;
  margin-bottom: 24rpx;

  .item-double {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 24rpx;
    height: 24rpx;
    border-radius: 4px 0px 3px 0px;
    background: #475CE8;

    .double-image {
      width: 12rpx;
      height: 12rpx;

      image {
        width: 13rpx;
        height: 8rpx;
        position: absolute;
        top: 30%;
        left: 20%;
      }
    }
  }


}

.current {
  background: #fff;
  height: 74rpx;
  border-radius: 8rpx;
  color: #475CE8;
  border: 2rpx solid #475CE8;
}
</style>

list.vue

<template>
  <div class="container-status">
    <div class="status-container">
      <popup-array :batteryArray="statStatus" @clickBattery="clickBattery"></popup-array>
    </div>
  </div>
</template>

<script>
import PopupArray from "./PopupArray.vue";


export default {
  data() {
    return {
      statStatus: [
        // {
        //   value: "3",
        //   label: "闲置",
        //   count: 20,
        //   flag: false
        // },
        // {
        //   value: "2",
        //   label: "闲置",
        //   count: 20,
        //   flag: false
        // },
        // {
        //   value: "1",
        //   label: "闲置",
        //   count: 20,
        //   flag: false
        // },
        // {
        //   value: "4",
        //   label: "闲置",
        //   count: 20,
        //   flag: false
        // },
        // {
        //   value: "5",
        //   label: "闲置",
        //   count: 20,
        //   flag: false
        // },
        // {
        //   value: "6",
        //   label: "闲置",
        //   count: 20,
        //   flag: false
        // },
        // {
        //   value: "7",
        //   label: "闲置",
        //   count: 20,
        //   flag: false
        // },
        // {
        //   value: "8",
        //   label: "闲置",
        //   count: 20,
        //   flag: false
        // },
        // {
        //   value: "9",
        //   label: "闲置",
        //   count: 20,
        //   flag: false
        // },
      ]
    };
  },
  computed: {

  },
  created() {

  },
  mounted() {
  },
  methods: {
    // 选择  敲重点
    clickBattery(value) {
      this.statStatus.forEach(item => {
        if (item.value === value) {
          item.flag = !item.flag
        }
      })
    },
  },
  components: {
    PopupArray,
  },
}
</script>

<style scoped lang="scss">
.button-bottom {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.container-status {
  height: 800rpx;
  overflow: auto;
  padding-bottom: 176rpx;

  .status-container {
    padding: 40rpx 0 0 24rpx;
  }
}
</style>