index.js 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. import { VantComponent } from '../common/component';
  2. import { BLUE, GRAY_DARK } from '../common/color';
  3. VantComponent({
  4. field: true,
  5. classes: ['node-class'],
  6. props: {
  7. checked: null,
  8. loading: Boolean,
  9. disabled: Boolean,
  10. activeColor: String,
  11. inactiveColor: String,
  12. size: {
  13. type: String,
  14. value: '30px'
  15. },
  16. activeValue: {
  17. type: null,
  18. value: true
  19. },
  20. inactiveValue: {
  21. type: null,
  22. value: false
  23. }
  24. },
  25. watch: {
  26. checked(value) {
  27. const loadingColor = this.getLoadingColor(value);
  28. this.setData({ value, loadingColor });
  29. }
  30. },
  31. created() {
  32. const { checked: value } = this.data;
  33. const loadingColor = this.getLoadingColor(value);
  34. this.setData({ value, loadingColor });
  35. },
  36. methods: {
  37. getLoadingColor(checked) {
  38. const { activeColor, inactiveColor } = this.data;
  39. return checked ? activeColor || BLUE : inactiveColor || GRAY_DARK;
  40. },
  41. onClick() {
  42. const { activeValue, inactiveValue } = this.data;
  43. if (!this.data.disabled && !this.data.loading) {
  44. const checked = this.data.checked === activeValue;
  45. const value = checked ? inactiveValue : activeValue;
  46. this.$emit('input', value);
  47. this.$emit('change', value);
  48. }
  49. }
  50. }
  51. });