小程序選擇組件

<template>
  <view class="checkbox-container">
    <view v-for="(item, index) in checkboxListData" :key="index" class="checkbox-item" :style="{'border-color': typeColor[type], 'background': item.isChecked? typeColor[type] : '#ffffff'}"
      @click="checkboxItemClick(index, item)">
      <view :style="{'color': item.isChecked? '#ffffff' : typeColor[type] }">{{item.name}}</view>
    </view>
  </view>
</template>

<script>
  export default {
    model: {
      prop: 'selectedList',
      event: 'selectedListChange'
    },
    props: {
      checkboxList: {
        type: Array,
        default: () => [{
            name: "t1",
            id: 1
          },
          {
            id: 2,
            name: "t2"
          }
        ]
      },
      selectedList: {
        type: Array,
        default: () => [{
          name: 't1',
          id: 1
        }]
      },
      type: {
        type: String,
        default: "success" // primary/success/danger
      },
      isSingle: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        checkboxListData: [],
        typeColor: {
          primary: "#007bff",
          success: "#8BC34A",
          danger: "#dc3545"
        },
      };
    },
    watch: {
      selectedList(newVal) {
        console.log('select list new value:', newVal)
        this.getCheckboxListData(newVal)
      }
    },
    
    mounted() {
      // 獲取checkbox list data
      this.getCheckboxListData()
    },
    
    methods: {
      getCheckboxListData(selectedList) {
        // 獲取checkbox list data
        if (selectedList === undefined) {
          selectedList = this.selectedList
        } 
        const checkboxListData = []
        for (const i in this.checkboxList) {
          checkboxListData.push(Object.assign({
            isChecked: false
          }, this.checkboxList[i]))

          for (const j in selectedList) {
            if (this.checkboxList[i].id === selectedList[j].id) {
              checkboxListData[i].isChecked = true
              break
            }
          }
        }
        this.checkboxListData = checkboxListData
        console.log('mounted list data:', this.checkboxListData)
      },

      updateCheckboxListData(listItem) {
        const selectedList = []
        for (const i in this.checkboxListData) {
          if (this.checkboxListData[i].id === listItem.id) {
            if (this.isSingle) {
              this.checkboxListData[i].isChecked = true
            } else {
              this.checkboxListData[i].isChecked = !this.checkboxListData[i].isChecked
            }
          } else {
            if (this.isSingle) {
              this.checkboxListData[i].isChecked = false
            }
          }
          
          if (this.checkboxListData[i].isChecked) {
            selectedList.push(this.checkboxListData[i])
          }
        }
        return selectedList
      },

      checkboxItemClick(index, item) {
        console.log('checkbox item click:', index, item)
        const result = this.updateCheckboxListData(item)
        
        console.log('selected list:', result)
        this.$emit('selectedListChange', result)
      }
    }
  };
</script>

<style scoped>
  .checkbox-container {
    padding: 14upx 0;
  }

  .checkbox-item {
    border-width: 1px;
    border-style: solid;
    border-radius: 7upx;
    padding: 7upx 24upx;
    margin-right: 24upx;
    display: inline-flex;
    font-size: 14px;
  }
</style>