组件介绍

checkboxGroup最主要的功能，就是配合checkbox带来更方便的交互模式。

1. 能够渲染一组checkbox
2. 分为两种排列方式
3. 能够对整组checkbox的状态进行监控和管理
4. checkboxGroup在某种意义上，内部只能渲染checkbox组件

组件安装与使用

需要先安装vue3-dxui

yarn add vue3-dxui

或者

npm install vue3-dxui

全局main.ts中引入css

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'vue3-dxui/dxui/dxui.css'

createApp(App).use(store).use(router).mount('#app')

按需引入

<script>
import { CheckboxGroup } from 'vue3-dxui'

export default {
  components: {
  	CheckboxGroup
  }
}
</script>

渲染一组checkbox的方式，通常有两种

<CheckboxGroup>
  <Checkbox>1111</Checkbox>
  <Checkbox>2222</Checkbox>
  <Checkbox>3333</Checkbox>
</CheckboxGroup>

options1 = [
  {
    label: '1111',
    value: '1111'
  },
  {
    label: '2222',
    value: '2222'
  },
  {
    label: '3333',
    value: '3333'
  }
]
<CheckboxGroup :options="options1"></CheckboxGroup>

排列方式分为纵向和横向两种方式

options1 = [
  {
    label: '1111',
    value: '1111'
  },
  {
    label: '2222',
    value: '2222'
  },
  {
    label: '3333',
    value: '3333'
  }
]
<CheckboxGroup :options="options1" :isCloumns="true"></CheckboxGroup>

对整组所有的checkbox组件的状态进行管理

对整组禁用

 <CheckboxGroup :disabled="true">
   <Checkbox>1111</Checkbox>
   <Checkbox>2222</Checkbox>
   <Checkbox>3333</Checkbox>
 </CheckboxGroup>

对整组的checkbox的状态赋值

 <CheckboxGroup :defaultValue="['1111', '2222']">
   <Checkbox value="1111">1111</Checkbox>
   <Checkbox value="2222">2222</Checkbox>
   <Checkbox value="3333">3333</Checkbox>
 </CheckboxGroup>

checkboxGroup内部只能使用checkbox组件

 <CheckboxGroup>
   <Checkbox>1111</Checkbox>
   <Checkbox>2222</Checkbox>
   <Checkbox>3333</Checkbox>
   <h1>这是错误的标签h1</h1>
 </CheckboxGroup>

我在这里只是做了一些警告的处理，并没有强制报错

代码展示

<template>
  <div
    v-if="showSlots"
    :class="isCloumns ? 'dx-checkboxgroup-direaction-column' : ''"
    ref="checkboxGroup"
  >
    <slot />
  </div>
  <div v-else-if="options">
    <div
      class="dx-checkbox-item-warpper"
      :class="isCloumns ? 'dx-checkboxgroup-direaction-column' : ''"
      v-for="item in options"
      :key="item.value"
    >
      <Checkbox :disabled="disabled" :value="item.value">{{ item.label }}</Checkbox>
    </div>
  </div>
</template>

<script lang="ts">
import { onMounted, PropType, ref, SetupContext, provide, watch, reactive } from 'vue'
import { useShowSlotOrDefaultNode } from '@/common/index'

import { Data, Option, CheckedValue } from './types/index'
import Checkbox from '@/components/checkbox/Checkbox.vue'

export default {
  name: 'CheckboxGroup',
  props: {
    // checkbox配置的配置项
    options: {
      required: false,
      default: undefined,
      type: Array as PropType<Option[]>
    },
    //  默认的选中项,与Option中的value值相对应
    defaultValue: {
      required: false,
      default: undefined,
      type: Array as PropType<string[]>
    },
    // 整组失效
    disabled: {
      required: false,
      default: undefined,
      type: Boolean
    },
    // 指定的选中项,与Option中的value值相对应，由父组件确定后，组件自身无法更改，需要通过父组件改变传入的值
    value: {
      required: false,
      default: undefined,
      type: Array as PropType<string[]>
    },
    // 当选中的值发生改变时触发，也可以通过@Change的方式触发
    cheboxGroupChange: {
      required: false,
      default: undefined,
      type: Function as PropType<(params1: CheckedValue) => void> | undefined
    },
    // 是否希望每个选项单独一行
    isCloumns: {
      required: false,
      default: false,
      type: Boolean
    }
  },
  components: {
    Checkbox
  },
  setup(props: Data, ctx: SetupContext) {
    const showSlots = useShowSlotOrDefaultNode(ctx)
    const checkboxGroup: any = ref(null)
    let nowValue: string[] = []

    if (Object.prototype.toString.call(props.value) === '[object Array]') {
      nowValue = JSON.parse(JSON.stringify(props.value))
    } else if (Object.prototype.toString.call(props.defaultValue) === '[object Array]') {
      nowValue = JSON.parse(JSON.stringify(props.defaultValue))
    }

    const allCheckboxChange = function (value: string, checked: boolean) {
      const index = nowValue.findIndex((item: string) => {
        return item === value
      })
      if (checked) {
        if (index === -1) {
          nowValue.push(value)
        }
      } else {
        if (index !== -1) {
          nowValue.splice(index, 1)
        }
      }
      if (typeof props.cheboxGroupChange === 'function') {
        props.cheboxGroupChange(nowValue)
      }
      ctx.emit('checkboxGroupChange', nowValue)
    }

    const reactiveValue = reactive({
      disabled: props.disabled,
      value: props.value,
      defaultValue: props.defaultValue,
      changeCheckbox: allCheckboxChange
    })

    provide('checkboxGroupConfig', reactiveValue)

    watch(
      props,
      () => {
        reactiveValue.value = props.value
        reactiveValue.defaultValue = props.defaultValue
        reactiveValue.disabled = props.disabled
      },
      { deep: true }
    )

    onMounted(() => {
      if (checkboxGroup.value?.children && checkboxGroup.value?.children?.length) {
        const newList = Array.from(checkboxGroup?.value?.children)

        const hasNotCheckboxComponents = newList.some((item: any) => {
          return !item.className.includes('dx-checkbox-warpper')
        })
        if (hasNotCheckboxComponents) {
          // 算是给开发者的提醒，在CardGroup里只能使用card组件
          console.log(Error('Only Checkbox components can be used in CheckboxGroup'))
        }
      }
    })

    return {
      showSlots,
      checkboxGroup
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/scss/layout.scss';

.dx-checkbox-item-warpper {
  display: inline-block;
}

.dx-checkboxgroup-direaction-column {
  display: block;
}

.dx-checkboxgroup-direaction-column {
  ::v-deep .dx-checkbox-warpper {
    display: block;
  }
}
</style>

参数说明

参数名称	说明
options	checkbox配置的配置项 [{ label: string；value: string；disabled?: boolean}]
defaultValue	默认的选中项,与Option中的value值相对应 string[]
disabled	整组禁用
value	指定的选中项,与Option中的value值相对应，由父组件确定后，组件自身无法更改，需要通过父组件改变传入的值 string[]
isCloumns	是否纵向排列 boolean 默认false

事件

事件名称	说明
@checkboxGroupChange	当选中的值发生改变时触发回调 返回checkbox 最新状态

关于dxui组件库

dxui组件库是我个人搭建的vue3 前端交互组件库，倾向于pc网站的交互模式。

1. 如果你有任何问题，请在博客下方评论留言，我尽可能24小时内回复。
2. dxui新上线的官网域名变更 http://dxui.cn
3. npm 官方链接 https://www.npmjs.com/package/vue3-dxui
4. 如果你想看完整源码 https://github.com/757363985/dxui