80323dd641
'admin-22.12.12:发布v2.4.21版本，具体更新内容查看CHANGELOG.md' !42 修复 工作流无法添加新节点问题 Merge pull request !42 from beta/bugfix_workflow 修复 工作流无法添加新节点问题 1. 修复 工作流无法添加新节点问题 2. 修复 左侧导航无法隐藏问题 'admin-22.12.09:发布v2.4.2版本，具体更新内容查看CHANGELOG.md' !41 修复get请求传递嵌套对象或数组时无法正常编码问题 Merge pull request !41 from 随心/master !40 开启TagsView缓存后，刷新后所有的路由都变成组件缓存了 Merge pull request !40 from mrjimin/master 修复get请求传递嵌套对象或数组时无法正常编码问题 update src/layout/routerView/parent.vue. Signed-off-by: mrjimin <z8888788@163.com> update src/layout/routerView/parent.vue. 这里应该拿到的是已经设置开启组件缓存的路由，而不是全部，需要先判断item.meta.isKeepAlive Signed-off-by: mrjimin <z8888788@163.com> 'admin-22.11.30:发布v2.4.1版本，具体更新内容查看CHANGELOG.md' Merge branch 'master' of https://gitee.com/lyt-top/vue-next-admin 'admin-22.11.30:删除v2.4.0版本不需要的依赖' update src/views/error/404.vue. Signed-off-by: lyt-Top <1105290566@qq.com> update src/components/table/index.vue. Signed-off-by: lyt-Top <1105290566@qq.com> 'admin-22.11.30:修改v2.4.0文字说明' 'admin-22.11.30:修改v2.4.0文字说明' 'admin-22.11.29:发布v2.4.0版本，具体更新内容查看CHANGELOG.md' 'admin-22.11.19:修复v2.3.0版本动态路由事件调用关闭当前tagsview、普通路由刷新界面参数丢失问题' 'admin-22.11.18:优化v2.3.0版本tagsview风格5兼容火狐' 'admin-22.11.17:优化v2.3.0版本iframe右键菜单刷新问题' ...
102 lines
2.3 KiB
Vue
102 lines
2.3 KiB
Vue
<template>
|
|
<div class="editor-container">
|
|
<Toolbar :editor="editorRef" :mode="mode" />
|
|
<Editor
|
|
:mode="mode"
|
|
:defaultConfig="state.editorConfig"
|
|
:style="{ height }"
|
|
v-model="state.editorVal"
|
|
@onCreated="handleCreated"
|
|
@onChange="handleChange"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts" name="wngEditor">
|
|
// https://www.wangeditor.com/v5/for-frame.html#vue3
|
|
import '@wangeditor/editor/dist/css/style.css';
|
|
import { reactive, shallowRef, watch, onBeforeUnmount } from 'vue';
|
|
import { IDomEditor } from '@wangeditor/editor';
|
|
import { Toolbar, Editor } from '@wangeditor/editor-for-vue';
|
|
|
|
// 定义父组件传过来的值
|
|
const props = defineProps({
|
|
// 是否禁用
|
|
disable: {
|
|
type: Boolean,
|
|
default: () => false,
|
|
},
|
|
// 内容框默认 placeholder
|
|
placeholder: {
|
|
type: String,
|
|
default: () => '请输入内容...',
|
|
},
|
|
// https://www.wangeditor.com/v5/getting-started.html#mode-%E6%A8%A1%E5%BC%8F
|
|
// 模式，可选 <default|simple>，默认 default
|
|
mode: {
|
|
type: String,
|
|
default: () => 'default',
|
|
},
|
|
// 高度
|
|
height: {
|
|
type: String,
|
|
default: () => '310px',
|
|
},
|
|
// 双向绑定，用于获取 editor.getHtml()
|
|
getHtml: String,
|
|
// 双向绑定，用于获取 editor.getText()
|
|
getText: String,
|
|
});
|
|
|
|
// 定义子组件向父组件传值/事件
|
|
const emit = defineEmits(['update:getHtml', 'update:getText']);
|
|
|
|
// 定义变量内容
|
|
const editorRef = shallowRef();
|
|
const state = reactive({
|
|
editorConfig: {
|
|
placeholder: props.placeholder,
|
|
},
|
|
editorVal: props.getHtml,
|
|
});
|
|
|
|
// 编辑器回调函数
|
|
const handleCreated = (editor: IDomEditor) => {
|
|
editorRef.value = editor;
|
|
};
|
|
// 编辑器内容改变时
|
|
const handleChange = (editor: IDomEditor) => {
|
|
emit('update:getHtml', editor.getHtml());
|
|
emit('update:getText', editor.getText());
|
|
};
|
|
// 页面销毁时
|
|
onBeforeUnmount(() => {
|
|
const editor = editorRef.value;
|
|
if (editor == null) return;
|
|
editor.destroy();
|
|
});
|
|
// 监听是否禁用改变
|
|
// https://gitee.com/lyt-top/vue-next-admin/issues/I4LM7I
|
|
watch(
|
|
() => props.disable,
|
|
(bool) => {
|
|
const editor = editorRef.value;
|
|
if (editor == null) return;
|
|
bool ? editor.disable() : editor.enable();
|
|
},
|
|
{
|
|
deep: true,
|
|
}
|
|
);
|
|
// 监听双向绑定值改变，用于回显
|
|
watch(
|
|
() => props.getHtml,
|
|
(val) => {
|
|
state.editorVal = val;
|
|
},
|
|
{
|
|
deep: true,
|
|
}
|
|
);
|
|
</script>
|