index.js 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. // Utils
  2. import { createNamespace, addUnit } from '../utils';
  3. import { switchProps } from './shared'; // Mixins
  4. import { FieldMixin } from '../mixins/field'; // Components
  5. import Loading from '../loading';
  6. var _createNamespace = createNamespace('switch'),
  7. createComponent = _createNamespace[0],
  8. bem = _createNamespace[1];
  9. export default createComponent({
  10. mixins: [FieldMixin],
  11. props: switchProps,
  12. computed: {
  13. checked: function checked() {
  14. return this.value === this.activeValue;
  15. },
  16. style: function style() {
  17. return {
  18. fontSize: addUnit(this.size),
  19. backgroundColor: this.checked ? this.activeColor : this.inactiveColor
  20. };
  21. }
  22. },
  23. methods: {
  24. onClick: function onClick(event) {
  25. this.$emit('click', event);
  26. if (!this.disabled && !this.loading) {
  27. var newValue = this.checked ? this.inactiveValue : this.activeValue;
  28. this.$emit('input', newValue);
  29. this.$emit('change', newValue);
  30. }
  31. },
  32. genLoading: function genLoading() {
  33. var h = this.$createElement;
  34. if (this.loading) {
  35. var color = this.checked ? this.activeColor : this.inactiveColor;
  36. return h(Loading, {
  37. "class": bem('loading'),
  38. "attrs": {
  39. "color": color
  40. }
  41. });
  42. }
  43. }
  44. },
  45. render: function render() {
  46. var h = arguments[0];
  47. var checked = this.checked,
  48. loading = this.loading,
  49. disabled = this.disabled;
  50. return h("div", {
  51. "class": bem({
  52. on: checked,
  53. loading: loading,
  54. disabled: disabled
  55. }),
  56. "attrs": {
  57. "role": "switch",
  58. "aria-checked": String(checked)
  59. },
  60. "style": this.style,
  61. "on": {
  62. "click": this.onClick
  63. }
  64. }, [h("div", {
  65. "class": bem('node')
  66. }, [this.genLoading()])]);
  67. }
  68. });