小程序选择组件

Posted 2022-02-21 li1234yun

<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>