vue中el-tree结合el-switch实现开关状态切换

 更新时间:2023年12月13日 15:06:15   作者:Zwq8023520  
本文主要介绍了vue中el-tree结合el-switch实现开关状态切换,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

 本文主要介绍了vue中el-tree结合el-switch实现开关状态切换,具体如下:

<template>
	<div>
		<el-col :span="24">
			<el-card class="tree-card">
				<div class="sketch_content selectFile">
					<span class="span_title">组织列表 </span>
					<div style="display: flex; justify-content: flex-end; width: 55vw">
						<div
							style="display: flex; align-items: center; margin-right: 1.5vw"
						>
							<el-radio-group v-model="filterType" @change="radioChange">
								<el-radio :label="'all'">显示全部</el-radio>
								<el-radio :label="'on'">只显示开启</el-radio>
								<el-radio :label="'off'">只显示关闭</el-radio>
							</el-radio-group>
						</div>
						<el-button type="primary" size="small" @click="oneClickEnables"
							>一键启用</el-button
						>
					</div>
					<el-tree
						style="margin-top: 20px; width: 55vw"
						:data="organizationTreeData"
						node-key="id"
						default-expand-all
						:expand-on-click-node="false"
						v-if="
							organizationTreeData.length !== 0 && organizationTreeData !== ''
						"
						draggable
						@node-click="getOrganizationList"
						@drag-start="handleDragStart"
						@allow-drop="allowDrop"
						@drag-end="handleDragEnd"
						@node-drop="handleNodeDrop"
						@allow-drag="allowDrag"
					>
						<span class="custom-tree-node" slot-scope="{ node, data }">
							<span>{{ node.label }}</span>
							<div
								v-if="data.type !== 1"
								style="
									display: flex;
									justify-content: center;
									align-items: center;
								"
							>
								<el-button
									type="text"
									icon="el-icon-plus"
									class="edit"
									@click="showOrganizationDialog"
								>
								</el-button>
								<el-tooltip
									class="item"
									effect="dark"
									content="修改组织"
									placement="top"
								>
									<el-button
										type="text"
										@click="() => showEditOrganizationDialog(data)"
										icon="el-icon-edit"
										class="edit"
										style="margin-right: 2vw"
									>
									</el-button>
								</el-tooltip>
								<el-switch
									slot="reference"
									style="display: block"
									v-model="node.data.organizeStatus"
									active-color="#13ce66"
									inactive-color="#cccccc"
									:active-value="0"
									:inactive-value="1"
									active-text="启用"
									inactive-text="禁用"
									@change="statusChange(node)"
								>
								</el-switch>
							</div>
						</span>
					</el-tree>
					<div
						v-if="
							organizationTreeData.length == 0 || organizationTreeData == ''
						"
					>
						<el-empty description="暂无组织" />
						<el-button
							type="primary"
							size="small"
							@click="showDialog"
							v-if="add"
							>添加组织</el-button
						>
					</div>
				</div>
			</el-card>
		</el-col>
 
		<el-dialog
			width="580px"
			:visible.sync="addOrganizationDialogVisible"
			:close-on-click-modal="false"
			@close="closeOrganizationTreeDialog"
		>
			<div class="addOrganizationDialog">
				<span>新增组织</span>
			</div>
			<el-divider class="dialog_divider"></el-divider>
			<el-form
				:model="organizationForm"
				ref="addFileBackupTaskForm"
				label-width="100px"
				style="height: auto"
			>
				<el-form-item label="组织代码:" style="margin-left: -19px">
					<el-input
						v-model="organizationForm.id"
						size="mini"
						style="width: 200px; margin-left: -170px"
					></el-input>
				</el-form-item>
				<el-form-item label="上级组织:" style="margin-left: -19px">
					<el-input
						v-model="organizationForm.lead"
						size="mini"
						style="width: 200px; margin-left: -170px"
					></el-input>
				</el-form-item>
				<el-form-item
					label="组织名称:"
					prop="fileIp"
					style="margin-left: -19px"
				>
					<el-input
						v-model="organizationForm.organizationName"
						placeholder="请输入组织名称"
						size="mini"
						style="width: 200px; margin-left: -170px"
					></el-input>
				</el-form-item>
				<!-- <el-form-item
					label="上级组织:"
					prop="fileIp"
					style="margin-left: -19px"
				>
					<el-select
						placeholder="请选择上级组织"
						style="width: 200px; margin-left: -170px"
						size="mini"
					>
						<el-option label="部门1" value="0"></el-option>
						<el-option label="部门2" value="1"></el-option>
						<el-option label="生态单位1" value="2"></el-option>
					</el-select>
				</el-form-item> -->
				<el-form-item
					label="组织类型:"
					prop="fileType"
					style="margin-left: -19px"
				>
					<el-select
						style="width: 200px; margin-left: -170px"
						v-model="value1"
						@change="select"
					>
						<el-option
							v-for="item in options1"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						>
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<el-divider></el-divider>
			<div class="dialogClose">
				<el-button @click="closeOrganizationTreeDialog">取消</el-button>
				<el-button type="primary" @click="addOrganization">确定</el-button>
			</div>
		</el-dialog>
		<el-dialog
			width="580px"
			:visible.sync="visible"
			:close-on-click-modal="false"
			@close="closeOrganizationTreeDialog"
		>
			<div class="addOrganizationDialog">
				<span>新增组织</span>
			</div>
			<el-divider class="dialog_divider"></el-divider>
			<el-form
				:model="organizationForm"
				ref="addFileBackupTaskForm"
				label-width="100px"
				style="height: auto"
			>
				<el-form-item
					label="组织名称:"
					prop="fileIp"
					style="margin-left: -19px"
				>
					<el-input
						v-model="organizationForm.organizationName"
						placeholder="请输入组织名称"
						size="mini"
						style="width: 200px; margin-left: -170px"
					></el-input>
				</el-form-item>
 
				<el-form-item
					label="组织类型:"
					prop="fileType"
					style="margin-left: -19px"
				>
					<el-select
						style="width: 200px; margin-left: -170px"
						v-model="value1"
						@change="select"
					>
						<el-option
							v-for="item in options1"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						>
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<el-divider></el-divider>
			<div class="dialogClose">
				<el-button @click="closeOrganizationTreeDialog">取消</el-button>
				<el-button type="primary" @click="addOrganization1">确定</el-button>
			</div>
		</el-dialog>
		<!--    组织修改模块-->
		<el-dialog
			width="580px"
			:visible.sync="editOrganizationDialogVisible"
			:close-on-click-modal="false"
			@close="closeEditOrganizationDialog"
		>
			<div class="addOrganizationDialog">
				<span>修改组织</span>
			</div>
			<el-divider class="dialog_divider"></el-divider>
			<el-form
				:model="organizationForm"
				ref="addFileBackupTaskForm"
				label-width="100px"
				style="height: auto"
			>
				<el-form-item label="组织名称" prop="fileIp" style="margin-left: -19px">
					<el-input
						v-model="organizationForm.organizationName"
						placeholder="请输入组织名称"
						size="mini"
						style="width: 200px; margin-left: -170px"
					></el-input>
				</el-form-item>
				<el-form-item
					label="组织类型"
					prop="fileType"
					style="margin-left: -19px"
				>
					<el-select
						v-model="value"
						style="width: 200px; margin-left: -170px"
						:placeholder="placeholder"
						@change="change"
					>
						<el-option
							v-for="item in options"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						>
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<el-divider></el-divider>
			<div class="dialogClose">
				<el-button @click="closeEditOrganizationDialog">取消</el-button>
				<el-button type="primary" @click="editOrganization">确定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
 
