uniapp小程序Editor组件封装及使用

这篇具有很好参考价值的文章主要介绍了uniapp小程序Editor组件封装及使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

  • 封装editor组件,放三个文件夹
  • uniapp小程序Editor组件封装及使用,小程序,html,javascript
  • editor.vue文件是主要封装代码
  • <template>
    	<view class="container">
    		<view class="page-body">
    			<view class="wrapper">
    				<view class="toolbar" @tap="format" style="height: 120px;overflow-y: auto;">
    					<view
    						:class="formats.bold ? 'ql-active' : ''"
    						class="iconfont icon-zitijiacu"
    						data-name="bold"
    					></view>
    					<view
    						:class="formats.italic ? 'ql-active' : ''"
    						class="iconfont icon-zitixieti"
    						data-name="italic"
    					></view>
    					<view
    						:class="formats.underline ? 'ql-active' : ''"
    						class="iconfont icon-zitixiahuaxian"
    						data-name="underline"
    					></view>
    					<view
    						:class="formats.strike ? 'ql-active' : ''"
    						class="iconfont icon-zitishanchuxian"
    						data-name="strike"
    					></view>
    					<view
    						:class="formats.align === 'left' ? 'ql-active' : ''"
    						class="iconfont icon-zuoduiqi"
    						data-name="align"
    						data-value="left"
    					></view>
    					<view
    						:class="formats.align === 'center' ? 'ql-active' : ''"
    						class="iconfont icon-juzhongduiqi"
    						data-name="align"
    						data-value="center"
    					></view>
    					<view
    						:class="formats.align === 'right' ? 'ql-active' : ''"
    						class="iconfont icon-youduiqi"
    						data-name="align"
    						data-value="right"
    					></view>
    					<view
    						:class="formats.align === 'justify' ? 'ql-active' : ''"
    						class="iconfont icon-zuoyouduiqi"
    						data-name="align"
    						data-value="justify"
    					></view>
    					<view
    						:class="formats.lineHeight ? 'ql-active' : ''"
    						class="iconfont icon-line-height"
    						data-name="lineHeight"
    						data-value="2"
    					></view>
    					<view
    						:class="formats.letterSpacing ? 'ql-active' : ''"
    						class="iconfont icon-Character-Spacing"
    						data-name="letterSpacing"
    						data-value="2em"
    					></view>
    					<view
    						:class="formats.marginTop ? 'ql-active' : ''"
    						class="iconfont icon-722bianjiqi_duanqianju"
    						data-name="marginTop"
    						data-value="20px"
    					></view>
    					<view
    						:class="formats.previewarginBottom ? 'ql-active' : ''"
    						class="iconfont icon-723bianjiqi_duanhouju"
    						data-name="marginBottom"
    						data-value="20px"
    					></view>
    					<view class="iconfont icon-clearedformat" @tap="removeFormat"></view>
    					<view
    						:class="formats.fontFamily ? 'ql-active' : ''"
    						class="iconfont icon-font"
    						data-name="fontFamily"
    						data-value="Pacifico"
    					></view>
    					<view
    						:class="formats.fontSize === '24px' ? 'ql-active' : ''"
    						class="iconfont icon-fontsize"
    						data-name="fontSize"
    						data-value="24px"
    					></view>
    
    					<view
    						:class="formats.color === '#0000ff' ? 'ql-active' : ''"
    						class="iconfont icon-text_color"
    						data-name="color"
    						data-value="#0000ff"
    					></view>
    					<view
    						:class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''"
    						class="iconfont icon-fontbgcolor"
    						data-name="backgroundColor"
    						data-value="#00ff00"
    					></view>
    
    					<view class="iconfont icon-date" @tap="insertDate"></view>
    					<view
    						class="iconfont icon--checklist"
    						data-name="list"
    						data-value="check"
    					></view>
    					<view
    						:class="formats.list === 'ordered' ? 'ql-active' : ''"
    						class="iconfont icon-youxupailie"
    						data-name="list"
    						data-value="ordered"
    					></view>
    					<view
    						:class="formats.list === 'bullet' ? 'ql-active' : ''"
    						class="iconfont icon-wuxupailie"
    						data-name="list"
    						data-value="bullet"
    					></view>
    					<view class="iconfont icon-undo" @tap="undo"></view>
    					<view class="iconfont icon-redo" @tap="redo"></view>
    
    					<view class="iconfont icon-outdent" data-name="indent" data-value="-1"></view>
    					<view class="iconfont icon-indent" data-name="indent" data-value="+1"></view>
    					<view class="iconfont icon-fengexian" @tap="insertDivider"></view>
    					<view class="iconfont icon-charutupian" @tap="insertImage"></view>
    					<view
    						:class="formats.header === 1 ? 'ql-active' : ''"
    						class="iconfont icon-format-header-1"
    						data-name="header"
    						:data-value="1"
    					></view>
    					<view
    						:class="formats.script === 'sub' ? 'ql-active' : ''"
    						class="iconfont icon-zitixiabiao"
    						data-name="script"
    						data-value="sub"
    					></view>
    					<view
    						:class="formats.script === 'super' ? 'ql-active' : ''"
    						class="iconfont icon-zitishangbiao"
    						data-name="script"
    						data-value="super"
    					></view>
    					<view class="iconfont icon-shanchu" @tap="clear"></view>
    					<view
    						:class="formats.direction === 'rtl' ? 'ql-active' : ''"
    						class="iconfont icon-direction-rtl"
    						data-name="direction"
    						data-value="rtl"
    					></view>
    				</view>
    				<view class="editor-wrapper">
    					<!-- <editor id="editor" class="ql-container" placeholder="开始输入..." showImgSize showImgToolbar showImgResize >
    					</editor> -->
    					<editor
    						id="editor"
    						class="ql-container"
    						:placeholder="placeholder"
    						@statuschange="onStatusChange"
    						:show-img-resize="true"
    						@ready="onEditorReady"
    						@input="getCtx"
    					></editor>
    				</view>
    			</view>
    		</view>
    	</view>
    </template>
    
    <script>
    export default {
    	props: {
    		value: {
    			type: String,
    			default: ''
    		}
    	},
    	data() {
    		return {
    			readOnly: false,
    			placeholder: '开始输入...',
    			richText: '',
    			formats: {},
    			serverUrl: 'https://www.baidu.com/api/file/upload' // 图片上传 - 接口
    		};
    	},
    
    	methods: {
    		readOnlyChange() {
    			this.readOnly = !this.readOnly;
    		},
    		onEditorReady() {
    			// 富文本节点渲染完成
    			const query = uni.createSelectorQuery().in(this);
    			query
    				.select('#editor')
    				.context(res => {
    					this.editorCtx = res.context;
    					if (this.value) {
    						this.editorCtx.setContents({
    							html: this.value
    						});
    					}
    				})
    				.exec(this);
    		},
    		// 失去焦点时,获取富文本的内容
    		getCtx(e) {
    			this.richText = e.detail.html;
    			this.$emit('input', e.detail.html);
    		},
    		undo() {
    			this.editorCtx.undo();
    		},
    		redo() {
    			this.editorCtx.redo();
    		},
    		format(e) {
    			let { name, value } = e.target.dataset;
    			if (!name) return;
    			// console.log('format', name, value)
    			this.editorCtx.format(name, value);
    		},
    		onStatusChange(e) {
    			const formats = e.detail;
    			this.formats = formats;
    		},
    		insertDivider() {
    			this.editorCtx.insertDivider({
    				success: function() {
    					console.log('insert divider success');
    				}
    			});
    		},
    		clear() {
    			this.editorCtx.clear({
    				success: function(res) {
    					console.log('clear success');
    				}
    			});
    		},
    		removeFormat() {
    			this.editorCtx.removeFormat();
    		},
    		insertDate() {
    			const date = new Date();
    			const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    			this.editorCtx.insertText({
    				text: formatDate
    			});
    		},
    		insertImage() {
    			var that = this;
    			uni.chooseImage({
    				success(res) {
    					console.log('选择图片成功');
    					console.log(res);
    					that.editorCtx.insertImage({
    						width: '100%',
    						height: '20%',
    						src: res.tempFilePaths[0]
    					});
    				}
    			});
    			// uni.chooseImage({
    			// 	count: 1,
    			// 	sizeType: ['original', 'compressed'],
    			// 	sourceType: ['album', 'camera'],
    			// 	success: res => {
    			// 		console.log(res.tempFilePaths[0], 'cccccc');
    			// 		uni.uploadFile({
    			// 			url: that.serverUrl, //请求的图片上传接口,这里是基准地址加上传接口
    			// 			header: {
    			// 				Authorization: 'token',
    			// 				'content-type': 'multipart/form-data'
    			// 			},
    			// 			filePath: res.tempFilePaths[0],
    			// 			method: 'post',
    			// 			fileType: 'image',
    			// 			name: 'uploadfile',
    			// 			//主要就是修改success的数据,因为后台响应数据可能会不一样
    			// 			success: res => {
    			// 				//注意!后台响应参数,我这里是要后台响应data直接是个字符串形式的网络格式的图片地址,下面是一个约束判断,建议加上
    			// 				if (res.data.includes('https')) {
    			// 					//这个就是个封装提示,可以删
    			// 					var img = res.data.match('https://(.*)')[0];
    			// 					that.editorCtx.insertImage({
    			// 						width: '100%', //设置宽度为100%防止宽度溢出手机屏幕
    			// 						height: 'auto',
    			// 						src: img,
    			// 						alt: '图像',
    			// 						success: function() {
    			// 							console.log('insert image success');
    			// 						}
    			// 					});
    			// 				} else {
    			// 					// this.$http.toast('上传失败');
    			// 					console.log('上传失败');
    			// 				}
    			// 			},
    			// 			fail: err => {
    			// 				console.log(err);
    			// 			}
    			// 		});
    			// 	}
    			// });
    		}
    	},
    	onLoad() {
    		uni.loadFontFace({
    			family: 'Pacifico'
    			// source: url('./iconfont.ttf')
    		});
    	}
    };
    </script>
    
    <style>
    @import './editor-icon.css';
    
    .page-body {
    	height: calc(100vh - var(--window-top) - var(--status-bar-height));
    }
    
    .wrapper {
    	height: 100%;
    }
    
    .editor-wrapper {
    	height: calc(100vh - var(--window-top) - var(--status-bar-height) - 140px);
    	background: #eee;
    }
    
    .iconfont {
    	display: inline-block;
    	padding: 8px 8px;
    	width: 24px;
    	height: 24px;
    	cursor: pointer;
    	font-size: 20px;
    }
    
    .toolbar {
    	box-sizing: border-box;
    	border-bottom: 0;
    	font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    }
    
    .ql-container {
    	box-sizing: border-box;
    	padding: 12px 15px;
    	width: 100%;
    	min-height: 30vh;
    	height: 100%;
    	margin-top: 20px;
    	font-size: 16px;
    	line-height: 1.5;
    }
    
    .ql-active {
    	color: #06c;
    }
    </style>
    
  • editor-icon.css文件样式

  • @font-face {
    	font-family: 'iconfont';
    	src: url('data:font/truetype;charset=utf-8;base64,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AAsAJgFuAAoAQwByAGUAYQB0AGUAZAAgAGIAeQAgAGkAYwBvAG4AZgBvAG4AdAAKAAAKQ3JlYXRlZCBieSBpY29uZm9udAoAAGkAYwBvAG4AZgBvAG4AdAAAaWNvbmZvbnQAAFIAZQBnAHUAbABhAHIAAFJlZ3VsYXIAAGkAYwBvAG4AZgBvAG4AdAAAaWNvbmZvbnQAAGkAYwBvAG4AZgBvAG4AdAAAaWNvbmZvbnQAAFYAZQByAHMAaQBvAG4AIAAxAC4AMAAAVmVyc2lvbiAxLjAAAGkAYwBvAG4AZgBvAG4AdAAAaWNvbmZvbnQAAEcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAAcwB2AGcAMgB0AHQAZgAgAGYAcgBvAG0AIABGAG8AbgB0AGUAbABsAG8AIABwAHIAbwBqAGUAYwB0AC4AAEdlbmVyYXRlZCBieSBzdmcydHRmIGZyb20gRm9udGVsbG8gcHJvamVjdC4AAGgAdAB0AHAAOgAvAC8AZgBvAG4AdABlAGwAbABvAC4AYwBvAG0AAGh0dHA6Ly9mb250ZWxsby5jb20AAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOwAAAAEAAgECAQMBBAEFAQYBBwEIAQkBCgELAQwBDQEOAQ8BEAERARIBEwEUARUBFgEXARgBGQEaARsBHAEdAR4BHwEgASEBIgEjASQBJQEmAScBKAEpASoBKwEsAS0BLgEvATABMQEyATMBNAE1ATYBNwE4ATkEcmVkbwlzZWxlY3RhbGwHcHJldmlldwR1bmRvBGRhdGUHY2xlYXJ1cBU3MjNiaWFuamlxaV9kdWFuaG91anUWNzIyYmlhbmppcWlfZHVhbnFpYW5qdQotY2hlY2tsaXN0DWRpcmVjdGlvbi1sdHINZGlyZWN0aW9uLXJ0bAtmb250Ymdjb2xvcg1jbGVhcmVkZm9ybWF0BGZvbnQHb3V0ZGVudAhmb250c2l6ZQp0ZXh0X2NvbG9yD2Zvcm1hdC1oZWFkZXItMg9mb3JtYXQtaGVhZGVyLTMLbGluZS1oZWlnaHQPZm9ybWF0LWhlYWRlci0xD2Zvcm1hdC1oZWFkZXItNA9mb3JtYXQtaGVhZGVyLTUPZm9ybWF0LWhlYWRlci02EUNoYXJhY3Rlci1TcGFjaW5nBmluZGVudAZiYW9jdW4IcXVhbnBpbmcFZnV6aGkHc2hhbmNodQxiaWFuamlzZWt1YWkJZmVuZ2V4aWFuB2RpYW56YW4MY2hhcnVsaWFuamllC2NoYXJ1dHVwaWFuCnd1eHVwYWlsaWUManV6aG9uZ2R1aXFpB3lpbnlvbmcLeW91eHVwYWlsaWUIeW91ZHVpcWkJeml0aWRhaW1hCHhpYW9saWFuCXppdGlqaWFjdQ96aXRpc2hhbmNodXhpYW4Neml0aXNoYW5nYmlhbwp6aXRpYmlhb3RpDnppdGl4aWFodWF4aWFuCXppdGl4aWV0aQl6aXRpeWFuc2UIenVvZHVpcWkJeml0aXl1bGFuC3ppdGl4aWFiaWFvC3p1b3lvdWR1aXFpB2R1aWdvdXgGZ3VhbmJpDnNoZW5neWluX3NoaXRpAAAAAAAB//8AAgABAAAADAAAABYAAAACAAEAAwA6AAEABAAAAAIAAAAAAAAAAQAAAADVpCcIAAAAANhk6GIAAAAA2GToYg==') format('truetype');
    	font-weight: normal;
    	font-style: normal;
    	font-display: swap;
    }
    
    .iconfont {
    	font-family: "iconfont" !important;
    	font-size: 16px;
    	font-style: normal;
    	-webkit-font-smoothing: antialiased;
    	-moz-osx-font-smoothing: grayscale;
    }
    
    .icon-redo:before {
    	content: "\e627";
    }
    
    .icon-undo:before {
    	content: "\e633";
    }
    
    .icon-indent:before {
    	content: "\eb28";
    }
    
    .icon-outdent:before {
    	content: "\e6e8";
    }
    
    .icon-fontsize:before {
    	content: "\e6fd";
    }
    
    .icon-format-header-1:before {
    	content: "\e860";
    }
    
    .icon-format-header-4:before {
    	content: "\e863";
    }
    
    .icon-format-header-5:before {
    	content: "\e864";
    }
    
    .icon-format-header-6:before {
    	content: "\e865";
    }
    
    .icon-clearup:before {
    	content: "\e64d";
    }
    
    .icon-preview:before {
    	content: "\e631";
    }
    
    .icon-date:before {
    	content: "\e63e";
    }
    
    .icon-fontbgcolor:before {
    	content: "\e678";
    }
    
    .icon-clearedformat:before {
    	content: "\e67e";
    }
    
    .icon-font:before {
    	content: "\e684";
    }
    
    .icon-723bianjiqi_duanhouju:before {
    	content: "\e65f";
    }
    
    .icon-722bianjiqi_duanqianju:before {
    	content: "\e660";
    }
    
    .icon-text_color:before {
    	content: "\e72c";
    }
    
    .icon-format-header-2:before {
    	content: "\e75c";
    }
    
    .icon-format-header-3:before {
    	content: "\e75d";
    }
    
    .icon--checklist:before {
    	content: "\e664";
    }
    
    .icon-baocun:before {
    	content: "\ec09";
    }
    
    .icon-line-height:before {
    	content: "\e7f8";
    }
    
    .icon-quanping:before {
    	content: "\ec13";
    }
    
    .icon-direction-rtl:before {
    	content: "\e66e";
    }
    
    .icon-direction-ltr:before {
    	content: "\e66d";
    }
    
    .icon-selectall:before {
    	content: "\e62b";
    }
    
    .icon-fuzhi:before {
    	content: "\ec7a";
    }
    
    .icon-shanchu:before {
    	content: "\ec7b";
    }
    
    .icon-bianjisekuai:before {
    	content: "\ec7c";
    }
    
    .icon-fengexian:before {
    	content: "\ec7f";
    }
    
    .icon-dianzan:before {
    	content: "\ec80";
    }
    
    .icon-charulianjie:before {
    	content: "\ec81";
    }
    
    .icon-charutupian:before {
    	content: "\ec82";
    }
    
    .icon-wuxupailie:before {
    	content: "\ec83";
    }
    
    .icon-juzhongduiqi:before {
    	content: "\ec84";
    }
    
    .icon-yinyong:before {
    	content: "\ec85";
    }
    
    .icon-youxupailie:before {
    	content: "\ec86";
    }
    
    .icon-youduiqi:before {
    	content: "\ec87";
    }
    
    .icon-zitidaima:before {
    	content: "\ec88";
    }
    
    .icon-xiaolian:before {
    	content: "\ec89";
    }
    
    .icon-zitijiacu:before {
    	content: "\ec8a";
    }
    
    .icon-zitishanchuxian:before {
    	content: "\ec8b";
    }
    
    .icon-zitishangbiao:before {
    	content: "\ec8c";
    }
    
    .icon-zitibiaoti:before {
    	content: "\ec8d";
    }
    
    .icon-zitixiahuaxian:before {
    	content: "\ec8e";
    }
    
    .icon-zitixieti:before {
    	content: "\ec8f";
    }
    
    .icon-zitiyanse:before {
    	content: "\ec90";
    }
    
    .icon-zuoduiqi:before {
    	content: "\ec91";
    }
    
    .icon-zitiyulan:before {
    	content: "\ec92";
    }
    
    .icon-zitixiabiao:before {
    	content: "\ec93";
    }
    
    .icon-zuoyouduiqi:before {
    	content: "\ec94";
    }
    
    .icon-duigoux:before {
    	content: "\ec9e";
    }
    
    .icon-guanbi:before {
    	content: "\eca0";
    }
    
    .icon-shengyin_shiti:before {
    	content: "\eca5";
    }
    
    .icon-Character-Spacing:before {
    	content: "\e964";
    }
    
  • 到此封装就完毕了,以下是单个页面引入!!!!

  • //导入地址

  • import richTextEditor from '../../components/editor/editor.vue';
    //注册
    	components: {
    		richTextEditor
    	},
    	data() {
    		return {
    			ruleForm: {
    				content: ''
    			}
    		};
    	},
    	methods: {
    		input(e) {
    			this.ruleForm.content = e;
    		}
    	}
  • 最后效果如下,编辑器一共四排,这边隐藏了一排,可以上下滑动

 uniapp小程序Editor组件封装及使用,小程序,html,javascript文章来源地址https://www.toymoban.com/news/detail-705991.html

