uniappcheckbox學習筆記

一、什麼是uniappcheckbox

uniappcheckbox是Uni-app框架中的一個組件，該組件用於在應用中顯示一個複選框。複選框可以用於讓用戶選擇一個或多個選項。

<template>
  <view>
    <uni-checkbox v-model="isChecked">複選框</uni-checkbox>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isChecked: true
      };
    }
  }
</script>

在上面的代碼示例中，vue-checkbox組件通過v-model綁定了一個isChecked變數，isChecked變數控制複選框是否選中。

二、如何使用uniappcheckbox

1.基本用法

基本的用法，無非就是將組件嵌套在視圖中，並綁定數據即可。

<template>
  <view>
    <uni-checkbox v-model="isChecked">複選框</uni-checkbox>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isChecked: true
      };
    }
  }
</script>

2.帶標籤的用法

在這種用法中，可以在組件中添加文本、圖像等標籤以增強組件的視覺效果。

<template>
  <view>
    <uni-checkbox v-model="isChecked">
      <image src="img/check-icon.svg"></image>
      <span>選擇</span>
    </uni-checkbox>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isChecked: true
      };
    }
  }
</script>

3.禁用狀態的用法

在這個用法中，組件被禁用，無法響應用戶的交互操作。

<template>
  <view>
    <uni-checkbox v-model="isChecked" disabled>複選框</uni-checkbox>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isChecked: true
      };
    }
  }
</script>

4.多選用法

在這個用法中，可以使用v-for循環動態生成多個複選框，並根據不同的選擇來生成組合數據。

<template>
  <view>
    <ul>
      <li v-for="(item,index) in dataList" :key="index">
        <uni-checkbox v-model="item.isChecked">{{item.text}}</uni-checkbox>
      </li>
    </ul>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        dataList: [
          {
            text: '複選框1',
            isChecked: false
          },
          {
            text: '複選框2',
            isChecked: false
          },
          {
            text: '複選框3',
            isChecked: false
          }
        ]
      };
    }
  }
</script>

三、通用屬性

uniappcheckbox組件有多個通用屬性，這裡對其中幾個常用屬性進行介紹。

1.checked

checked屬性控制複選框是否選中。

<template>
  <view>
    <uni-checkbox :checked="isChecked" @change="onChange">複選框</uni-checkbox>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isChecked: true
      };
    },
    methods: {
      onChange(e) {
        console.log(e.detail.value)
      }
    }
  }
</script>

2.disabled

disabled屬性控制是否禁用組件。

<template>
  <view>
    <uni-checkbox :disabled="isDisabled" @change="onChange">複選框</uni-checkbox>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isDisabled: true
      };
    },
    methods: {
      onChange(e) {
        console.log(e.detail.value)
      }
    }
  }
</script>

四、事件處理

uniappcheckbox組件有兩個事件change和click。change事件會在checkbox選項改變時被觸發，而click事件會在組件被點擊時觸發。

<template>
  <view>
    <uni-checkbox @change="onChange" @click="onClick">複選框</uni-checkbox>
  </view>
</template>

<script>
  export default {
    methods: {
      onChange(e) {
        console.log(e.detail.value)
      },
      onClick() {
        console.log('click')
      }
    }
  }
</script>

五、總結

通過本文的學習，我們可以了解到uniappcheckbox是Uni-app框架中的一個組件，可以實現複選框的顯示和控制。我們可以通過不同的用法、屬性和事件來擴展和定製這個組件從而滿足不同的需求。