index.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. <template>
  2. <view class="van-checkbox custom-class">
  3. <view class="van-checkbox__icon-wrap" @tap="toggle">
  4. <slot v-if="useIconSlot" name="icon" />
  5. <van-icon
  6. v-else
  7. name="success"
  8. size="0.8em"
  9. :class="utils.bem('checkbox__icon', [shape, { disabled: disabled || parentDisabled, checked: value }])"
  10. :style="computed.iconStyle(checkedColor, value, disabled, parentDisabled, iconSize)"
  11. custom-class="icon-class"
  12. custom-style="line-height: 1.25em;"
  13. />
  14. </view>
  15. <view :class="'label-class ' + utils.bem('checkbox__label', [labelPosition, { disabled: disabled || parentDisabled }])" @tap="onClickLabel">
  16. <slot />
  17. </view>
  18. </view>
  19. </template>
  20. <script module="utils" lang="wxs" src="@/miniprogram_npm/@vant/weapp/wxs/utils.wxs"></script>
  21. <script module="computed" lang="wxs" src="@/miniprogram_npm/@vant/weapp/checkbox/index.wxs"></script>
  22. <script>
  23. 'use strict';
  24. Object.defineProperty(exports, '__esModule', {
  25. value: true
  26. });
  27. var component_1 = require('../common/component');
  28. function emit(target, value) {
  29. target.$emit('input', value);
  30. target.$emit('change', value);
  31. }
  32. component_1.VantComponent({
  33. field: true,
  34. relation: {
  35. name: 'checkbox-group',
  36. type: 'ancestor',
  37. current: 'checkbox'
  38. },
  39. classes: ['icon-class', 'label-class'],
  40. props: {
  41. value: Boolean,
  42. disabled: Boolean,
  43. useIconSlot: Boolean,
  44. checkedColor: String,
  45. labelPosition: String,
  46. labelDisabled: Boolean,
  47. shape: {
  48. type: String,
  49. value: 'round'
  50. },
  51. iconSize: {
  52. type: null,
  53. value: 20
  54. }
  55. },
  56. data: {
  57. parentDisabled: false
  58. },
  59. methods: {
  60. emitChange: function (value) {
  61. if (this.parent) {
  62. this.setParentValue(this.parent, value);
  63. } else {
  64. emit(this, value);
  65. }
  66. },
  67. toggle: function () {
  68. var _a = this;
  69. var parentDisabled = _a.parentDisabled;
  70. var disabled = _a.disabled;
  71. var value = _a.value;
  72. if (!disabled && !parentDisabled) {
  73. this.emitChange(!value);
  74. }
  75. },
  76. onClickLabel: function () {
  77. var _a = this;
  78. var labelDisabled = _a.labelDisabled;
  79. var parentDisabled = _a.parentDisabled;
  80. var disabled = _a.disabled;
  81. var value = _a.value;
  82. if (!disabled && !labelDisabled && !parentDisabled) {
  83. this.emitChange(!value);
  84. }
  85. },
  86. setParentValue: function (parent, value) {
  87. var parentValue = parent.data.value.slice();
  88. var name = this.name;
  89. var max = parent.data.max;
  90. if (value) {
  91. if (max && parentValue.length >= max) {
  92. return;
  93. }
  94. if (parentValue.indexOf(name) === -1) {
  95. parentValue.push(name);
  96. emit(parent, parentValue);
  97. }
  98. } else {
  99. var index = parentValue.indexOf(name);
  100. if (index !== -1) {
  101. parentValue.splice(index, 1);
  102. emit(parent, parentValue);
  103. }
  104. }
  105. }
  106. }
  107. });
  108. </script>
  109. <style>
  110. @import './index.css';
  111. </style>