<script>
import {
	getOrganizeList,
	restartOrganize,
	forbiddenOrganize,
	editOrganize,
	addOrganize,
	changeOrganize,
	oneClickEnable,
} from '@/api/index'
let id = 1000
 
export default {
	name: 'OrganizeMaintain',
	data() {
		return {
			value: '',
			see: true,
			placeholder: '请选择',
			add: true,
			options: [
				{ value: 0, label: '集团' },
				{ value: 1, label: '子集团' },
				{ value: 2, label: '公司' },
				{ value: 3, label: '部门' },
				{ value: 4, label: '生态单位' },
			],
			options1: [
				{ value: 0, label: '集团' },
				{ value: 1, label: '子集团' },
				{ value: 2, label: '公司' },
				{ value: 3, label: '部门' },
				{ value: 4, label: '生态单位' },
			],
			organizationTreeData: [],
			sectionList: [
				{
					id: 1,
					name: '部门1',
				},
				{
					id: 2,
					name: '部门2',
				},
				{
					id: 3,
					name: '部门3',
				},
				{
					id: 4,
					name: '生态单位',
				},
			],
			userList: [
				{
					id: 1,
					username: 'zzn',
				},
			],
			sectionUserList: [
				{
					id: 1,
					name: '用户1',
				},
				{
					id: 2,
					name: '用户2',
				},
				{
					id: 3,
					name: '用户3',
				},
			],
			addOrganizationDialogVisible: false,
			organizationForm: {
				organizationName: '',
				id: '',
				lead: '',
			},
			addTopOrganizationDialogVisible: false,
			// 节点的data
			organizationDialogData: '',
			editOrganizationDialogVisible: false,
			listTitle: '',
			data: [],
			type: 'text',
			node: '',
			organizeType: '',
			value1: '',
			addOrganizeType: '',
			draggedNode: null,
			visible: false,
			filterType: 'all',
		}
	},
	mounted() {
		this.getOrganizationList()
 
		getOrganizeList({ viewType: 2 })
	},
	methods: {
		async radioChange(value) {
			if (value == 'on') {
				this.add = false
				const res = await getOrganizeList({ viewType: 0 })
				this.organizationTreeData = [res.data.data[0]]
			} else if (value == 'off') {
				this.add = false
				const res = await getOrganizeList({ viewType: 1 })
				this.organizationTreeData = []
				this.organizationTreeData = [].concat(...res.data.data)
				console.log(this.organizationTreeData)
			} else {
				const res = await getOrganizeList({ viewType: 2 })
				this.organizationTreeData = [res.data.data[0]]
			}
		},
		getOrganizationList(data, node) {
			this.data = data
			this.node = node
			// this.listTitle = data.label
			// }
		},
 
		showOrganizationDialog() {
			setTimeout(() => {
				this.organizationForm.id = this.node.data.id
				this.organizationForm.lead = this.node.data.label
			})
 
			// this.organizationForm.id = this.node.parent.data.id
			// this.organizationForm.lead = this.node.parent.data.label
 
			this.addOrganizationDialogVisible = true
		},
		closeOrganizationTreeDialog() {
			this.addOrganizationDialogVisible = false
			this.visible = false
			this.organizationForm.organizationName = ''
			this.organizationForm.id = ''
			this.organizationForm.lead = ''
			this.value = ''
			this.value1 = ''
		},
 
		showEditOrganizationDialog() {
			this.editOrganizationDialogVisible = true
			setTimeout(() => {
				this.organizationForm.organizationName = this.data.label
				if (this.data.organizeType == 0) {
					this.placeholder = '集团'
				} else if (this.data.organizeType == 1) {
					this.placeholder = '子集团'
				} else if (this.data.organizeType == 2) {
					this.placeholder = '公司'
				} else if (this.data.organizeType == 3) {
					this.placeholder = '部门'
				} else if (this.data.organizeType == 4) {
					this.placeholder = '生态单位'
				}
			}, 0)
		},
		showDialog() {
			this.visible = true
		},
		closeEditOrganizationDialog() {
			this.editOrganizationDialogVisible = false
			this.organizationForm.organizationName = ''
		},
		// 新增组织
		async addOrganization() {
			const organizeName = this.organizationForm.organizationName
			const parentOrganize = this.organizationForm.id
			let organizeType = this.addOrganizeType
			if (organizeType == '集团') {
				organizeType = 0
			} else if (organizeType == '子集团') {
				organizeType = 1
			} else if (organizeType == '公司') {
				organizeType = 2
			} else if (organizeType == '部门') {
				organizeType = 3
			} else if (organizeType == '生态单位') {
				organizeType = 4
			}
			addOrganize({
				organizeName,
				parentOrganize,
				organizeType,
			}).then((res) => {
				if (res.data.status == 200) {
					this.$message({
						message: res.data.message,
						type: 'success',
					})
				} else {
					this.$message({
						message: res.data.message,
						type: 'error',
					})
				}
				const newChild = {
					id: id++,
					label: this.organizationForm.organizationName,
					children: [],
				}
 
				this.data.children.push(newChild)
				getOrganizeList({ viewType: 2 }).then(
					(res) => (this.organizationTreeData = [res.data.data[0]])
				)
 
				this.organizationForm.organizationName = ''
				this.value1 = ''
				this.value = ''
				this.organizationForm.id = ''
				this.organizationForm.lead = ''
				this.organizeType = ''
				this.addOrganizationDialogVisible = false
			})
		},
		async addOrganization1() {
			const organizeName = this.organizationForm.organizationName
			const parentOrganize = this.organizationForm.id
			let organizeType = this.addOrganizeType
			if (organizeType == '集团') {
				organizeType = 0
			} else if (organizeType == '子集团') {
				organizeType = 1
			} else if (organizeType == '公司') {
				organizeType = 2
			} else if (organizeType == '部门') {
				organizeType = 3
			} else if (organizeType == '生态单位') {
				organizeType = 4
			}
			const res = await addOrganize({
				organizeName,
				parentOrganize,
				organizeType,
			})
			const newChild = {
				id: id++,
				label: this.organizationForm.organizationName,
				children: [],
			}
			this.data = []
			this.data.push(newChild)
			const res1 = await getOrganizeList({ viewType: 2 })
			this.organizationTreeData = [res1.data.data[0]]
			this.visible = false
			// this.organizationForm.organizationName = ''
			// this.value = ''
			// this.organizationForm.id = ''
			// this.organizationForm.lead = ''
		},
		// 组织修改
		async editOrganization() {
			this.editOrganizationDialogVisible = false
			const id = this.data.id
			const organizeName = this.organizationForm.organizationName
			const organizeType = this.organizeType
			this.data.label = this.organizationForm.organizationName
			editOrganize({ id, organizeName, organizeType }).then((res) => {
				if (res.data.status === 200) {
					this.$message({
						message: res.data.message,
						type: 'success',
					})
				} else {
					this.$message({
						message: res.data.message,
						type: 'error',
					})
				}
			})
			const res1 = await getOrganizeList({ viewType: 2 })
			this.organizationTreeData = [res1.data.data[0]]
		},
		// 组织停用启用
		async statusChange(node) {
			setTimeout(() => {
				const organizeId = this.node.data.id
				const organizeName = this.node.data.organizeName
				console.log(node.data.organizeStatus)
				if (this.node.data.organizeStatus == 0) {
					restartOrganize({ organizeId, organizeName }).then((res) => {
						if (res.data.status == 200) {
							this.$message({
								message: res.data.message,
								type: 'success',
							})
						} else {
							this.$message({
								message: res.data.message,
								type: 'error',
							})
						}
						getOrganizeList({ viewType: 2 }).then((res) => {
							console.log(res.data.data[0])
							this.organizationTreeData = [res.data.data[0]]
						})
					})
				} else {
					forbiddenOrganize({ organizeId, organizeName }).then((res) => {
						if (res.data.status == 200) {
							this.$message({
								message: res.data.message,
								type: 'success',
							})
						} else {
							this.$message({
								message: res.data.message,
								type: 'error',
							})
						}
						getOrganizeList({ viewType: 2 }).then((res) => {
							this.organizationTreeData = [res.data.data[0]]
						})
					})
				}
			}, 0)
		},
		getSwitchValue(node) {
			// Convert numeric value to boolean
			return node.data.organizeStatus
		},
		oneClickEnables() {
			oneClickEnable().then((res) => {
				if (res.data.status == 200) {
					this.$message({
						message: res.data.message,
						type: 'success',
					})
					getOrganizeList({ viewType: 2 }).then((res) => {
						console.log(res.data.data[0])
						this.organizationTreeData = [res.data.data[0]]
					})
				} else {
					this.$message({
						message: res.data.message,
						type: 'error',
					})
				}
			})
		},
		// 获取修改组织类型
		change() {
			const selectedLabel = this.options.find(
				(item) => item.value === this.value
			)?.value
 
			this.organizeType = selectedLabel
		},
		// 获取新增组织类型
		select() {
			const selectedLabel = this.options1.find(
				(item) => item.value === this.value1
			)?.label
 
			this.addOrganizeType = selectedLabel
		},
		// 拖拽节点事件
		handleDragStart(draggingNode) {
			// 在拖拽开始时检查节点位置
			// 如果拖拽的节点是顶层节点并且已经有一个顶层节点存在,禁止拖拽
			if (draggingNode.level === 1 && this.hasTopLevelNode()) {
				this.draggable = false
			} else {
				this.draggable = true
			}
		},
 
		// 检查是否已经有一个顶层节点
		hasTopLevelNode() {
			return this.organizationTreeData.some((node) => node.level === 1)
		},
		handleDragEnd() {
			this.draggable = true
		},
 
		// 允许拖拽的条件
		allowDrop(draggingNode, dropNode, type) {
			// 如果拖拽的节点是顶层节点,不允许放置
 
			if (draggingNode.level === 1) {
				return false
			}
 
			// 如果拖拽的节点不是顶层节点但目标节点是顶层节点的同级,不允许放置
			if (draggingNode.level > 1 && dropNode.level === 1) {
				return false
			}
 
			// 其他情况允许放置
			return true
		},
		allowDrag(draggingNode, dropNode, type) {
			// 如果拖拽的节点是顶层节点,不允许放置
			// if (draggingNode.level === 1) {
			// 	return false
			// }
			// 如果拖拽的节点不是顶层节点但目标节点是顶层节点的同级,不允许放置
			// if (draggingNode.level > 1 && dropNode.level === 1) {
			// 	return false
			// }
			// 其他情况允许放置
			// return true
		},
		handleNodeDrop(draggingNode, dropNode, type) {
			// 在这里可以获取拖拽后节点的父节点
			const parentNode = dropNode.parent
 
			const currentOrganize = draggingNode.data.id
			const targetOrganize = dropNode.data.id
			changeOrganize({ currentOrganize, targetOrganize })
		},
	},
	watch: {
		// 监听拖拽后节点的变化
		draggedNode(newNode) {
			if (newNode) {
				// 这里可以访问拖拽后节点的父节点
				const parentNode = newNode.parent
			}
		},
	},
	computed: {
		filteredOrganizationTreeData() {
			// Filter out nodes with organizeStatus !== 0 (禁用)
			return this.organizationTreeData.filter((node) => {
				return node.data.organizeStatus === 0
			})
		},
	},
	async created() {
		const res = await getOrganizeList({ viewType: 2 })
		this.organizationTreeData = [res.data.data[0]]
		console.log([res.data.data[0]])
	},
}
</script>
 
