vue.js - Vuetify 按钮组 + TipTap 编辑器

Question

我正在尝试使用 Vuetify 为这个文本编辑器制作一个工具栏： https ://github.com/scrumpy/tiptap

我的问题是 TipTap 有检查编辑器状态的方法。例如isActive.bold() ，TipTap 还使用命令来切换格式的状态commands.italic

而 Vuetify 中的按钮组想要有一个值数组。

<v-btn-toggle multiple v-model="format">
  <v-btn :value="1" @click="commands.bold">
    <v-icon>mdi-format-bold</v-icon>
  </v-btn>

  <v-btn :value="2" @click="commands.italic">
    <v-icon>mdi-format-italic</v-icon>
  </v-btn>

  <v-btn :value="3" @click="commands.strike">
    <v-icon>mdi-format-strikethrough</v-icon>
  </v-btn>

我对如何结合这两种方法感到不足。

我试图创建一个计算的 v-model 字段来将按钮组绑定到并以某种方式计算要使用状态方法绑定的数组。

Vuetify 按钮组似乎使用起来过于复杂。只要isPressed/Toggled/Checked在按钮上有一个道具就可以更容易地解决这个问题。

想法在这里？

标签： vue.jsvuetify.js