Vuetify Button Group + TipTap编辑器

时间:2019-11-03 08:22:36

标签: vue.js vuetify.js

我正在尝试使用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道具,就可以轻松解决这个问题。

这里有想法吗?

0 个答案:

没有答案