文章目录
- 组件介绍
- 组件安装与使用
- 渲染一组checkbox的方式，通常有两种
- 排列方式分为纵向和横向两种方式
- 对整组所有的checkbox组件的状态进行管理
- checkboxGroup内部只能使用checkbox组件
- 代码展示
- 参数说明
- 事件
- 关于dxui组件库
组件介绍
checkboxGroup最主要的功能，就是配合checkbox带来更方便的交互模式。
- 能够渲染一组checkbox
- 分为两种排列方式
- 能够对整组checkbox的状态进行监控和管理
- 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网站的交互模式。
- 如果你有任何问题，请在博客下方评论留言，我尽可能24小时内回复。
- dxui新上线的官网域名变更 http://dxui.cn
- npm 官方链接 https://www.npmjs.com/package/vue3-dxui
- 如果你想看完整源码 https://github.com/757363985/dxui
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
