eduepos_ui_store/pages/components/p-checkbox.vue

<template>
  <view class="checkbox" :class="isOpen ? 'active' : ''" @click="handleToggle">
    <text v-show="isOpen"></text>
    <view class="circle"></view>
    <text v-show="!isOpen"></text>
  </view>
</template>

<script>
export default {
  props: {
    isOpen: {
      required: true,
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  methods: {
    handleToggle() {
      this.$emit('toggle');
    }
  }
};
</script>

<style scoped lang="scss">
.active {
  background-color: #3c78ff !important;
}
.checkbox {
  width: 100rpx;
  height: 40rpx;
  padding: 4rpx;
  border-radius: 24rpx;
  background-color: #c3c8cc;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  > .circle {
    width: 40rpx;
    height: 40rpx;
    background-color: white;
    border-radius: 50%;
  }
  > text {
    flex: 1;
    font-size: 24rpx;
    color: white;
    &:first-of-type {
      text-align: left;
      margin-left: 16rpx;
    }
    &:last-of-type {
      text-align: right;
      margin-right: 16rpx;
    }
  }
}
</style>