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