From 0c357e90050d9d461c6ab0d85e1b9c2bac2f6f55 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期一, 19 一月 2026 17:50:36 +0800
Subject: [PATCH] Merge branch 'dev_new' of http://114.132.189.42:9002/r/product-inventory-APP-before into dev_new
---
src/components/Editor/index.vue | 261 ++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 261 insertions(+), 0 deletions(-)
diff --git a/src/components/Editor/index.vue b/src/components/Editor/index.vue
new file mode 100644
index 0000000..8b95790
--- /dev/null
+++ b/src/components/Editor/index.vue
@@ -0,0 +1,261 @@
+<template>
+ <view class="editor-container">
+ <div class="editor">
+ <QuillEditor v-model:content="content"
+ contentType="html"
+ @textChange="(e) => emit('update:modelValue', content)"
+ :options="options"
+ :style="styles" />
+ </div>
+ </view>
+</template>
+
+<script setup>
+ import { ref, computed, watch } from "vue";
+ import { QuillEditor } from "@vueup/vue-quill";
+ import "@vueup/vue-quill/dist/vue-quill.snow.css";
+ import { getToken } from "@/utils/auth";
+
+ const props = defineProps({
+ /* 缂栬緫鍣ㄧ殑鍐呭 */
+ modelValue: {
+ type: String,
+ },
+ /* 楂樺害 */
+ height: {
+ type: Number,
+ default: null,
+ },
+ /* 鏈�灏忛珮搴� */
+ minHeight: {
+ type: Number,
+ default: null,
+ },
+ /* 鍙 */
+ readOnly: {
+ type: Boolean,
+ default: false,
+ },
+ /* 涓婁紶鏂囦欢澶у皬闄愬埗(MB) */
+ fileSize: {
+ type: Number,
+ default: 5,
+ },
+ /* 绫诲瀷锛坆ase64鏍煎紡銆乽rl鏍煎紡锛� */
+ type: {
+ type: String,
+ default: "url",
+ },
+ });
+
+ const emit = defineEmits(["update:modelValue"]);
+
+ const styles = computed(() => {
+ let style = {};
+ if (props.minHeight) {
+ style.minHeight = `${props.minHeight}px`;
+ }
+ if (props.height) {
+ style.height = `${props.height}px`;
+ }
+ return style;
+ });
+
+ const content = ref("");
+
+ watch(
+ () => props.modelValue,
+ v => {
+ if (v !== content.value) {
+ content.value = v == undefined ? "<p></p>" : v;
+ }
+ },
+ { immediate: true }
+ );
+
+ const options = {
+ theme: "snow",
+ bounds: document.body,
+ debug: "warn",
+ modules: {
+ // 宸ュ叿鏍忛厤缃�
+ toolbar: [
+ [{ align: [] }], // 瀵归綈鏂瑰紡
+ ["bold", "italic", "underline", "strike"], // 鍔犵矖 鏂滀綋 涓嬪垝绾� 鍒犻櫎绾�
+ ["blockquote", "code-block"], // 寮曠敤 浠ｇ爜鍧�
+ [{ list: "ordered" }, { list: "bullet" }], // 鏈夊簭銆佹棤搴忓垪琛�
+ [{ indent: "-1" }, { indent: "+1" }], // 缂╄繘
+ [{ size: ["small", false, "large", "huge"] }], // 瀛椾綋澶у皬
+ [{ header: [1, 2, 3, 4, 5, 6, false] }], // 鏍囬
+ [{ color: [] }, { background: [] }], // 瀛椾綋棰滆壊銆佸瓧浣撹儗鏅鑹�
+ ["clean"], // 娓呴櫎鏂囨湰鏍煎紡
+ ["link", "image", "video"], // 閾炬帴銆佸浘鐗囥�佽棰�
+ ],
+ },
+ placeholder: "璇疯緭鍏ュ唴瀹�",
+ readOnly: props.readOnly,
+ };
+</script>
+
+<style>
+ .editor-container {
+ width: 100%;
+ }
+
+ .editor-img-uploader {
+ display: none;
+ }
+
+ .editor {
+ width: 100%;
+ }
+
+ .quill-editor {
+ border: 1px solid #e8e8e8;
+ border-radius: 8px;
+ overflow: hidden;
+ }
+
+ /* Quill缂栬緫鍣ㄦ牱寮� */
+ :deep(.ql-toolbar.ql-snow) {
+ border-bottom: 1px solid #e8e8e8;
+ border-radius: 8px 8px 0 0;
+ padding: 8px 12px;
+ }
+
+ :deep(.ql-container.ql-snow) {
+ min-height: 300px;
+ border-radius: 0 0 8px 8px;
+ }
+
+ :deep(.ql-editor) {
+ min-height: 300px;
+ font-size: 14px;
+ line-height: 1.5;
+ padding: 12px;
+ }
+
+ /* 绉诲姩绔�傞厤 */
+ @media (max-width: 768px) {
+ :deep(.ql-toolbar.ql-snow) {
+ padding: 6px 8px;
+ }
+
+ :deep(.ql-editor) {
+ font-size: 13px;
+ padding: 10px;
+ }
+ }
+
+ /* 鍥剧墖鏍峰紡 */
+ :deep(.ql-editor img) {
+ max-width: 100%;
+ height: auto;
+ border-radius: 4px;
+ margin: 8px 0;
+ }
+
+ /* 宸ュ叿鏍忔寜閽牱寮� */
+ :deep(.ql-toolbar.ql-snow .ql-button) {
+ height: 28px;
+ width: 28px;
+ padding: 4px;
+ }
+
+ :deep(.ql-toolbar.ql-snow .ql-picker-label) {
+ height: 28px;
+ padding: 4px 8px;
+ }
+
+ /* 鎻愮ず妗嗘牱寮� */
+ :deep(.ql-snow .ql-tooltip[data-mode="link"])::before {
+ content: "璇疯緭鍏ラ摼鎺ュ湴鍧�:";
+ }
+
+ :deep(.ql-snow .ql-tooltip.ql-editing a.ql-action)::after {
+ border-right: 0px;
+ content: "淇濆瓨";
+ padding-right: 0px;
+ }
+
+ :deep(.ql-snow .ql-tooltip[data-mode="video"])::before {
+ content: "璇疯緭鍏ヨ棰戝湴鍧�:";
+ }
+
+ /* 瀛椾綋澶у皬閫夐」 */
+ :deep(.ql-snow .ql-picker.ql-size .ql-picker-label)::before,
+ :deep(.ql-snow .ql-picker.ql-size .ql-picker-item)::before {
+ content: "14px";
+ }
+
+ :deep(.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"])::before,
+ :deep(.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"])::before {
+ content: "10px";
+ }
+
+ :deep(.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"])::before,
+ :deep(.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"])::before {
+ content: "18px";
+ }
+
+ :deep(.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"])::before,
+ :deep(.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"])::before {
+ content: "32px";
+ }
+
+ /* 鏍囬閫夐」 */
+ :deep(.ql-snow .ql-picker.ql-header .ql-picker-label)::before,
+ :deep(.ql-snow .ql-picker.ql-header .ql-picker-item)::before {
+ content: "鏂囨湰";
+ }
+
+ :deep(.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"])::before,
+ :deep(.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"])::before {
+ content: "鏍囬1";
+ }
+
+ :deep(.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"])::before,
+ :deep(.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"])::before {
+ content: "鏍囬2";
+ }
+
+ :deep(.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"])::before,
+ :deep(.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"])::before {
+ content: "鏍囬3";
+ }
+
+ :deep(.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"])::before,
+ :deep(.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"])::before {
+ content: "鏍囬4";
+ }
+
+ :deep(.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"])::before,
+ :deep(.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"])::before {
+ content: "鏍囬5";
+ }
+
+ :deep(.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"])::before,
+ :deep(.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"])::before {
+ content: "鏍囬6";
+ }
+
+ /* 瀛椾綋閫夐」 */
+ :deep(.ql-snow .ql-picker.ql-font .ql-picker-label)::before,
+ :deep(.ql-snow .ql-picker.ql-font .ql-picker-item)::before {
+ content: "鏍囧噯瀛椾綋";
+ }
+
+ :deep(.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"])::before,
+ :deep(.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"])::before {
+ content: "琛嚎瀛椾綋";
+ }
+
+ :deep(
+ .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]
+ )::before,
+ :deep(
+ .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]
+ )::before {
+ content: "绛夊瀛椾綋";
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.3