|
|
@ -1,15 +1,26 @@ |
|
|
|
<template> |
|
|
|
<ElCheckboxGroup v-bind="$attrs" v-on="$listeners" class='ElCheckboxGroup' :style="{ gap }"> |
|
|
|
<ElCheckbox v-for="item in options" :disabled="item.disabled" :label="item[id] || item[label]" |
|
|
|
:key="item[id] || item[label]"> |
|
|
|
<slot :name="item[id] || item[label]" :data="item">{{ item[label] }}</slot> |
|
|
|
<ElCheckboxGroup |
|
|
|
v-bind="$attrs" |
|
|
|
v-on="$listeners" |
|
|
|
class="ElCheckboxGroup" |
|
|
|
:style="{ gap }" |
|
|
|
> |
|
|
|
<ElCheckbox |
|
|
|
v-for="item in options" |
|
|
|
:disabled="item.disabled" |
|
|
|
:label="item[id] || item[label]" |
|
|
|
:key="item[id] || item[label]" |
|
|
|
> |
|
|
|
<slot :name="item[id] || item[label]" :data="item">{{ |
|
|
|
item[label] |
|
|
|
}}</slot> |
|
|
|
</ElCheckbox> |
|
|
|
</ElCheckboxGroup> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
export default { |
|
|
|
name: 'ElCheckboxGroup_', |
|
|
|
name: "ElCheckboxGroup_", |
|
|
|
props: { |
|
|
|
/** |
|
|
|
* { |
|
|
@ -19,24 +30,24 @@ export default { |
|
|
|
*/ |
|
|
|
options: { |
|
|
|
type: Array, |
|
|
|
default: () => [] |
|
|
|
default: () => [], |
|
|
|
}, |
|
|
|
id: { |
|
|
|
type: String, |
|
|
|
default: 'key' |
|
|
|
default: "key", |
|
|
|
}, |
|
|
|
label: { |
|
|
|
type: String, |
|
|
|
default: 'label' |
|
|
|
default: "label", |
|
|
|
}, |
|
|
|
gap: { |
|
|
|
default: "24px" |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
default: "24px", |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang='scss' scoped> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.ElCheckboxGroup { |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
@ -47,6 +58,7 @@ export default { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
gap: 6px; |
|
|
|
width: 100px; |
|
|
|
|
|
|
|
.el-checkbox__input { |
|
|
|
line-height: 0; |
|
|
@ -54,10 +66,10 @@ export default { |
|
|
|
.el-checkbox__inner { |
|
|
|
width: 16px; |
|
|
|
height: 16px; |
|
|
|
background: #0A3E54; |
|
|
|
background: #0a3e54; |
|
|
|
border-radius: 2px 2px 2px 2px; |
|
|
|
opacity: 1; |
|
|
|
border: 1px solid rgba(98, 224, 254, .6); |
|
|
|
border: 1px solid rgba(98, 224, 254, 0.6); |
|
|
|
|
|
|
|
&::after { |
|
|
|
width: 4.5px; |
|
|
|