checkbox.js 1.5 KB

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