index.js 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  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: {
  8. type: null,
  9. observer(value) {
  10. const loadingColor = this.getLoadingColor(value);
  11. this.setData({ value, loadingColor });
  12. },
  13. },
  14. loading: Boolean,
  15. disabled: Boolean,
  16. activeColor: String,
  17. inactiveColor: String,
  18. size: {
  19. type: String,
  20. value: '30px',
  21. },
  22. activeValue: {
  23. type: null,
  24. value: true,
  25. },
  26. inactiveValue: {
  27. type: null,
  28. value: false,
  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. });