modify style

This commit is contained in:
MaysWind
2023-08-05 23:05:39 +08:00
parent 698d94feed
commit 2390c085e4
11 changed files with 1030 additions and 885 deletions
@@ -0,0 +1,51 @@
<template>
<div class="btn-vertical-group d-flex flex-column">
<v-btn border :key="idx"
:color="value === button.value ? 'primary' : 'default'"
:variant="value === button.value ? 'tonal' : 'outlined'" :disabled="disabled"
v-for="(button, idx) in buttons"
@click="value = button.value">
{{ button.name }}
</v-btn>
</div>
</template>
<script>
export default {
props: [
'disabled',
'buttons',
'modelValue'
],
emits: [
'update:modelValue'
],
computed: {
value: {
get: function () {
return this.modelValue;
},
set: function (value) {
if (value === this.modelValue) {
return;
}
this.$emit('update:modelValue', value);
}
}
}
}
</script>
<style>
.btn-vertical-group .v-btn:not(:first-child) {
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
.btn-vertical-group .v-btn:not(:last-child) {
border-bottom: 0;
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
}
</style>