<template>
<div>
<el
-form
ref="formRef"
:model="formData"
:rules="formRules"
label
-width="100px"
label
-position="top"
>
<el
-form
-item label="标题" prop="title">
<el
-input v
-model="formData
.title" placeholder="请输入标题" />
</el
-form
-item>
<el
-form
-item label="相关博客地址" prop="httpurl">
<el
-input v
-model="formData
.httpurl" placeholder="相关博客地址" />
</el
-form
-item>
<el
-form
-item label="简述" prop="easytitle">
<el
-input v
-model="formData
.easytitle" placeholder="简述" />
</el
-form
-item>
<div>
<QuillEditor
ref="quillEditor"
v
-model
:content="formData
.message"
contentType="html"
:options="editorOptions"
@blur="onEditorBlur"
/>
</div>
</el
-form>
<div class="foot
-bt" @click="addSmallTec">提交</div>
</div>
</template>
<script setup>
import { reactive, ref, defineEmits } from "vue";
import { QuillEditor } from "@vueup/vue
-quill";
import "@vueup/vue
-quill/dist/vue
-quill
.snow
.css";
import { useUserStore } from "
../
../
../store/user
.js";
// 用于保存 Quill 编辑器组件
实例
const quillEditor = ref();
//表单引用
const formRef = ref(null);
//表单数据模型
const formData = reactive({
title
: "",
message
: "",
httpurl
: "",
easytitle
: "",
});
//这里添加相关规则
const formRules = reactive([]);
// 图片上传处理函数
const imageHandler = async () => {
//创建一个隐藏的<input元素>
const input = document
.createElement("input");
input
.setAttribute("type", "file");
//且只接收图片
input
.setAttribute("accept", "image/*");
input
.click();
input
.onchange = async () => {
//获取选择的第一个
文件
const file = input
.files[0];
//如果
文件不存在，即为null，undefined或者空值时，直接结束函数
if (!file) {
return;
}
try {
// ✅ 调用后端图片上传接口
const formData = new FormData();
formData
.append("file", file);
formData
.append("fileType", "1");
const response = await api
.fileUpload(formData);
if (response
.data
.code == 200) {
// ✅ 使用组件 ref 获取 Quill
实例
const quill = quillEditor
.value
.getQuill();
const range = quill
.getSelection(true);
// ✅ 插入图片
const wzpath = useUserStore
.nginxBasePath + response
.data
.data
.filePath;
console
.log("完整访问路径：" + wzpath);
quill
.insertEmbed(range
.index, "image", wzpath);
quill
.setSelection(range
.index + 1);
}
} catch (error) {
console
.error("图片上传失败
:", error);
}
};
};
// 编辑器配置选项
const editorOptions = ref({
modules
: {
toolbar
: {
container
: [
["bold", "italic", "underline", "strike"],
[{ list
: "ordered" }, { list
: "bullet" }],
["link", "image", "video"],
["clean"],
],
handlers
: {
// 自定义图片上传处理
image
: imageHandler,
},
},
},
placeholder
: "请输入内容
...",
theme
: "snow",
});
// 编辑器失焦事件
const onEditorBlur = (event) => {
console
.log("编辑器内容
:", event
.value);
};
//定义可触发的事件
const emit = defineEmits["smallTecAdd
-Event"];
//点击提交触发的函数
const addSmallTec = () => {
console
.log("提交数据>>>>>>>>>>>>>>>");
console
.log(formData);
emit("smallTecAdd
-Event", formData);
};
</script>
<style scoped lang="scss">
/* 弹窗相关css */
.el
-button {
margin
: 10px;
}
:deep(
.el
-dialog__header) {
border
-bottom
: 1px solid #eee;
padding
: 15px 20px;
}
:deep(
.el
-dialog__body) {
padding
: 20px;
}
:deep(
.el
-form
-item) {
margin
-bottom
: 18px;
}
.foot
-bt {
display
: flex;
background
-color
: #54b34b;
align
-items
: center;
justify
-content
: center;
min
-height
: 50px;
border
-radius
: 4px;
}
</style>
需要在这个vue组件中，当触发addSmallTec函数时，将formData数据传递给父组件，并且关闭当前组件，如何编写addSmallTec函数
博主uyang创建了一个FLEX程序，整合多个知名BT网站进行一站式搜索。最新版本改进了设计与功能，提供更佳用户体验。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
