Add disabled, min and max options for collections
This commit is contained in:
parent
0aabc72652
commit
c8381eb808
|
@ -23,17 +23,21 @@
|
|||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
fill: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: #ccc;
|
||||
}
|
||||
|
||||
&:not(.bd-disabled):hover {
|
||||
svg {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&.bd-disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -12,9 +12,9 @@
|
|||
<div class="bd-formCollection">
|
||||
<div v-for="s in setting.items" class="bd-collectionItem">
|
||||
<Setting :setting="s" :hide-divider="true" :key="s.id" />
|
||||
<div class="bd-removeCollectionItem" @click="removeItem(s)"><MiMinus/></div>
|
||||
<div class="bd-removeCollectionItem" :class="{'bd-disabled': setting.disabled || setting.min && setting.items.length <= setting.min}" @click="removeItem(s)"><MiMinus/></div>
|
||||
</div>
|
||||
<div class="bd-newCollectionItem" @click="addItem"><MiPlus/></div>
|
||||
<div v-if="!setting.disabled && !setting.max || setting.items.length < setting.max" class="bd-newCollectionItem" @click="addItem"><MiPlus/></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -29,9 +29,11 @@
|
|||
},
|
||||
methods: {
|
||||
removeItem(item) {
|
||||
if (this.setting.disabled || this.setting.min && this.setting.items.length <= this.setting.min) return;
|
||||
this.setting.removeItem(item);
|
||||
},
|
||||
addItem() {
|
||||
if (this.setting.disabled || this.setting.max && this.setting.items.length >= this.setting.max) return;
|
||||
this.setting.addItem();
|
||||
}
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue