u-checkbox-group.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. <template>
  2. <view class="u-checkbox-group u-clearfix">
  3. <slot></slot>
  4. </view>
  5. </template>
  6. <script>
  7. import Emitter from '../../libs/util/emitter.js';
  8. /**
  9. * checkboxGroup 开关选择器父组件Group
  10. * @description 复选框组件一般用于需要多个选择的场景,该组件功能完整,使用方便
  11. * @tutorial https://www.uviewui.com/components/checkbox.html
  12. * @property {String Number} max 最多能选中多少个checkbox(默认999)
  13. * @property {String Number} size 组件整体的大小,单位rpx(默认40)
  14. * @property {Boolean} disabled 是否禁用所有checkbox(默认false)
  15. * @property {String Number} icon-size 图标大小,单位rpx(默认20)
  16. * @property {Boolean} label-disabled 是否禁止点击文本操作checkbox(默认false)
  17. * @property {String} width 宽度,需带单位
  18. * @property {String} width 宽度,需带单位
  19. * @property {String} shape 外观形状,shape-方形,circle-圆形(默认circle)
  20. * @property {Boolean} wrap 是否每个checkbox都换行(默认false)
  21. * @property {String} active-color 选中时的颜色,应用到所有子Checkbox组件(默认#2979ff)
  22. * @event {Function} change 任一个checkbox状态发生变化时触发,回调为一个对象
  23. * @example <u-checkbox-group></u-checkbox-group>
  24. */
  25. export default {
  26. name: 'u-checkbox-group',
  27. mixins: [Emitter],
  28. props: {
  29. // 最多能选中多少个checkbox
  30. max: {
  31. type: [Number, String],
  32. default: 999
  33. },
  34. // 所有选中项的 name
  35. // value: {
  36. // default: Array,
  37. // default() {
  38. // return []
  39. // }
  40. // },
  41. // 是否禁用所有复选框
  42. disabled: {
  43. type: Boolean,
  44. default: false
  45. },
  46. // 在表单内提交时的标识符
  47. name: {
  48. type: [Boolean, String],
  49. default: ''
  50. },
  51. // 是否禁止点击提示语选中复选框
  52. labelDisabled: {
  53. type: Boolean,
  54. default: false
  55. },
  56. // 形状,square为方形,circle为原型
  57. shape: {
  58. type: String,
  59. default: 'square'
  60. },
  61. // 选中状态下的颜色
  62. activeColor: {
  63. type: String,
  64. default: '#2979ff'
  65. },
  66. // 组件的整体大小
  67. size: {
  68. type: [String, Number],
  69. default: 34
  70. },
  71. // 每个checkbox占u-checkbox-group的宽度
  72. width: {
  73. type: String,
  74. default: 'auto'
  75. },
  76. // 是否每个checkbox都换行
  77. wrap: {
  78. type: Boolean,
  79. default: false
  80. },
  81. // 图标的大小,单位rpx
  82. iconSize: {
  83. type: [String, Number],
  84. default: 20
  85. },
  86. },
  87. data() {
  88. return {
  89. }
  90. },
  91. created() {
  92. // 如果将children定义在data中,在微信小程序会造成循环引用而报错
  93. this.children = [];
  94. },
  95. methods: {
  96. emitEvent() {
  97. let values = [];
  98. this.children.map(val => {
  99. if(val.value) values.push(val.name);
  100. })
  101. this.$emit('change', values);
  102. // 发出事件,用于在表单组件中嵌入checkbox的情况,进行验证
  103. // 由于头条小程序执行迟钝,故需要用几十毫秒的延时
  104. setTimeout(() => {
  105. // 将当前的值发送到 u-form-item 进行校验
  106. this.dispatch('u-form-item', 'on-form-change', values);
  107. }, 60)
  108. }
  109. }
  110. }
  111. </script>
  112. <style lang="scss" scoped>
  113. @import "../../libs/css/style.components.scss";
  114. .u-checkbox-group {
  115. /* #ifndef MP || APP-NVUE */
  116. display: inline-flex;
  117. flex-wrap: wrap;
  118. /* #endif */
  119. }
  120. </style>