<style scoped lang="scss">
.edit {
	width: 5vw;
}
.custom-tree-node {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	/*font-size: 15px;*/
	padding-right: 8px;
}
 
.selectFile {
	line-height: 19px;
}
 
.tree-card {
	overflow-y: auto; /* 开启滚动显示溢出内容 */
	width: 90%;
	height: 80vh;
	margin-left: 4vw;
	overflow-x: auto;
}
 
/*滚动条样式*/
::-webkit-scrollbar {
	width: 6px;
}
 
::-webkit-scrollbar-thumb {
	background-color: #40b8ff;
	border-radius: 3px;
}
 
.el-tree-node__label {
	font-size: 50px;
}
 
.list-card {
	overflow-y: auto; /* 开启滚动显示溢出内容 */
	width: 98%;
	height: 80vh;
}
 
/* 查询*/
.select-organization {
	margin-top: -33px;
	display: flex;
	justify-content: right;
	line-height: 30px;
}
 
.findButton,
.reset {
	margin-top: 58px;
	height: 40px;
	width: 8%;
}
 
.selectEvent {
	margin-right: 30px;
	margin-top: 58px;
}
 
.list-span {
	font-family: 微软雅黑;
	font-size: 20px;
	height: 100px;
	font-weight: bold;
	color: #525252;
	display: flex;
	line-height: 100px;
}
 
