checkbox.js 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. /**
  2. * Common part of Checkbox & Radio
  3. */
  4. import Icon from '../icon';
  5. import { FindParentMixin } from './find-parent';
  6. export var CheckboxMixin = function CheckboxMixin(parent, bem) {
  7. return {
  8. mixins: [FindParentMixin],
  9. props: {
  10. name: null,
  11. value: null,
  12. disabled: Boolean,
  13. checkedColor: String,
  14. labelPosition: String,
  15. labelDisabled: Boolean,
  16. shape: {
  17. type: String,
  18. "default": 'round'
  19. }
  20. },
  21. created: function created() {
  22. this.findParent(parent);
  23. },
  24. computed: {
  25. isDisabled: function isDisabled() {
  26. return this.parent && this.parent.disabled || this.disabled;
  27. },
  28. iconStyle: function iconStyle() {
  29. var checkedColor = this.checkedColor;
  30. if (checkedColor && this.checked && !this.isDisabled) {
  31. return {
  32. borderColor: checkedColor,
  33. backgroundColor: checkedColor
  34. };
  35. }
  36. }
  37. },
  38. render: function render(h) {
  39. var _this = this;
  40. var slots = this.slots,
  41. checked = this.checked;
  42. var CheckIcon = slots('icon', {
  43. checked: checked
  44. }) || h(Icon, {
  45. "attrs": {
  46. "name": "success"
  47. },
  48. "style": this.iconStyle
  49. });
  50. var Label = slots() && h("span", {
  51. "class": bem('label', [this.labelPosition, {
  52. disabled: this.isDisabled
  53. }]),
  54. "on": {
  55. "click": this.onClickLabel
  56. }
  57. }, [slots()]);
  58. return h("div", {
  59. "class": bem(),
  60. "on": {
  61. "click": function click(event) {
  62. _this.$emit('click', event);
  63. }
  64. }
  65. }, [h("div", {
  66. "class": bem('icon', [this.shape, {
  67. disabled: this.isDisabled,
  68. checked: checked
  69. }]),
  70. "on": {
  71. "click": this.onClickIcon
  72. }
  73. }, [CheckIcon]), Label]);
  74. }
  75. };
  76. };