From f4991944d13b94355fb8aaf03dad7d60ca530ee9 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Thu, 30 Nov 2023 16:36:45 +0800 Subject: [PATCH] fix:是否修改 --- uni_modules/uview-ui/components/u-checkbox-group/u-checkbox-group.vue | 103 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 103 insertions(+), 0 deletions(-) diff --git a/uni_modules/uview-ui/components/u-checkbox-group/u-checkbox-group.vue b/uni_modules/uview-ui/components/u-checkbox-group/u-checkbox-group.vue new file mode 100644 index 0000000..7a6b4fa --- /dev/null +++ b/uni_modules/uview-ui/components/u-checkbox-group/u-checkbox-group.vue @@ -0,0 +1,103 @@ +<template> + <view + class="u-checkbox-group" + :class="bemClass" + > + <slot></slot> + </view> +</template> + +<script> + import props from './props.js'; + /** + * checkboxGroup ������������ + * @description ��������������������������������������������������������������������������������������������� + * @tutorial https://www.uviewui.com/components/checkbox.html + * @property {String} name ��������� + * @property {Array} value ������������ + * @property {String} shape ���������circle-���������square-������ ��������� 'square' ��� + * @property {Boolean} disabled ������������������checkbox ��������� false ��� + * @property {String} activeColor ���������������������������������������������������������parent���activeColor��� ��������� '#2979ff' ��� + * @property {String} inactiveColor ������������������ ��������� '#c8c9cc' ��� + * @property {String | Number} size ��������������������� ������px ��������� 18 ��� + * @property {String} placement ���������������row-���������column-������ ��������� 'row' ��� + * @property {String | Number} labelSize label������������������px������ ��������� 14 ��� + * @property {String} labelColor label��������������� ��������� '#303133' ��� + * @property {Boolean} labelDisabled ������������������������������ (������ false ) + * @property {String} iconColor ������������ ��������� '#ffffff' ��� + * @property {String | Number} iconSize ������������������������px ��������� 12 ��� + * @property {String} iconPlacement ������������������������������left-���������right-������ ��������� 'left' ��� + * @property {Boolean} borderBottom placement���row��������������������������� ��������� false ��� + * @event {Function} change ���������checkbox��������������������������������������������������� + * @event {Function} input ������������v-model��������������������������������������������� + * @example <u-checkbox-group></u-checkbox-group> + */ + export default { + name: 'u-checkbox-group', + mixins: [uni.$u.mpMixin, uni.$u.mixin,props], + computed: { + // ������computed���������������������������u-checkbox��������������������������������������������������������������������������������������������������������������� + // ������������������������������������������������������parentData������������watch���������������������������������������������������������������(u-checkbox-group) + // ��������������������������������������� + parentData() { + return [this.value, this.disabled, this.inactiveColor, this.activeColor, this.size, this.labelDisabled, this.shape, + this.iconSize, this.borderBottom, this.placement + ] + }, + bemClass() { + // this.bem���������computed������������mixin��� + return this.bem('checkbox-group', ['placement']) + }, + }, + watch: { + // ��������������������������������������������������������������������������������������� + parentData() { + if (this.children.length) { + this.children.map(child => { + // ���������������(u-checkbox)���������init���������������������������(������������������������������������������������������������������) + typeof(child.init) === 'function' && child.init() + }) + } + }, + }, + data() { + return { + + } + }, + created() { + this.children = [] + }, + methods: { + // ������������checkbox��������������������������� + unCheckedOther(childInstance) { + const values = [] + this.children.map(child => { + // ���������������checkbox������������������������ + if (child.isChecked) { + values.push(child.name) + } + }) + // ������������ + this.$emit('change', values) + // ������������v-model������������ + this.$emit('input', values) + }, + } + } +</script> + +<style lang="scss" scoped> + @import "../../libs/css/components.scss"; + + .u-checkbox-group { + + &--row { + @include flex; + } + + &--column { + @include flex(column); + } + } +</style> -- Gitblit v1.8.0