到了这里,关于uniapp小程序Editor组件封装及使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【uniapp】中 微信小程序实现echarts图表组件的封装

     插件地址:echarts-for-uniapp - DCloud 插件市场 图例: 一、uniapp 安装   二、文件夹操作 将 node_modules 下的 uniapp-echarts 文件夹复制到 components 文件夹下  当前不操作此步骤的话,运行 - 运行到小程序模拟器 - 微信开发者工具 时,echarts图表显示不出来 原因:运行到小程序打包过

    2024年02月12日
    浏览(50)
  • uniapp小程序手写封装popup弹窗message提醒框组件

    在写uniapp小程序的时候,弹窗提醒经常会用到,虽然弹窗的组件很多,但是通常别人封装好的弹窗组件自定义度不高,很难匹配自己的ui需求。所以本篇文章教大家封装自己的弹窗提醒组件 取消和确认按钮的点击事件使用$emit传事件。中间的文字部分接收父组件的传值。 css大

    2024年02月11日
    浏览(55)
  • uniapp editor组件 如何上传图片

    需求:我们在使用uniapp的editor组件时,主要是为了保持输入内容的格式。里面的文字可以有颜色、粗体、排列样式,可以插入图片。就像下面这样。 逻辑: 我们处理图片的时机应该是在最后提交的状态 。 下面就是打印的结果,html就是我需要提交到数据库的内容,目前img标

    2024年02月16日
    浏览(45)
  • uniapp 微信小程序 editor富文本编辑器 api 使用记录

    这里记录一下自己研究学习的结果 之前一直使用textarea 来进行内容的编辑。但是局限性还是太多,最近发现了editor。觉得很不错 uniapp的官方说明 https://uniapp.dcloud.io/component/editor.html 这里有个例子,看起来很棒。但是自己使用起来的时候, 怎么也没有官方demo上面的工具栏 !

    2024年02月09日
    浏览(45)
  • 小程序封装拖拽菜单组件(uniapp拖拽排序,自定义菜单)

    使用movable-area作为可移动区域,并在内部循环渲染列表项view,绑定touch事件。 在mounted生命周期函数内获取区域movable-area的dom信息,记录列表项的坐标信息。 在methods中定义了列表项的touchstart、touchmove和touchend事件的方法,用于实现列表项的拖拽移动和位置变更。 watch监听列表项数

    2023年04月20日
    浏览(33)
  • uniapp 微信小程序axios库的封装及使用

    第一步:安装axios及适配器 安装依赖 需要注意使用uniapp-vue3版本时axios的版本需要0.26.0以下,建议锁版本   axios-miniprogram-adapter 这个依赖主要是适配小程序网络请求的适配器,为了解决uniapp 适配axios请求,避免报adapter is not a function错误 第二步:axios二次封装 在utils文件下新建

    2024年02月11日
    浏览(62)
  • uniapp小程序使用原生echarts非第三方封装 小程序使用echarts 图表 可视化

    前言:之前小程序做的图表,当时没找到太多使用echarts的教程,大多都是二次封装的。连uniapp都是推荐别人二次封装的图表,然后用了之后呢,发现不是自己想要的效果(也许是自己对别人二次封装的代码不够熟悉吧 ),然后干脆摸索下uniapp引入echarts图表(非他人封装的)

    2024年02月09日
    浏览(50)
  • 微信小程序--下拉选择框组件封装,可CV直接使用

            接到的项目需求,查看ui设计图后,由于微信小程序官方设计的下拉选择框不符合需求,而且常用的第三方库也没有封装类似的,所以选择自己自定义组件。在此记录一下,方便日后复用。         ui设计图如下:                   微信官方提供的选择框         对比发现

    2024年02月05日
    浏览(49)
  • 使用 uniapp 适用于wx小程序 - 实现移动端头部的封装和调用

    图例:红框区域,使其标题区与胶囊对齐      希望我的愚见能够帮助你哦~,若有不足之处,还望指出,你们有更好的解决方法,欢迎大家在评论区下方留言支持,大家一起相互学习参考呀~

    2024年02月11日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包