更新 upload 示例

icssoa · icssoa · commit 5b903d76bdd7 · 2021-03-28T18:19:32.000+08:00
diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
 		"@vue/composition-api": "^1.0.0-rc.5",
 		"axios": "^0.21.1",
 		"cl-admin": "^1.5.3",
-		"cl-admin-crud": "^1.6.5",
+		"cl-admin-crud": "^1.6.8",
 		"cl-admin-theme": "^0.0.5",
 		"clipboard": "^2.0.7",
 		"codemirror": "^5.59.4",
diff --git a/src/cool/modules/base/components/editor-quill/index.vue b/src/cool/modules/base/components/editor-quill/index.vue
@@ -6,7 +6,7 @@
 			ref="upload-space"
 			detail-data
 			:show-button="false"
-			@confirm="onUploadSpaceConfirm"
+			@confirm="onFileConfirm"
 		>
 		</cl-upload-space>
 	</div>
@@ -15,6 +15,7 @@
 <script>
 import Quill from "quill";
 import "quill/dist/quill.snow.css";
+import { isNumber } from "cl-admin/utils";
 
 export default {
 	name: "cl-editor-quill",
@@ -28,7 +29,6 @@ export default {
 
 	data() {
 		return {
-			uploadURL: "",
 			content: "",
 			quill: null,
 			cursorIndex: 0
@@ -37,20 +37,12 @@ export default {
 
 	computed: {
 		style() {
-			let h = this.height;
-			let w = this.width;
-
-			if (!isNaN(Number(h))) {
-				h += "px";
-			}
-
-			if (!isNaN(Number(w))) {
-				h += "px";
-			}
+			const height = isNumber(this.height) ? this.height + "px" : this.height;
+			const width = isNumber(this.width) ? this.width + "px" : this.width;
 
 			return {
-				height: h,
-				width: w
+				height,
+				width
 			};
 		}
 	},
@@ -72,6 +64,7 @@ export default {
 	},
 
 	mounted() {
+		// 实例化
 		this.quill = new Quill(this.$el.querySelector(".editor"), {
 			theme: "snow",
 			placeholder: "输入内容",
@@ -96,18 +89,23 @@ export default {
 			...this.options
 		});
 
-		this.quill.getModule("toolbar").addHandler("image", this.uploadFileHandler);
+		// 添加文件上传工具
+		this.quill.getModule("toolbar").addHandler("image", this.uploadHandler);
 
+		// 监听内容变化
 		this.quill.on("text-change", () => {
 			this.content = this.quill.root.innerHTML;
 		});
 
+		// 设置默认内容
 		this.setContent(this.value);
+
+		// 加载完回调
 		this.$emit("load", this.quill);
 	},
 
 	methods: {
-		uploadFileHandler() {
+		uploadHandler() {
 			const selection = this.quill.getSelection();
 
 			if (selection) {
@@ -117,8 +115,9 @@ export default {
 			this.$refs["upload-space"].open();
 		},
 
-		onUploadSpaceConfirm(files) {
+		onFileConfirm(files) {
 			if (files.length > 0) {
+				// 批量插件图片
 				files.forEach((file, i) => {
 					let [type] = file.type.split("/");
 
@@ -129,6 +128,9 @@ export default {
 						Quill.sources.USER
 					);
 				});
+
+				// 移动光标到图片后一位
+				this.quill.setSelection(this.cursorIndex + files.length);
 			}
 		},
 
diff --git a/src/cool/modules/demo/views/upload.vue b/src/cool/modules/demo/views/upload.vue
@@ -1,5 +1,19 @@
 <template>
 	<div class="demo-upload scroller1">
+		<div class="demo-upload__item">
+			<p>文件空间</p>
+			<cl-upload-space v-model="urls"></cl-upload-space>
+
+			<p style="margin-top: 10px">选择的文件：</p>
+
+			<el-image
+				v-for="(item, index) in urlList"
+				:key="index"
+				:src="item"
+				:style="{ width: '100px', marginRight: '10px' }"
+			></el-image>
+		</div>
+
 		<div class="demo-upload__item">
 			<p>普通上传</p>
 			<cl-upload :before-upload="onBeforeUpload"></cl-upload>
@@ -33,13 +47,6 @@
 				<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
 			</cl-upload>
 		</div>
-
-		<div class="demo-upload__item">
-			<p>文件空间</p>
-			<cl-upload-space v-model="urls"></cl-upload-space>
-
-			<p style="margin-top: 10px">选择的文件：{{ urls }}</p>
-		</div>
 	</div>
 </template>
 
@@ -51,6 +58,12 @@ export default {
 		};
 	},
 
+	computed: {
+		urlList() {
+			return this.urls.split(",").filter(Boolean);
+		}
+	},
+
 	methods: {
 		onBeforeUpload(file, { done }) {
 			done();
diff --git a/src/cool/modules/upload/components/space/index.vue b/src/cool/modules/upload/components/space/index.vue
@@ -9,6 +9,7 @@
 			title="文件空间"
 			height="630px"
 			width="1000px"
+			keep-alive
 			:visible.sync="visible"
 			:props="{
 				'close-on-click-modal': false,
