我正在试着用vuetify让我的应用变得更有风格。
但是当我使用移动格式时,我的组件对于我的模式来说太宽了。
<template>
<v-container>
<v-form @submit="addTime">
<date-picker-component title="Date du jour"/>
<p>Lieu de départ</p>
<v-btn-toggle
:value="getCurrentJournee.lieu_depart"
mandatory
@change="setLieuDepart"
>
<v-btn
:value="lieu.domicile">
Domicile
</v-btn>
<v-btn :value="lieu.entreprise">
Entreprise
</v-btn>
</v-btn-toggle>
<time-picker-component title="Heure de départ" heure="heuredepart"/>
<time-picker-component title="Heure sur premier chantier" heure="premierchantier"/>
<p>Temps de pause</p>
<v-btn-toggle
v-model="getCurrentJournee.temps_pause"
shaped
mandatory
@change="setTempsPause"
>
<v-btn value="30">
30'
</v-btn>
<v-btn value="45">
45'
</v-btn>
<v-btn value="60">
1h
</v-btn>
<v-btn value="75">
1h15'
</v-btn>
<v-btn value="90">
1h30'
</v-btn>
</v-btn-toggle>
<time-picker-component title="Départ du dernier chantier" heure="dernierchantier"/>
<time-picker-component title="Heure d'arrivée" heure="heurearrivee"/>
<p>Lieu de retour</p>
<v-btn-toggle
:value="getCurrentJournee.lieu_arrivee"
mandatory
@change="setLieuRetour"
>
<v-btn :value="lieu.domicile">
Domicile
</v-btn>
<v-btn :value="lieu.entreprise">
Entreprise
</v-btn>
</v-btn-toggle><br><br>
<v-btn type="submit" color="green" dark @click="$emit('close')"> Enregistrer </v-btn>
<v-btn color="black" dark @click="$emit('close')"> Fermer </v-btn>
</v-form>
</v-container>
</template>
下面是时间表单,在它所处的模式下
<v-dialog
v-model="modalVisible"
persistent
max-width="500px"
class="ma-0 pa-0"
>
<v-card>
<v-card-title>
Enregistrement heures
</v-card-title>
<v-divider></v-divider>
<v-card-text>
<v-container>
<!-- <v-flex xs6 lg10> -->
<time-form @close="modalVisible = false"></time-form>
<!-- </v-flex> -->
</v-container>
<!-- <small>* précise les champs obligatoires</small> -->
</v-card-text>
</v-card>
</v-dialog>
有什么线索能让我缩小范围来适应吗?最大宽度之类的东西。请救救我,我必须在周五之前提交这个,哈哈。
编辑:为了更好的理解,我添加了代码,我正在尝试让v-btn切换到第一段代码中,当我要移动的时候,我尽量不使用v-select,尽管我越来越多地考虑它。
发布于 2021-05-03 16:12:49
如果你想换行按钮,你可以在v-btn-class=中添加“flex- wrap”
https://stackoverflow.com/questions/64333278
复制相似问题