0
251
Views¿Cómo cambiar la clase del botón de destino?
soy bastante nuevo en vue y no sé cómo hacerlo, tengo varios botones y necesito seleccionar solo uno cuando hago clic, lo hice a través de
:class="isActive ? 'on' : 'off'" v-on:click ="isActive = !isActive"pero esto activa todos los botones, entonces entiendo que necesito distinguir de alguna manera el botón de destino del que no es de destino, pero no puedo encontrar la manera de hacerlo. No puedo encontrar ejemplos de implementación adecuados, ¿puede proporcionar ejemplos de código?
data() { return { isActive: true, color: '', }; }, <template> <div id="btn-box"> <button type="button" class="btn off" @click="component='BorderLeftComonent', toggleShowPopup()"> <div style="padding: 0 5px; width: 25px; margin: 0 auto; font-size: 25px;" :style="{ 'border-left': `4px solid ${color}` }">A</div> </button> <button type="button" class="btn off" @click="component='TextBalloonComponent'"> <div class="bubble" style="margin: 0 auto; width: 25px; font-size: 25px;">A</div> </button> <button type="button" class="btn off" @click="component='DashedComponent'"> <div style="border: 4px dashed #f5d018; margin: 0 auto; width: 45px; font-size: 25px;">A</div> </button> </div> </template>2 answers
Answer question0
Use la directiva v-for para iterar sobre una matriz de objetos de botón donde cada objeto incluye su propia propiedad isActive que se puede alternar mediante el evento onclick.
<button v-for="(button, index) in buttons" :key="index" :class="button.isActive ? 'on' : 'off'" @click="button.isActive = !button.isActive" > <div :class="`btn btn-${button.type}`">{{ button.label }}</div> </button> data() { return { buttons: [ { label: "A", isActive: false, type: "border-left", }, { label: "A", isActive: false, type: "text-balloon", }, { label: "A", isActive: false, type: "dashed", }, ], }; } <style scoped> .btn { padding: 0 5px; width: 25px; margin: 0 auto; font-size: 25px; } .btn-border-left { border-left: 4px solid #f55; } .btn-dashed { border: 4px dashed #f5d018; width: 45px; } </style>0
Parece que necesita un grupo de botones, un componente clásico en las bibliotecas de interfaz de usuario. Échale un vistazo a este por ejemplo.
Por ejemplo, a continuación, tiene 4 botones uno al lado del otro, y cada botón se resalta cuando hace clic en él, vea el gif a continuación.
Y en su código, tiene acceso a una propiedad (aquí "texto") que refleja qué botón está seleccionado. Código tomado del enlace de arriba:
<v-btn-toggle v-model="text" tile color="deep-purple accent-3" group > <v-btn value="left"> Left </v-btn> <v-btn value="center"> Center </v-btn> <v-btn value="right"> Right </v-btn> <v-btn value="justify"> Justify </v-btn> </v-btn-toggle>Eso responde tu pregunta?