用vue写一个展示字体、字体大小、字体颜色、字体倾斜、字体加粗和下划线功能的组件

好的，可以参考以下代码：

<template>
  <div>
    <div class="toolbar">
      <div class="option">
        <label>字体</label>
        <select v-model="fontFamily" @change="onFontFamilyChange">
          <option v-for="font in fontList" :value="font">{{ font }}</option>
        </select>
      </div>
      <div class="option">
        <label>字号</label>
        <select v-model="fontSize" @change="onFontSizeChange">
          <option v-for="size in fontSizeList" :value="size">{{ size }}px</option>
        </select>
      </div>
      <div class="option">
        <label>颜色</label>
        <input type="color" v-model="fontColor" @change="onFontColorChange">
      </div>
      <div class="option">
        <label>倾斜</label>
        <input type="checkbox" v-model="fontItalic" @change="onFontItalicChange">
      </div>
      <div class="option">
        <label>加粗</label>
        <input type="checkbox" v-model="fontBold" @change="onFontBoldChange">
      </div>
      <div class="option">
        <label>下划线</label>
        <input type="checkbox" v-model="fontUnderline" @change="onFontUnderlineChange">
      </div>
    </div>
    <div class="editor" :style="{ fontFamily, fontSize: fontSize + 'px', color: fontColor, fontStyle: fontItalic ? 'italic' : 'normal', fontWeight: fontBold ? 'bold' : 'normal', textDecoration: fontUnderline ? 'underline' : 'none' }" contenteditable></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fontList: ['Arial', 'Helvetica', 'sans-serif', 'Times New Roman', 'Times', 'serif', 'Courier New', 'Courier', 'monospace'],
      fontSizeList: [12, 14, 16, 18, 20, 24, 28, 32, 36, 48, 72],
      fontFamily: 'Arial',
      fontSize: 14,
      fontColor: '#000000',
      fontItalic: false,
      fontBold: false,
      fontUnderline: false
    }
  },
  methods: {
    onFontFamilyChange() {
      const editor = document.querySelector('.editor')
      editor.focus()
      document.execCommand('fontName', false, this.fontFamily)
    },
    onFontSizeChange() {
      const editor = document.querySelector('.editor')
      editor.focus()
      document.execCommand('fontSize', false, this.fontSize)
    },
    onFontColorChange() {
      const editor = document.querySelector('.editor')
      editor.focus()
      document.execCommand('foreColor', false, this.fontColor)
    },
    onFontItalicChange() {
      const editor = document.querySelector('.editor')
      editor.focus()
      document.execCommand('italic', false, null)
    },
    onFontBoldChange() {
      const editor = document.querySelector('.editor')
      editor.focus()
      document.execCommand('bold', false, null)
    },
    onFontUnderlineChange() {
      const editor = document.querySelector('.editor')
      editor.focus()
      document.execCommand('underline', false, null)
    }
  }
}
</script>

<style scoped>
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.option {
  display: flex;
  align-items: center;
}

.editor {
  border: 1px solid #ccc;
  padding: 10px;
  min-height: 200px;
}
</style>

其中，toolbar 包含了展示字体、字体大小、字体颜色、字体倾斜、字体加粗和下划线的选项，而 editor 则是用来展示效果的区域。

具体实现中，我们使用了 contenteditable 属性来设置 div 可编辑，然后通过 document.execCommand() 方法来实现各种样式的修改。同时，我们使用了 v-model 来绑定数据，以及 @change 事件来监听数据变化。

希望这个例子对你有所帮助！