vue3 组件篇 checkboxGroup

组件介绍

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

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

组件安装与使用

需要先安装vue3-dxui

yarn add vue3-dxui
1

或者

npm install vue3-dxui
1

全局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')
1
2
3
4
5
6
7

按需引入

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

export default {
  components: {
  	CheckboxGroup
  }
}
</script>
1
2
3
4
5
6
7
8
9

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

<CheckboxGroup>
  <Checkbox>1111</Checkbox>
  <Checkbox>2222</Checkbox>
  <Checkbox>3333</Checkbox>
</CheckboxGroup>
1
2
3
4
5

options1 = [
  {
    label: '1111',
    value: '1111'
  },
  {
    label: '2222',
    value: '2222'
  },
  {
    label: '3333',
    value: '3333'
  }
]
<CheckboxGroup :options="options1"></CheckboxGroup>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

options1 = [
  {
    label: '1111',
    value: '1111'
  },
  {
    label: '2222',
    value: '2222'
  },
  {
    label: '3333',
    value: '3333'
  }
]
<CheckboxGroup :options="options1" :isCloumns="true"></CheckboxGroup>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

对整组禁用

 <CheckboxGroup :disabled="true">
   <Checkbox>1111</Checkbox>
   <Checkbox>2222</Checkbox>
   <Checkbox>3333</Checkbox>
 </CheckboxGroup>
1
2
3
4
5

对整组的checkbox的状态赋值

 <CheckboxGroup :defaultValue="['1111', '2222']">
   <Checkbox value="1111">1111</Checkbox>
   <Checkbox value="2222">2222</Checkbox>
   <Checkbox value="3333">3333</Checkbox>
 </CheckboxGroup>
1
2
3
4
5

checkboxGroup内部只能使用checkbox组件

 <CheckboxGroup>
   <Checkbox>1111</Checkbox>
   <Checkbox>2222</Checkbox>
   <Checkbox>3333</Checkbox>
   <h1>这是错误的标签h1</h1>
 </CheckboxGroup>
1
2
3
4
5
6

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

代码展示

<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159

参数说明

事件

关于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