index.vue 1.5KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. <template>
  2. <uni-shadow-root class="vant-dist-checkbox-group-index"><view :class="utils.bem('checkbox-group', [{ horizontal: direction === 'horizontal' }])">
  3. <slot></slot>
  4. </view></uni-shadow-root>
  5. </template>
  6. <wxs src="../wxs/utils.wxs" module="utils"></wxs>
  7. <script>
  8. global['__wxRoute'] = 'vant/dist/checkbox-group/index'
  9. import { useChildren } from '../common/relation';
  10. import { VantComponent } from '../common/component';
  11. VantComponent({
  12. field: true,
  13. relation: useChildren('checkbox', function (target) {
  14. this.updateChild(target);
  15. }),
  16. props: {
  17. max: Number,
  18. value: {
  19. type: Array,
  20. observer: 'updateChildren',
  21. },
  22. disabled: {
  23. type: Boolean,
  24. observer: 'updateChildren',
  25. },
  26. direction: {
  27. type: String,
  28. value: 'vertical',
  29. },
  30. },
  31. methods: {
  32. updateChildren() {
  33. this.children.forEach((child) => this.updateChild(child));
  34. },
  35. updateChild(child) {
  36. const { value, disabled, direction } = this.data;
  37. child.setData({
  38. value: value.indexOf(child.data.name) !== -1,
  39. parentDisabled: disabled,
  40. direction,
  41. });
  42. },
  43. },
  44. });
  45. export default global['__wxComponents']['vant/dist/checkbox-group/index']
  46. </script>
  47. <style platform="mp-weixin">
  48. @import '../common/index.css';.van-checkbox-group--horizontal{display:flex;flex-wrap:wrap}
  49. </style>