imzbf / md-editor-v3

Markdown editor for vue3, developed in jsx and typescript, dark theme、beautify content by prettier、render articles directly、paste or clip the picture and upload it...
https://imzbf.github.io/md-editor-v3
MIT License
1.63k stars 156 forks source link

使用 DropdownToolbar 组件时控制台报警告 #512

Closed hengrong1 closed 6 months ago

hengrong1 commented 6 months ago

Describe the issue

我想自定义一个Link,在使用DropdownToolbar组件时,控制台报警告

<template>
  <MdEditor
    v-model="state.text"
    :theme="state.theme"
    previewTheme="default"
    :showToolbarName="true"
    :toolbars="['bold','underline','italic',0]"
  >
    <template #defToolbars>
      <DropdownToolbar :onChange="onChange" :visible="visible" title="插入链接">
        <template #overlay>
          <div class="link-container">
            <div>link: <input type="text"></div>
            <button @onClick="addLink">OK</button>
          </div>
        </template>
        <template #trigger>
          <svg aria-hidden="true" class="md-editor-icon">
            <use xlink:href="#md-editor-icon-link"></use>
          </svg>
          <div class="md-editor-toolbar-item-name">链接</div>
        </template>
      </DropdownToolbar>
    </template>
  </MdEditor>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { MdEditor,DropdownToolbar } from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'

const state = reactive({
  text: 'Hello Editor!\n\n\n\n\n\n',
  theme: ''
})
const visible = ref(false)
const onChange = () => {
  visible.value = !visible.value
}
const addLink = () => {
  console.log('添加链接')
}
</script>

image

Procedure version

4.13.5

Reproduction link

No response

imzbf commented 6 months ago

这个问题已经修了,但是正式版还没准备好,你先用下测试版吧

npm i md-editor-v3@beta
daidaibg commented 6 months ago

我也遇到了,我看到你发不4.14版本了,已经没警告了。

imzbf commented 6 months ago

我也遇到了,我看到你发不4.14版本了,已经没警告了。

ok