::v-deep .el-collapse-item__header {
	font-size: 17px;
	font-weight: bold;
}
 
.addOrganizationDialog {
	font-size: 20px;
	text-align: left;
	margin-top: -105px;
}
 
.dialog_divider {
	margin-top: -50px;
}
 
.dialogClose {
	text-align: right;
	margin-top: -75px;
	margin-bottom: -80px;
}
 
.span_title {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	color: #222222;
	font-size: 17px;
	font-weight: bold;
}
 
/*解决table展开时高度异常问题*/
::v-deep .el-table__header {
	width: 100% !important;
}
 
::v-deep .el-table__body {
	width: 100% !important;
}
</style>

到此这篇关于vue中el-tree结合el-switch实现开关状态切换的文章就介绍到这了,更多相关vue开关状态切换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家! 

相关文章

  • vue跳转到详情页的两种实现方法

    vue跳转到详情页的两种实现方法

    最近接触了vue项目,下面这篇文章主要给大家介绍了关于vue跳转到详情页的两种实现方法,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-06-06
  • 基于vue实现一个神奇的动态按钮效果

    基于vue实现一个神奇的动态按钮效果

    今天我们将利用vue的条件指令来完成一个简易的动态变色功能按钮,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
    2019-05-05
  • vite+vue3+ts项目中提示无法找到模块的问题及解决

    vite+vue3+ts项目中提示无法找到模块的问题及解决

    这篇文章主要介绍了vite+vue3+ts项目中提示无法找到模块的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • Vue3.0实现无限级菜单

    Vue3.0实现无限级菜单

    这篇文章主要为大家详细介绍了基于Vue3.0实现无限级菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • element-ui 上传图片后清空图片显示的实例

    element-ui 上传图片后清空图片显示的实例

    今天小编就为大家分享一篇element-ui 上传图片后清空图片显示的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue3+ts项目中.env配置环境变量与情景配置方式

    vue3+ts项目中.env配置环境变量与情景配置方式

    本文介绍了如何在Vite中配置环境变量和不同的运行模式,环境变量文件以.env开头,仅VITE_前缀的变量会被暴露,开发模式加载.env.development,生产模式加载.env.production,NODE_ENV用于区分开发和生产环境
    2024-10-10
  • 你知道Vue中神奇的$set是如何实现的吗?

    你知道Vue中神奇的$set是如何实现的吗?

    在日常开发中,$set的也是一个非常实用的API。但是我们知其然更要知其所以然,接下来就跟随小编一起看一下Vue中的$set是如何实现的吧
    2022-12-12
  • Vue3框架使用报错以及解决方案

    Vue3框架使用报错以及解决方案

    这篇文章主要介绍了Vue3框架使用报错以及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue如何实现分页功能代码实例

    Vue如何实现分页功能代码实例

    这篇文章主要给大家介绍了关于Vue如何实现分页功能的相关资料,Vue分页功能的实现需要前端和后端共同配合完成,文中通过代码实例介绍的非常详细,需要的朋友可以参考下
    2023-09-09
  • VUE更换背景颜色的方法

    VUE更换背景颜色的方法

    这篇文章主要介绍了VUE更换背景颜色的方法, 在这个示例中,我们使用了一个backgroundColor变量来存储当前页面的背景颜色,当用户点击按钮时,我们通过调用setBackgroundColor方法来更改背景颜色,并将背景颜色同时应用于body元素,需要的朋友可以参考下
    2024-03-03

最新评论