You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

51 lines
1.0 KiB

  1. <template>
  2. <view :class="className" :style="style" class="cu-form-group">
  3. <view class="title">{{ title }}</view>
  4. <checkbox
  5. @change="change"
  6. :class="[isCheck ? 'checked' : '', color ? color : '', round ? 'round' : '']"
  7. :checked="isCheck"
  8. :value="checkboxValue"
  9. :disabled="disabled"
  10. ></checkbox>
  11. </view>
  12. </template>
  13. <script>
  14. export default {
  15. name: 'l-checkbox',
  16. props: {
  17. title: {},
  18. disabled: {},
  19. round: {},
  20. color: {},
  21. checkboxValue: {},
  22. checked: {},
  23. value: { default: () => [] }
  24. },
  25. methods: {
  26. change(e) {
  27. let newVal = this.value
  28. const isCurrentCheck = e.detail.value
  29. if (isCurrentCheck) {
  30. newVal = [...this.value, this.checkboxValue]
  31. } else {
  32. newVal = this.value.filter(t => t !== this.checkboxValue)
  33. }
  34. this.$emit('input', newVal)
  35. this.$emit('change', newVal)
  36. }
  37. },
  38. computed: {
  39. isCheck() {
  40. return this.value.includes(this.checkboxValue)
  41. }
  42. }
  43. }
  44. </script>