Recientemente comencé a aprender Vue y estoy tratando de implementar un editor de texto. Es necesario que al mismo tiempo se elimine la clase activa al hacer doble clic en el botón y que al presionar este botón no se elimine la clase activa de la elevada, para que pueda ver en qué editores están activos actualmente la función de texto + a todo esto, además de cambiar el estilo del botón en sí, debe cambiar el color del icono v al hacer clic
<script lang="js"> import Vue from 'vue' export default Vue.extend({ methods: { formatDoc(cmd, value = null) { if (value) { document.execCommand(cmd, false, value); } else { document.execCommand(cmd); } }) </script> <template> <div class="container" id="app"> <div class="toolbar"> <div class="btn-toolbar"> <div class="text-style"> <button type="button" @click="formatDoc('bold')"> <v-icon>mdi-format-bold</v-icon> </button> <button type="button" @click="formatDoc('underline')"> <v-icon>mdi-format-underline</v-icon> </button> <button type="button" @click="formatDoc('italic')"> <v-icon>mdi-format-italic</v-icon> </button> </div> <div class="text-align"></div> <button type="button" @click="formatDoc('justifyLeft')"> <v-icon>mdi-format-align-left</v-icon> </button> <button type="button" @click="formatDoc('justifyCenter')"> <v-icon>mdi-format-align-center</v-icon> </button> <button type="button" @click="formatDoc('justifyRight')"> <v-icon>mdi-format-align-right</v-icon> </button> </div> <div class="text_list"> <button type="button" @click="formatDoc('insertOrderedList')> <v-icon>mdi-format-list-numbered</v-icon> </button> <button type="button" @click="formatDoc('insertUnorderedList') <v-icon>mdi-format-list-bulleted</v-icon> </button> </div> </div> </div> </div> </template>Estaré agradecido por cualquier ayuda!
No puedo comentar tu publicación para pedir una aclaración. Por lo tanto, supondré que, por ahora, solo está preguntando sobre cómo cambiar la clase de un botón en función del estado de ese botón (por ejemplo, se hizo clic una vez o se hizo clic nuevamente).
Si esa es su pregunta, entonces tendría la clase de ese botón vinculada a una propiedad calculada. Por ejemplo:
<button type="button" @click="formatDoc('bold')" :class="boldisClicked"> <v-icon>mdi-format-bold</v-icon> </button>Luego, en su sección calculada:
methods: { formatDoc(..) { .... .... // your regular code this.boldButtonState = 'clicked' } }, computed: { boldisClicked() { return boldButtonState == 'clicked' } }Y así ...
Dicho esto, en lugar de reinventar la rueda. Hay bibliotecas de editores de texto reales que puede usar. Ver aquí
Finalmente, le sugiero que se concentre en la lógica de su aplicación y deje la funcionalidad cosmética (CSS y demás) a un marco como Vuetify .