perf: Editor component support v-model
This commit is contained in:
parent
3d402db8d1
commit
d77f8e334d
20
package.json
20
package.json
|
@ -27,9 +27,9 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@iconify/iconify": "^2.2.1",
|
"@iconify/iconify": "^2.2.1",
|
||||||
"@vueuse/core": "^8.2.5",
|
"@vueuse/core": "^8.2.6",
|
||||||
"@wangeditor/editor": "^5.0.0",
|
"@wangeditor/editor": "^5.0.0",
|
||||||
"@wangeditor/editor-for-vue": "^5.1.8-7",
|
"@wangeditor/editor-for-vue": "^5.1.10",
|
||||||
"@zxcvbn-ts/core": "^2.0.1",
|
"@zxcvbn-ts/core": "^2.0.1",
|
||||||
"animate.css": "^4.1.1",
|
"animate.css": "^4.1.1",
|
||||||
"axios": "^0.26.1",
|
"axios": "^0.26.1",
|
||||||
|
@ -45,7 +45,7 @@
|
||||||
"pinia-plugin-persist": "^1.0.0",
|
"pinia-plugin-persist": "^1.0.0",
|
||||||
"qrcode": "^1.5.0",
|
"qrcode": "^1.5.0",
|
||||||
"qs": "^6.10.3",
|
"qs": "^6.10.3",
|
||||||
"vue": "3.2.32",
|
"vue": "3.2.33",
|
||||||
"vue-i18n": "9.1.9",
|
"vue-i18n": "9.1.9",
|
||||||
"vue-router": "^4.0.14",
|
"vue-router": "^4.0.14",
|
||||||
"vue-types": "^4.1.1",
|
"vue-types": "^4.1.1",
|
||||||
|
@ -54,12 +54,12 @@
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@commitlint/cli": "^16.2.3",
|
"@commitlint/cli": "^16.2.3",
|
||||||
"@commitlint/config-conventional": "^16.2.1",
|
"@commitlint/config-conventional": "^16.2.1",
|
||||||
"@iconify/json": "^2.1.28",
|
"@iconify/json": "^2.1.29",
|
||||||
"@intlify/vite-plugin-vue-i18n": "^3.4.0",
|
"@intlify/vite-plugin-vue-i18n": "^3.4.0",
|
||||||
"@purge-icons/generated": "^0.8.1",
|
"@purge-icons/generated": "^0.8.1",
|
||||||
"@types/intro.js": "^3.0.2",
|
"@types/intro.js": "^3.0.2",
|
||||||
"@types/lodash-es": "^4.17.6",
|
"@types/lodash-es": "^4.17.6",
|
||||||
"@types/node": "^17.0.23",
|
"@types/node": "^17.0.24",
|
||||||
"@types/nprogress": "^0.2.0",
|
"@types/nprogress": "^0.2.0",
|
||||||
"@types/qrcode": "^1.4.2",
|
"@types/qrcode": "^1.4.2",
|
||||||
"@types/qs": "^6.9.7",
|
"@types/qs": "^6.9.7",
|
||||||
|
@ -75,14 +75,14 @@
|
||||||
"eslint-plugin-vue": "^8.6.0",
|
"eslint-plugin-vue": "^8.6.0",
|
||||||
"husky": "^7.0.4",
|
"husky": "^7.0.4",
|
||||||
"less": "^4.1.2",
|
"less": "^4.1.2",
|
||||||
"lint-staged": "^12.3.7",
|
"lint-staged": "^12.3.8",
|
||||||
"plop": "^3.0.5",
|
"plop": "^3.0.5",
|
||||||
"postcss": "^8.4.12",
|
"postcss": "^8.4.12",
|
||||||
"postcss-html": "^1.3.1",
|
"postcss-html": "^1.4.1",
|
||||||
"postcss-less": "^6.0.0",
|
"postcss-less": "^6.0.0",
|
||||||
"prettier": "^2.6.2",
|
"prettier": "^2.6.2",
|
||||||
"rimraf": "^3.0.2",
|
"rimraf": "^3.0.2",
|
||||||
"stylelint": "^14.6.1",
|
"stylelint": "^14.7.1",
|
||||||
"stylelint-config-html": "^1.0.0",
|
"stylelint-config-html": "^1.0.0",
|
||||||
"stylelint-config-prettier": "^9.0.3",
|
"stylelint-config-prettier": "^9.0.3",
|
||||||
"stylelint-config-recommended": "^7.0.0",
|
"stylelint-config-recommended": "^7.0.0",
|
||||||
|
@ -90,7 +90,7 @@
|
||||||
"stylelint-order": "^5.0.0",
|
"stylelint-order": "^5.0.0",
|
||||||
"typescript": "4.6.3",
|
"typescript": "4.6.3",
|
||||||
"unplugin-vue-define-options": "^0.6.0",
|
"unplugin-vue-define-options": "^0.6.0",
|
||||||
"vite": "2.9.4",
|
"vite": "2.9.5",
|
||||||
"vite-plugin-eslint": "^1.4.0",
|
"vite-plugin-eslint": "^1.4.0",
|
||||||
"vite-plugin-html": "^3.2.0",
|
"vite-plugin-html": "^3.2.0",
|
||||||
"vite-plugin-mock": "^2.9.6",
|
"vite-plugin-mock": "^2.9.6",
|
||||||
|
@ -98,7 +98,7 @@
|
||||||
"vite-plugin-style-import": "^1.4.1",
|
"vite-plugin-style-import": "^1.4.1",
|
||||||
"vite-plugin-svg-icons": "^2.0.1",
|
"vite-plugin-svg-icons": "^2.0.1",
|
||||||
"vite-plugin-windicss": "^1.8.4",
|
"vite-plugin-windicss": "^1.8.4",
|
||||||
"vue-tsc": "^0.34.6",
|
"vue-tsc": "^0.34.7",
|
||||||
"windicss": "^3.5.1",
|
"windicss": "^3.5.1",
|
||||||
"windicss-analysis": "^0.3.5"
|
"windicss-analysis": "^0.3.5"
|
||||||
},
|
},
|
||||||
|
|
3537
pnpm-lock.yaml
3537
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
@ -20,18 +20,39 @@ const props = defineProps({
|
||||||
type: Object as PropType<IEditorConfig>,
|
type: Object as PropType<IEditorConfig>,
|
||||||
default: () => undefined
|
default: () => undefined
|
||||||
},
|
},
|
||||||
defaultHtml: propTypes.string.def('')
|
modelValue: propTypes.string.def('')
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(['change', 'update:modelValue'])
|
||||||
|
|
||||||
// 编辑器实例,必须用 shallowRef
|
// 编辑器实例,必须用 shallowRef
|
||||||
const editorRef = shallowRef<IDomEditor>()
|
const editorRef = shallowRef<IDomEditor>()
|
||||||
|
|
||||||
|
const valueHtml = ref('')
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.modelValue,
|
||||||
|
(val: string) => {
|
||||||
|
if (val === unref(valueHtml)) return
|
||||||
|
valueHtml.value = val
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
// 监听
|
||||||
|
watch(
|
||||||
|
() => valueHtml.value,
|
||||||
|
(val: string) => {
|
||||||
|
emit('update:modelValue', val)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
const handleCreated = (editor: IDomEditor) => {
|
const handleCreated = (editor: IDomEditor) => {
|
||||||
editorRef.value = editor
|
editorRef.value = editor
|
||||||
}
|
}
|
||||||
|
|
||||||
const emit = defineEmits(['change'])
|
|
||||||
|
|
||||||
// 编辑器配置
|
// 编辑器配置
|
||||||
const editorConfig = computed((): IEditorConfig => {
|
const editorConfig = computed((): IEditorConfig => {
|
||||||
return Object.assign(
|
return Object.assign(
|
||||||
|
@ -92,22 +113,10 @@ const getEditorRef = async (): Promise<IDomEditor> => {
|
||||||
defineExpose({
|
defineExpose({
|
||||||
getEditorRef
|
getEditorRef
|
||||||
})
|
})
|
||||||
|
|
||||||
const show = ref(true)
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.defaultHtml,
|
|
||||||
() => {
|
|
||||||
show.value = false
|
|
||||||
setTimeout(() => {
|
|
||||||
show.value = true
|
|
||||||
}, 0)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div v-if="show" class="border-1 border-solid border-[var(--tags-view-border-color)]">
|
<div class="border-1 border-solid border-[var(--tags-view-border-color)]">
|
||||||
<!-- 工具栏 -->
|
<!-- 工具栏 -->
|
||||||
<Toolbar
|
<Toolbar
|
||||||
:editor="editorRef"
|
:editor="editorRef"
|
||||||
|
@ -116,12 +125,12 @@ watch(
|
||||||
/>
|
/>
|
||||||
<!-- 编辑器 -->
|
<!-- 编辑器 -->
|
||||||
<Editor
|
<Editor
|
||||||
|
v-model="valueHtml"
|
||||||
:editorId="editorId"
|
:editorId="editorId"
|
||||||
:defaultConfig="editorConfig"
|
:defaultConfig="editorConfig"
|
||||||
:defaultHtml="defaultHtml"
|
|
||||||
:style="editorStyle"
|
:style="editorStyle"
|
||||||
@on-change="handleChange"
|
@on-change="handleChange"
|
||||||
@onCreated="handleCreated"
|
@on-created="handleCreated"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -27,6 +27,6 @@ setTimeout(() => {
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<ContentWrap :title="t('richText.richText')" :message="t('richText.richTextDes')">
|
<ContentWrap :title="t('richText.richText')" :message="t('richText.richTextDes')">
|
||||||
<Editor ref="editorRef" @change="change" :defaultHtml="defaultHtml" />
|
<Editor v-model="defaultHtml" ref="editorRef" @change="change" />
|
||||||
</ContentWrap>
|
</ContentWrap>
|
||||||
</template>
|
</template>
|
||||||
|
|
Loading…
Reference in New Issue