表单验证

wangeditor5-for-vue3 的组件支持在其它 UI 框架的表单中使用，同时支持 blur 和 change 两种 trigger 模式。

在提交表单前，或手动触发表单验证前，请使用 syncContent 来强制同步 v-model 数据，避免数据丢失。更多详情请查看 syncContent。

目前已支持的 UI 框架

• element-plus 查看
• ant-design-vue@^3 查看
• naive-ui 查看

如果你希望能支持某个 UI 库的表单验证，可以前往 issues 提交需求

表单验证定义规则

定义表单验证初始化函数

function weFormFields() {
  return {
    blurField() {
      // trigger: blur 的具体逻辑
    },
    changeField() {
      // trigger: change 的具体逻辑
    },
  }
}

import { WeEditorFormFields } from 'wangeditor5-for-vue3'

function weFormFields() {
  const formFields: WeEditorFormFields = {
    blurField() {
      // trigger: blur 的具体逻辑
    },
    changeField() {
      // trigger: change 的具体逻辑
    },
  }

  return formFields
}

interface WeEditorFormFields {
  blurField?: () => void
  changeField?: () => void
}

注入表单验证初始化函数

全局挂载

import { createApp } from 'vue'

const app = createApp(App)

app.config.globalProperties.$weFormFields = weFormFields

app.mount('#app')

provide

import { createApp } from 'vue'
import { weFormFieldInjectionKey } from 'wangeditor5-for-vue3'

const app = createApp(App)

app.provide(weFormFieldInjectionKey, weFormFields)

app.mount('#app')

或

import { defineComponent, provide } from 'vue'
import { weFormFieldInjectionKey } from 'wangeditor5-for-vue3'

export default defineComponent({
  setup() {
    provide(weFormFieldInjectionKey, weFormFields)

    return {}
  },
})