Joe
11 months ago
10 changed files with 240 additions and 16 deletions
@ -0,0 +1,66 @@ |
|||||
|
<template> |
||||
|
<ElCheckboxGroup v-bind="$attrs" v-on="$listeners" class='CheckboxGroup'> |
||||
|
<ElCheckbox v-for="item in list" :label="item.key || item.label" :key="item.key || item.label"> |
||||
|
<slot :name="item.key || item.label" :data="item">{{ item.label }}</slot> |
||||
|
</ElCheckbox> |
||||
|
</ElCheckboxGroup> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'CheckboxGroup', |
||||
|
props: { |
||||
|
/** |
||||
|
* { |
||||
|
* label: string, |
||||
|
* key?: string, |
||||
|
* }[] |
||||
|
*/ |
||||
|
list: { |
||||
|
type: Array, |
||||
|
default: () => [] |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.CheckboxGroup { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
gap: 24px; |
||||
|
|
||||
|
::v-deep { |
||||
|
.el-checkbox { |
||||
|
margin: 0; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 6px; |
||||
|
|
||||
|
.el-checkbox__input { |
||||
|
line-height: 0; |
||||
|
|
||||
|
.el-checkbox__inner { |
||||
|
width: 16px; |
||||
|
height: 16px; |
||||
|
background: #0A3E54; |
||||
|
border-radius: 2px 2px 2px 2px; |
||||
|
opacity: 1; |
||||
|
border: 1px solid rgba(98, 224, 254, .6); |
||||
|
|
||||
|
&::after { |
||||
|
width: 4.5px; |
||||
|
height: 9px; |
||||
|
border-width: 1px; |
||||
|
left: 4px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.el-checkbox__label { |
||||
|
padding: 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 2.4 KiB |
After Width: | Height: | Size: 3.4 KiB |
After Width: | Height: | Size: 3.9 KiB |
Loading…
Reference in new issue