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.
 
 
 
 
 
 

50 lines
962 B

  1. <template>
  2. <view class="cu-form-group">
  3. <view class="title">{{ title }}</view>
  4. <checkbox
  5. @click="change"
  6. :checked="isCheck"
  7. :value="checkboxValue"
  8. :disabled="disabled"
  9. :class="[isCheck ? 'checked' : '', color ? color : '', round ? 'round' : '']"
  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. value: { default: () => [] }
  23. },
  24. methods: {
  25. change(e) {
  26. let arr = this.value
  27. const isCurrentCheck = this.value.includes(this.checkboxValue)
  28. if (isCurrentCheck) {
  29. arr = arr.filter(t => t !== this.checkboxValue)
  30. } else {
  31. arr.push(this.checkboxValue)
  32. }
  33. this.$emit('input', arr)
  34. this.$emit('change', arr)
  35. }
  36. },
  37. computed: {
  38. isCheck() {
  39. return this.value.includes(this.checkboxValue)
  40. }
  41. }
  42. }
  43. </script>