我封装了一个下拉菜单按钮

[akbar0903]

你好作者❤️，因为我对tsx的语法不太熟悉，而且从来没有做过pull request，所以我没能进行pull request。

但是我封装了一个下拉菜单组件，拱有这个需求的朋友参考😊。

ThemeDropdown.vue

<script setup>
import { DropdownToolbar } from 'md-editor-v3'
import { ref, defineProps, defineEmits } from 'vue'

const props = defineProps({
  title: String,
  themes: Array,
  modelValue: String,
})

const emit = defineEmits(['update:modelValue'])
const selectTheme = (theme) => {
  emit('update:modelValue', theme)
}

const dropdownVisible = ref(false)
const toggleVisible = () => {
  dropdownVisible.value = !dropdownVisible.value
}
</script>

<template>
  <DropdownToolbar :title="props.title" :visible="dropdownVisible" :onChange="toggleVisible">
    <template #default>
      <slot name="icon"> </slot>
    </template>
    <template #overlay>
      <ul class="dropdown-menu">
        <li
          v-for="theme in props.themes"
          :key="theme"
          @click="selectTheme(theme)"
          class="dropdown-menu-item"
          :class="{ selected: theme === props.modelValue }"
        >
          {{ theme }}
        </li>
      </ul>
    </template>
  </DropdownToolbar>
</template>

<style scoped>
.dropdown-menu {
  max-height: 300px;
  border: 1px solid #e6e6e6;
  border-radius: 3px;
  list-style: none;
  overflow-y: auto;
}

.dropdown-menu-item {
  padding: 4px 10px;
  font-size: 14px;
  cursor: pointer;
}
.dropdown-menu-item:first-child {
  padding-top: 8px;
}
.dropdown-menu-item:last-child {
  padding-bottom: 8px;
}
.dropdown-menu-item.selected {
  font-weight: 700;
  color: #2563eb;
}
.dropdown-menu-item:hover {
  background-color: #f5f7fa;
}
</style>

Editor.vue

<script setup>
import { MdEditor } from 'md-editor-v3'
import ThemeDropdown from '@/components/admin/ThemeDropdown.vue'
import { ref } from 'vue'

// 双向绑定
const content = defineModel()

const toolbars = [
  'bold',
  'underline',
  'italic',
  '-',
  'title',
  'strikeThrough',
  'sub',
  'sup',
  'quote',
  'unorderedList',
  'orderedList',
  'task',
  '-',
  'codeRow',
  'code',
  'link',
  'image',
  'table',
  'mermaid',
  'katex',
  '-',
  'revoke',
  'next',
  'save',
  '=',
  0,
  1,
  'pageFullscreen',
  'previewOnly',
  'preview',
  'catalog',
]

// 预览主题
const previewTheme = ref(['default', 'github', 'vuepress', 'mk-cute', 'smart-blue', 'cyanosis'])
const previewSelectedTheme = ref('default')

// 代码块主题
const codeTheme = ref([
  'atom',
  'a11y',
  'github',
  'gradient',
  'kimbie',
  'paraiso',
  'qtcreator',
  'stackoverflow',
])
const selectedCodeTheme = ref('github')
</script>

<template>
  <MdEditor
    v-model="content"
    :toolbars="toolbars"
    :previewTheme="previewSelectedTheme"
    :codeTheme="selectedCodeTheme"
    class="py-1 px-2"
  >
    <template #defToolbars>
      <ThemeDropdown
        title="预览主题"
        :themes="previewTheme"
        v-model="previewSelectedTheme"
      >
        <template #icon>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 2H2.66667C2.29848 2 2 2.29848 2 2.66667V6C2 6.36819 2.29848 6.66667 2.66667 6.66667H6C6.36819 6.66667 6.66667 6.36819 6.66667 6V2.66667C6.66667 2.29848 6.36819 2 6 2Z" stroke="#1D2129" stroke-width="1.33" stroke-linejoin="round"></path>
            <path d="M6 9.3335H2.66667C2.29848 9.3335 2 9.63197 2 10.0002V13.3335C2 13.7017 2.29848 14.0002 2.66667 14.0002H6C6.36819 14.0002 6.66667 13.7017 6.66667 13.3335V10.0002C6.66667 9.63197 6.36819 9.3335 6 9.3335Z" stroke="#1D2129" stroke-width="1.33" stroke-linejoin="round"></path>
            <path d="M13.3334 2H10C9.63185 2 9.33337 2.29848 9.33337 2.66667V6C9.33337 6.36819 9.63185 6.66667 10 6.66667H13.3334C13.7016 6.66667 14 6.36819 14 6V2.66667C14 2.29848 13.7016 2 13.3334 2Z" stroke="#1D2129" stroke-width="1.33" stroke-linejoin="round"></path>
            <path d="M13.3334 9.3335H10C9.63185 9.3335 9.33337 9.63197 9.33337 10.0002V13.3335C9.33337 13.7017 9.63185 14.0002 10 14.0002H13.3334C13.7016 14.0002 14 13.7017 14 13.3335V10.0002C14 9.63197 13.7016 9.3335 13.3334 9.3335Z" stroke="#1D2129" stroke-width="1.33" stroke-linejoin="round"></path>
          </svg>
        </template>
      </ThemeDropdown>
      <ThemeDropdown title="代码主题" :themes="codeTheme" v-model="selectedCodeTheme">
        <template #icon>
          <svg width="16" height="16" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="48" height="48" fill="white" fill-opacity="0.01"></rect><path d="M6 44L6 25H12V17H36V25H42V44H6Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"></path><path d="M17 17V8L31 4V17" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path></svg>
        </template>
      </ThemeDropdown>
    </template>
  </MdEditor>
</template>

效果图

预览主题：

代码主题：

[imzbf]

OK，多谢，我会找时间把它集成到公共的扩展库中，结果我会在这里同步到

[imzbf]

这两个组件在扩展库的3.0.0中提供了，详情参考：https://github.com/imzbf/md-editor-extension/tree/develop/packages/v3/components